It's silly to write the same functionality over and over again. Auth is the most often implemented functionality at web projects. Let's check how can we speed up development by using one of auth provider: Amazon Cognito, Google Firebase or Auth0. On code level we will use custom React Hooks.

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!