$30 off During Our Annual Pro Sale. View Details »

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. None
  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
  3. Main idea

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

  5. What is Auth?

  6. None
  7. What’s authentication and authorization? Authentication — a process of verifying

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

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

    the identity. Air Force Photo/Paul Zadach 401 relogin
  10. What’s authentication and authorization? Authorization — a process of defining

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

    access policy for some resource. 403 relogin
  12. Don't write yours custom Auth

  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
  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
  15. Use Auth as Service

  16. Popular Authentication Services

  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
  18. None
  19. None
  20. None
  21. None
  22. Amazon Cognito Example

  23. None
  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
  25. Ownership cost = Development cost + Maintenance cost + Risks

    control cost
  26. Auth Flow

  27. None
  28. None
  29. None
  30. JWT

  31. None
  32. useAuth AuthProvider

  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:
  34. 1. HOC 2. Hooks ▻ useState ▻ useEffect ▻ useMemo

    3. Context Provider ▻ useAuth = useContext Possible Implementations:
  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 } }
  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 } }
  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 } }
  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 } }
  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 } }
  40. Configuration

  41. None
  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" } }
  43. Main idea

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

  45. Questions time!