AuthContext

The library does not come with a client-side code or any built-in authentication context feature. It is up to developer how they will implement user data flow throughout application.

See below for an example AuthContext

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