"Auth for React.js APP", Nikita Galkin

"Auth for React.js APP", Nikita Galkin

• 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, useexisting solutions for solving business needs
• 5.
  What is Auth?
• 7.
  What’s authentication andauthorization? Authentication — a process of verifying the identity. Air Force Photo/Paul Zadach
• 8.
  What’s authentication andauthorization? Authentication — a process of verifying the identity. Air Force Photo/Paul Zadach 401 relogin
• 9.
  What’s authentication andauthorization? Authentication — a process of verifying the identity. Air Force Photo/Paul Zadach 401 relogin
• 10.
  What’s authentication andauthorization? Authorization — a process of defining access policy for some resource.
• 11.
  What’s authentication andauthorization? 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
• 22.
  Amazon Cognito Example
• 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 = Developmentcost + Maintenance cost + Risks control cost
• 26.
  Auth Flow
• 30.
  JWT
• 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
• 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, useexisting solutions for solving business needs
• 45.
  Questions time!