How to resolve Access Denied Error in Next js 13.4 using Next Auth Google Sign In and MongoDB

Question

I am attempting to use Next Auth in Next.js 13.4 to log in with Google. When I try to log in, it redirects to the Google page "http://localhost:3000/api/auth/signin?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2F". On this page, I click the "Sign In With Google" button. After pressing Log In, my browser starts searching and after some time it shows me this error: "http://localhost:3000/api/auth/error?error=AccessDenied" on the browser and on the server side, I got this error while my MongoDB database connected: "TypeError: Cannot read properties of undefined (reading 'catch')..."

Here are my code files:

.env File:

GOOGLE_ID=715456864664-rucr2vqq5a254ns0ejjtmpkuf2c1t7en.apps.googleusercontent.com
GOOGLE_SECRET=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
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=6e4b48a9d72389c22dd2d65b32a4c0fc
MONGODB_URI=mongodb+srv://xharshah45:[email protected]/next-promptify?retryWrites=true&w=majority

database.js file:

import mongoose from "mongoose";

let isConnected = false;
export const connectToDB = async () => {
  mongoose.set("strictQuery", true);
  if (isConnected) {
    console.log("Connected to MongoDB");
    return;
  }
  try {
    await mongoose
      .connect(process.env.MONGODB_URI)
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
  } catch (error) {
    console.log(error);
  }
};

[...nextauth]/route.js file:

import User from "@/models/user";
import { connectToDB } from "@/utils/database";
import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";

const authHandler = NextAuth({
  providers: [
    // OAuth authentication providers...
    GoogleProvider({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
    }),
  ],
  callbacks: {
    async signIn({ profile }) {
      try {
        await connectToDB().then(() => {
          console
            .log(`connected to db ${process.env.MONGODB_URI}`)
            .catch((error) => {
              console.log("error");
            });
        });
        const userExists = await User.findOne({ email: profile.email });
        if (!userExists) {
          await User.create({
            email: profile.email,
            username: profile.name.replace(" ", "").toLowerCase(),
            image: profile.image,
          }).then(() => {
            console
              .log(`connected to db ${process.env.MONGODB_URI}`)
              .catch((error) => {
                console.log("error");
              });
          });
        }
        return true;
      } catch (error) {
        console.log(error);
        return false;
      }
    },

    async session({ session }) {
      try {
        const sessionUser = await User.findOne({
          email: session.user.email,
        }).then(() => {
          console
            .log(`connected to db ${process.env.MONGODB_URI}`)
            .catch((error) => {
              console.log("error");
            });
        });
        session.user.id = sessionUser._id.toString();
        return session;
      } catch (err) {
        console.log(err);
      }
    },
  },
  secret: process.env.NEXTAUTH_SECRET,
});
export { authHandler as GET, authHandler as POST };

Answer 1

In your route.js file, try changing callbacks to callback.

Answer 2

I assume you followed the tutorial from JS Mastery, and the reason your Gmail was denied might be that your Gmail format didn't match the requirement you set in the User model.

Just remove or comment out the 'match' field in your user.js file and restart the program