Auth for React.js App

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