dbritto-dev · October 24, 2024 21:43
diff --git a/auth-context.tsx b/auth-context.tsx
 import { useState, createContext, useMemo, useCallback, useContext } from 'react'

 const AuthContext = createContext(undefined)

 export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(undefined)
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState(null)

  const login = useCallback(async () => {
    try {
      setIsLoading(true)
      const nextUser = await fetch(`http://api.com/login`)
      setUser(nextUser)
    } catch (nextError) {
      setError(nextError.message)
    } finally {
      setIsLoading(false)
    }
  }, [])

  const logout = useCallback(async () => {
    await fetch(`http://api.com/logout`)
  }, [])

  const auth = useMemo(
    () => ({
      user,
      isLoading,
      error,
      login,
      logout,
    }),
    [user, isLoading, error, login, logout]
  )

  return <AuthContext.Provider value={auth}>{children}</AuthContext.Provider>
 }

 export const useAuth = () => {
  const auth = useContext(AuthContext)
  if (auth === undefined) throw Error(`useAuth must be within AuthProvider`)
  return auth
 }

 const Component = () => {
  const { isLoading, error, user } = useAuth()

  if (isLoading) return <div>Loading...</div>
  if (error) return <div>Error: {error}!</div>
  if (!user) return <div>Unauthenticated</div>
  return <div>Authenticated</div>
 }