Auth for React.js App

Transcript

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?
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
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 = Development cost + 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, use existing solutions for solving business needs
45. Questions time!