"Auth for React.js APP", Nikita Galkin
0 likes425 views
The document discusses the importance of leveraging existing solutions for software development to minimize technical and process debt. It emphasizes the differentiation between authentication and authorization, outlining best practices and popular third-party authentication services. Additionally, it includes example implementations and configurations for integrating authentication systems into applications.
![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
}
}](https://image.slidesharecdn.com/authforreact-210330070900/85/Auth-for-React-js-APP-Nikita-Galkin-35-320.jpg)
![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
}
}](https://image.slidesharecdn.com/authforreact-210330070900/85/Auth-for-React-js-APP-Nikita-Galkin-36-320.jpg)
![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
}
}](https://image.slidesharecdn.com/authforreact-210330070900/85/Auth-for-React-js-APP-Nikita-Galkin-37-320.jpg)
![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
}
}](https://image.slidesharecdn.com/authforreact-210330070900/85/Auth-for-React-js-APP-Nikita-Galkin-38-320.jpg)
![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
}
}](https://image.slidesharecdn.com/authforreact-210330070900/85/Auth-for-React-js-APP-Nikita-Galkin-39-320.jpg)
"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, use existing solutions for solving business needs
- 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
- 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
- 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
- 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
- 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!