Skip to content

Instantly share code, notes, and snippets.

@nikasepiskveradze
Created November 20, 2021 21:36
Show Gist options
  • Save nikasepiskveradze/ff6064da87bd25468495506cddd9089a to your computer and use it in GitHub Desktop.
Save nikasepiskveradze/ff6064da87bd25468495506cddd9089a to your computer and use it in GitHub Desktop.
auth provider simple skeleton
import * as React from 'react'
import {FullPageSpinner} from '~/components/lib'
const AuthContext = React.createContext()
function AuthProvider(props) {
// code for pre-loading the user's information if we have their token in
// localStorage goes here
// 🚨 this is the important bit.
// Normally your provider components render the context provider with a value.
// But we post-pone rendering any of the children until after we've determined
// whether or not we have a user token and if we do, then we render a spinner
// while we go retrieve that user's information.
if (weAreStillWaitingToGetTheUserData) {
return <FullPageSpinner />
}
const login = () => {} // make a login request
const register = () => {} // register the user
const logout = () => {} // clear the token in localStorage and the user data
// note, I'm not bothering to optimize this `value` with React.useMemo here
// because this is the top-most component rendered in our app and it will very
// rarely re-render/cause a performance problem.
return (
<AuthContext.Provider value={{data, login, logout, register}} {...props} />
)
}
const useAuth = () => React.useContext(AuthContext)
export {AuthProvider, useAuth}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment