'use client';
import { User } from '@/types';
import {
  Dispatch,
  SetStateAction,
  createContext,
  useContext,
  useState,
} from 'react';

type AuthContextValue = {
  user: User | null;
  setUser: Dispatch<SetStateAction<User | null>>;
};

const AuthContext = createContext<AuthContextValue>({} as AuthContextValue);

export const AuthContextProvider = ({
  children,
}: {
  children: React.ReactNode;
}) => {
  const _user: User | null = JSON.parse(localStorage.getItem('user') as string);
  console.log('in store', _user);
  const [user, setUser] = useState<User | null>(_user);
  return (
    <AuthContext.Provider value={{ user, setUser }}>
      {children}
    </AuthContext.Provider>
  );
};

export const useAuthContext = () => useContext(AuthContext);

why the below error appears in the terminal?


error ReferenceError: localStorage is not defined
at AuthContextProvider (./context/auth.context.tsx:14:30)
21 | children: React.ReactNode;
22 | }) => {

23 | const _user: User | null = JSON.parse(localStorage.getItem('user') as string);

| ^
24 | console.log('in store', _user);
25 | const [user, setUser] = useState<User | null>(_user);
26 | return (