Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Auth for React.js App

Auth for React.js App

Nikita Galkin

March 27, 2021
Tweet

More Decks by Nikita Galkin

Other Decks in Programming

Transcript

  1. Nikita
    Galkin
    Love and Know:
    ▰ How to make developers and business happy
    ▰ Technical and process debt elimination
    Believe that:
    ▰ Any problem must be solved at the right level
    ▰ Software is easy. People are hard
    ▰ A problem should be highlighted, an idea should
    be "sold", a solution should be demonstrated
    Links:
    Site GitHub Twitter Facebook
    2

    View full-size slide

  2. Stop writing code,
    use existing
    solutions for solving
    business needs

    View full-size slide

  3. What is
    Auth?

    View full-size slide

  4. What’s authentication and authorization?
    Authentication — a process of
    verifying the identity.
    Air Force Photo/Paul Zadach

    View full-size slide

  5. What’s authentication and authorization?
    Authentication — a process of
    verifying the identity.
    Air Force Photo/Paul Zadach
    401
    relogin

    View full-size slide

  6. What’s authentication and authorization?
    Authentication — a process of
    verifying the identity.
    Air Force Photo/Paul Zadach
    401
    relogin

    View full-size slide

  7. What’s authentication and authorization?
    Authorization — a process of defining
    access policy for some resource.

    View full-size slide

  8. What’s authentication and authorization?
    Authorization — a process of defining
    access policy for some resource.
    403
    relogin

    View full-size slide

  9. Don't write
    yours custom
    Auth

    View full-size slide

  10. 1. Registration flow
    2. Password reset flow
    3. Credentials Validation
    4. Error Handling
    5. Error Messages
    Before user can authenticate
    you need to implement:
    6. Localization
    7. Brute-force attacks
    protection
    8. Email templates

    View full-size slide

  11. 1. “Remember me”
    feature
    2. Deleting or
    blocking/suspending
    users
    After user authenticates,
    you need to think about
    3. Event log
    4. Anomaly Detection
    5. MFA
    6. Global logout
    7. Scaling

    View full-size slide

  12. Use Auth as
    Service

    View full-size slide

  13. Popular Authentication Services

    View full-size slide

  14. 1. Registration flow
    2. Password reset flow
    3. Credentials Validation
    4. Error Handling
    5. Error Messages
    6. Localization
    7. Brute-force attacks
    protection
    8. Email templates

    View full-size slide

  15. Amazon Cognito Example

    View full-size slide

  16. ● Firebase – free (without Phone Auth)
    ● Cognito – free 50,000 MAU,
    $0.0055 per user after
    ● Auth0 – free Up to 7,000 MAU,
    $23/mo Up to 50,000 MAU,
    x.000$/mo after
    ● Okta – 🔥💵
    Pricing

    View full-size slide

  17. Ownership cost =
    Development cost +
    Maintenance cost +
    Risks control cost

    View full-size slide

  18. useAuth
    AuthProvider

    View full-size slide

  19. ● @auth0/auth0-react – 237,957
    ● @okta/okta-react – 63,787
    ● @aws-amplify/ui-react – 42,794
    ● react-firebaseui – 17,733
    ● reactfire – 3,833
    Package’s Weekly Downloads:

    View full-size slide

  20. 1. HOC
    2. Hooks
    ▻ useState
    ▻ useEffect
    ▻ useMemo
    3. Context Provider
    ▻ useAuth = useContext
    Possible Implementations:

    View full-size slide

  21. import { useState, useEffect, useMemo } from 'react'
    import Auth from '@aws-amplify/auth'
    export default ({ provider, options }) => {
    const [state, setState] = useState({
    user: {},
    isSignedIn: false
    })
    const auth = useMemo(() => {
    Auth.configure(options)
    return Auth
    }, [])
    useEffect(() => {
    auth.currentAuthenticatedUser()
    .then((user) => setState({ user, isSignedIn: true }))
    .catch(() => {})
    }, [])
    const signIn = () => auth.federatedSignIn({ provider })
    const signOut = () => auth.signOut()
    return {
    ...state,
    signIn,
    signOut
    }
    }

    View full-size slide

  22. import { useState, useEffect, useMemo } from 'react'
    import Auth from '@aws-amplify/auth'
    export default ({ provider, options }) => {
    const [state, setState] = useState({
    user: {},
    isSignedIn: false
    })
    const auth = useMemo(() => {
    Auth.configure(options)
    return Auth
    }, [])
    useEffect(() => {
    auth.currentAuthenticatedUser()
    .then((user) => setState({ user, isSignedIn: true }))
    .catch(() => {})
    }, [])
    const signIn = () => auth.federatedSignIn({ provider })
    const signOut = () => auth.signOut()
    return {
    ...state,
    signIn,
    signOut
    }
    }

    View full-size slide

  23. import { useState, useEffect, useMemo } from 'react'
    import Auth from '@aws-amplify/auth'
    export default ({ provider, options }) => {
    const [state, setState] = useState({
    user: {},
    isSignedIn: false
    })
    const auth = useMemo(() => {
    Auth.configure(options)
    return Auth
    }, [])
    useEffect(() => {
    auth.currentAuthenticatedUser()
    .then((user) => setState({ user, isSignedIn: true }))
    .catch(() => {})
    }, [])
    const signIn = () => auth.federatedSignIn({ provider })
    const signOut = () => auth.signOut()
    return {
    ...state,
    signIn,
    signOut
    }
    }

    View full-size slide

  24. import { useState, useEffect, useMemo } from 'react'
    import Auth from '@aws-amplify/auth'
    export default ({ provider, options }) => {
    const [state, setState] = useState({
    user: {},
    isSignedIn: false
    })
    const auth = useMemo(() => {
    Auth.configure(options)
    return Auth
    }, [])
    useEffect(() => {
    auth.currentAuthenticatedUser()
    .then((user) => setState({ user, isSignedIn: true }))
    .catch(() => {})
    }, [])
    const signIn = () => auth.federatedSignIn({ provider })
    const signOut = () => auth.signOut()
    return {
    ...state,
    signIn,
    signOut
    }
    }

    View full-size slide

  25. import { useState, useEffect, useMemo } from 'react'
    import Auth from '@aws-amplify/auth'
    export default ({ provider, options }) => {
    const [state, setState] = useState({
    user: {},
    isSignedIn: false
    })
    const auth = useMemo(() => {
    Auth.configure(options)
    return Auth
    }, [])
    useEffect(() => {
    auth.currentAuthenticatedUser()
    .then((user) => setState({ user, isSignedIn: true }))
    .catch(() => {})
    }, [])
    const signIn = () => auth.federatedSignIn({ provider })
    const signOut = () => auth.signOut()
    return {
    ...state,
    signIn,
    signOut
    }
    }

    View full-size slide

  26. Configuration

    View full-size slide

  27. resource "google_identity_platform_inbound_saml_config" "saml_config" {
    name = "saml.tf-config"
    display_name = "Display Name"
    idp_config {
    idp_entity_id = "tf-idp"
    sign_request = true
    sso_url = "https://example.com"
    idp_certificates {
    x509_certificate = file("test-fixtures/rsa_cert.pem")
    }
    }
    sp_config {
    sp_entity_id = "tf-sp"
    callback_uri = "https://example.com"
    }
    }

    View full-size slide

  28. Stop writing code,
    use existing
    solutions for solving
    business needs

    View full-size slide

  29. Questions
    time!

    View full-size slide