Cookie Based Authentication in NextJS Application

_app.tsx

const App: NextPage<Props> = ({ prop }) => {
  const [{ authenticated, loading }, dispatch] = useReducer(
    AuthenticationReducer,
    {
      authenticated: false,
      loading: true,
    }
  );
  
  useEffect(() => {
    async function checkAuthentication() {
      try {
        const { data } = await apolloClient.query<GetMeQuery>({
          query: GET_ME,
        });

        const token = data?.me?.token;

        if (token) {
          setToken(token);
          dispatch({ type: "authenticate" });
        }
      } catch (error) {
        dispatch({ type: "logout" });
      }
    }

    checkAuthentication();
  }, []);
}

reducer.ts

import React, { Reducer } from "react";

import { NOOP } from "$constants/common";

export interface AuthenticationState {
  authenticated: boolean;
  loading: boolean;
}

type AuthenticationActions = "authenticate" | "logout";

interface AuthenticationAction {
  type: AuthenticationActions;
}

export type AuthenticationContext = {
  authenticated: boolean;
  authenticate(): void;
  logout(): void;
};

export const AuthenticationContext = React.createContext<AuthenticationContext>(
  {
    authenticated: false,
    authenticate: NOOP,
    logout: NOOP,
  }
);

export const AuthenticationReducer: Reducer<
  AuthenticationState,
  AuthenticationAction
> = (state, action: AuthenticationAction) => {
  switch (action.type) {
    case "authenticate":
      return { ...state, authenticated: true, loading: false };
    case "logout":
      return { ...state, authenticated: false, loading: false };
    default:
      return { ...state, authenticated: false, loading: true };
  }
};