AuthProvider

To share user data between the server and client components, we can use the custom AuthContext we created in the previous step.

Example AuthProvider

Below is an example of how to implement a custom AuthProvider component that uses AuthContext to pass user data between the server and client components.

AuthProvider.tsx

'use client';
 
import * as React from 'react';
import {AuthContext, User} from './AuthContext';
 
export interface AuthProviderProps {
  user: User | null;
  children: React.ReactNode;
}
 
export const AuthProvider: React.FunctionComponent<AuthProviderProps> = ({
  user,
  children
}) => {
  return (
    <AuthContext.Provider
      value={{
        user
      }}
    >
      {children}
    </AuthContext.Provider>
  );
};

AuthContext Layout