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. View Slide

  2. 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 Slide

  3. Main idea

    View Slide

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

    View Slide

  5. What is
    Auth?

    View Slide

  6. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  12. Don't write
    yours custom
    Auth

    View Slide

  13. 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 Slide

  14. 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 Slide

  15. Use Auth as
    Service

    View Slide

  16. Popular Authentication Services

    View Slide

  17. 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 Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. Amazon Cognito Example

    View Slide

  23. View Slide

  24. ● 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 Slide

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

    View Slide

  26. Auth Flow

    View Slide

  27. View Slide

  28. View Slide

  29. View Slide

  30. JWT

    View Slide

  31. View Slide

  32. useAuth
    AuthProvider

    View Slide

  33. ● @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 Slide

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

    View Slide

  35. 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 Slide

  36. 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 Slide

  37. 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 Slide

  38. 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 Slide

  39. 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 Slide

  40. Configuration

    View Slide

  41. View Slide

  42. 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 Slide

  43. Main idea

    View Slide

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

    View Slide

  45. Questions
    time!

    View Slide