AuthContext

The library doesn't include any client-side code or built-in authentication state context. It's up to the developer to decide how to manage user data throughout the application.

Check out the example of an AuthContext below:

Example AuthContext

The following is an example implementation of custom AuthContext using React's createContext (opens in a new tab).

AuthContext.ts

import {createContext, useContext} from 'react';
import {UserInfo} from 'firebase/auth';
import {Claims} from 'next-firebase-auth-edge/lib/auth/claims';
 
export interface User extends UserInfo {
  emailVerified: boolean;
  customClaims: Claims;
}
 
export interface AuthContextValue {
  user: User | null;
}
 
export const AuthContext = createContext<AuthContextValue>({
  user: null
});
 
export const useAuth = () => useContext(AuthContext);

Middleware AuthProvider