Home > Mobile >  Next.js | TypeError: Cannot read properties of undefined (reading 'secret')
Next.js | TypeError: Cannot read properties of undefined (reading 'secret')

Time:09-17

I was trying to authenticate the API routes in next.js but getting the below error. Page level Authentication is working fine. But wile trying to get the session in the API routes, getting error.

error - TypeError: Cannot read properties of undefined (reading 'secret')
at unstable_getServerSession (C:\Users\amond07\Workspace\Time_Management_App\time-management-matrix\time-management-matrix-web\node_modules\next-auth\next\index.js:78:48)
at __WEBPACK_DEFAULT_EXPORT__ (webpack-internal:///(api)/./pages/api/tasks/[user]/[date]/index.js:14:100)
at Object.apiResolver (C:\Users\amond07\Workspace\Time_Management_App\time-management-matrix\time-management-matrix-web\node_modules\next\dist\server\api-utils\node.js:179:15)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async DevServer.runApi (C:\Users\amond07\Workspace\Time_Management_App\time-management-matrix\time-management-matrix-web\node_modules\next\dist\server\next-server.js:381:9)
at async Object.fn (C:\Users\amond07\Workspace\Time_Management_App\time-management-matrix\time-management-matrix-web\node_modules\next\dist\server\base-server.js:500:37)
at async Router.execute (C:\Users\amond07\Workspace\Time_Management_App\time-management-matrix\time-management-matrix-web\node_modules\next\dist\server\router.js:213:36)
at async DevServer.run (C:\Users\amond07\Workspace\Time_Management_App\time-management-matrix\time-management-matrix-web\node_modules\next\dist\server\base-server.js:619:29)
at async DevServer.run (C:\Users\amond07\Workspace\Time_Management_App\time-management-matrix\time-management-matrix-web\node_modules\next\dist\server\dev\next-dev-server.js:536:20)
at async DevServer.handleRequest (C:\Users\amond07\Workspace\Time_Management_App\time-management-matrix\time-management-matrix-web\node_modules\next\dist\server\base-server.js:320:20)

Below is the code snippets

pages/api/[...nextauth].js

import GoogleProviders from "next-auth/providers/google";

export default NextAuth({
  // Configure one or more authentication providers
  providers: [
    GoogleProviders({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
    }),
    // ...add more providers here
  ],
  secret: process.env.NEXTAUTH_SECRET,
});

pages\tasks\[user]\date

import clientPromise from "../../../../../lib/mongodb";
import { authOptions } from "../../../auth/[...nextauth]";
import { unstable_getServerSession } from "next-auth/next";

export default async (req, res) => {
  const { user, date } = req.query;
  const session = await unstable_getServerSession(req, res, authOptions);

  try {
    const client = await clientPromise;
    const db = client.db();
    const tasks = await db
      .collection("tasks")
      .find({ user: user, taskDate: date })
      .sort({ startDate: -1 })
      .toArray();

    res.status(200).send({ tasks });
  } catch (err) {
    res.status(500).send({ error: "failed to fetch data" });
  }
};

CodePudding user response:

Is the "NEXTAUTH_SECRET" (properly) defined in your .env?

CodePudding user response:

I have fixed the issue. Issue was the way I was exporting it. The unstable_getServerSession accepts a json object as authOptions but I was providing a function.

Edited the [...nextAuth].js as below:

import NextAuth from "next-auth";
import GoogleProviders from "next-auth/providers/google";
import { NextAuthOptions } from "next-auth";

export const authOptions = {
  // Configure one or more authentication providers
  providers: [
    GoogleProviders({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
    }),
    // ...add more providers here
  ],
  secret: process.env.NEXTAUTH_SECRET,
};

export default NextAuth(authOptions);
  • Related