Auth Context Pattern

Example

A common real-world pattern: one provider component owns the state, a custom hook reads it.

import { createContext, useContext, useState } from 'react';

const AuthContext = createContext(null);

function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const login = (name) => setUser({ name });
  const logout = () => setUser(null);
  return <AuthContext.Provider value={{ user, login, logout }}>{children}</AuthContext.Provider>;
}

function useAuth() {
  return useContext(AuthContext);
}

function Header() {
  const { user, login, logout } = useAuth();
  return user
    ? <p>Hi {user.name} <button onClick={logout}>Logout</button></p>
    : <button onClick={() => login('Asha')}>Login</button>;
}

export default function App() {
  return <AuthProvider><Header /></AuthProvider>;
}

Result