I cant set my cookie in nextjs. Error : Cannot read properties of null (reading 'useContext')

Question

There is no error in next-auth implementation, i just want to set the cookie, but couldn't understand how to do.

auth.js

import { useCookies } from "react-cookie";
import { setCookies } from 'cookies-next';
import { useEffect } from "react";

const AuthReducer = (action) => {
    const [cookie, setCookie] = useCookies(["user"]);
    switch(action.action) {
         case "Register":
            console.log("completed");
            setCookie("user", JSON.stringify(action.token), {
                path: "/",
                maxAge: 3600 * 24, // Expires After 1hr
                sameSite: true,
              });
              console.log("completed");
              return true;
        default:
            return action;
    }
}

export default AuthReducer;

[...nextauth].js

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import axios from "axios";

import AuthReducer from "../../../reducer/auth";

export default NextAuth({
  // Configure one or more authentication providers
  providers: [
    GoogleProvider({
      clientId:
        process.env.cid,
      clientSecret: process.env.sid,
    }),
    // ...add more providers here
  ],
  callbacks: {
    async signIn({ account, profile }) {
      if (account.provider == "google") {
        const res = await axios.post("http://localhost:5000/user/googlelogin", {
          object: profile,
        });
        try{
          console.log(res.data.status);
          const data = AuthReducer({ action: res.data.status, token: res.data.token })

          
          console.log(data);
        }catch(err){
          console.log(err)
        }
        return profile.email_verified;
      }
      return true; // Do different verification for other providers that don't have `email_verified`
    },
  },
});

error

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
TypeError: Cannot read properties of null (reading 'useContext')
    at useContext (D:\FreeLancing\project 0\project0\node_modules\react\cjs\react.development.js:1616:21)
    at useCookies (D:\FreeLancing\project 0\project0\node_modules\react-cookie\cjs\useCookies.js:17:39)
    at AuthReducer (webpack-internal:///(api)/./reducer/auth.js:15:89)
    at Object.signIn (webpack-internal:///(api)/./pages/api/auth/[...nextauth].js:32:91)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Object.callback (D:\FreeLancing\project 0\project0\node_modules\next-auth\core\routes\callback.js:89:29)
    at async NextAuthHandler (D:\FreeLancing\project 0\project0\node_modules\next-auth\core\index.js:139:28)
    at async NextAuthNextHandler (D:\FreeLancing\project 0\project0\node_modules\next-auth\next\index.js:21:19)
    at async D:\FreeLancing\project 0\project0\node_modules\next-auth\next\index.js:57:32

I dont understand why it is showing this error TypeError: Cannot read properties of null (reading 'useContext'). I am stuck, can somebody help me to solve this issue, It will be great help. Thank you

Answer 1

If you look at your warnings, the second reason might point at the right direction.

You might be breaking the Rules of Hooks.

React docs say : Don’t call Hooks from regular JavaScript functions.

You can only call hooks from React Components or other hooks. But AuthReducer is none of them.

Looking at your use case, AuthReducer can not be converted to a hook or a functional component. You are better off using it as a normal JS function.

The hook you have used listens to changes in user cookie and rerenders the component it is used in.

If you only want to set the cookie, follow this

An attempt below:

const AuthReducer = (action) => {
    switch(action.action) {
         case "Register":
            console.log("completed");
            document.cookie = "user=" + JSON.stringify(action.token) + JSON.stringify({
                path: "/",
                maxAge: 3600 * 24, // Expires After 1hr
                sameSite: true,
              });
              console.log("completed");
              return true;
        default:
            return action;
    }
}