I get http://localhost:3000/api/auth/error?error=AccessDenied in my NextJs application using google signin. Why?

Pleas Help me To solve this problem. http://localhost:3000/api/auth/error?error=AccessDenied in my NextJs application using google signin. Why?
Here is my [...nextauth] file ...

Here is my Nav component where I want to pass the signin function...

When I click on it, it returns a 404 response yet I am supposed to see this below:

How I Sove It?

This comment from the gist solved mine:
https://gist.github.com/adrianhajdin/6df61c6cd5ed052dce814a765bff9032?permalink_comment_id=4572572#gistcomment-4572572

if you're having trouble signing in because your username has multiple white space
change the

await User.create({
    email: profile.email,
    username: profile.name.replace(" ", "").toLowerCase(),
    image: profile.picture
})

to

await User.create({
    email: profile.email,
    username: profile.name.replace(/\s/g, "").toLowerCase(),
    image: profile.picture
})

I am following the same tutorial by js Mastery, It may be funny but I solve my problem by checking the terminal message was just consoling an undeclared variable. In short, I want to say you that double-check your terminal or your editor's terminal and an error will be showing there it can be different than mine.
At the start of learning Next.js we don't have that much habit to check the terminal but all errors are written there so just check it and it will help you to solve this problem

The problem will be mention in Your Terminal.

Check if the coonectToDB function doesn't cause an error

await connectToDB();

if you didn't see the MongoDB connected then the problem is in the function

Check if the User object doesn't cause any error (if it's defined,...).

const userExists = await User.findOne({ 
    email: profile.email, 
});

Check the name of your google account does follow the rules that you have set in the models/user.js file :

// models/user.js file 
username: {
    type: String,
    required: [true, 'Username is required!'],
    match: [
            /^(?=.{8,20}$)(?![_.])(?!.*[_.]{2})[a-zA-Z0-9._]+(?<![_.])$/,
            "Username invalid, it should contain 8-20 alphanumeric letters and be unique!"
    ] 
}

if it's not then you will find in the console the following error :

> Error: User validation failed: username: Username invalid, it should contain 8-20 alphanumberic letters
and be unique!

the name should be :

1. contains only :
   • English alphabet A-Za-z (any characters different then that isn't
     allowed )
   • numbers 0-9
   • underscore _
   • point .
2. number of characters is between 8 to 20
3. all the combination of underscore and point aren't allowed to be inside the name

like :

example_.example

example_.example

example__example

example..example

In this specific case, for this particular tutorial, you should check how your username is configured in your Google account.

In https://myaccount.google.com/u/2/profile/name, in the third field, you must choose the first method to display your name to other users (because the "match" method in the user.js does not accept "(", ")", or '"' characters in the regex). Additionally, make sure your name is configured.

(For those who haven't followed the tutorial, the user.js file is as follows:)

import { Schema, model, models } from "mongoose";

const userSchema = new Schema({
    email: {
        type: String,
        unique: [true, "Email already exists"],
        required: [true, "Email is required"],
    },

    username: {
        type: String,
        unique: [true, "Username already exists"],
        required: [true, "Username is required"],
        match: [/^(?=.{8,20}$)(?![_.])(?!.*[_.]{2})[a-zA-Z0-9._]+(?<![_.])$/, "Username is invalid, it should contain 8-20 alphanumeric characters and be unique!"],
    },

    image: {
        type: String,
    },
});

const User = models.User || model("User", userSchema);

export default User;

That was the issue I encountered (one of my accounts works, but not the others).

In my case, correction in user.ts helped:

  name: {
    type: String,
    required: [ true, 'Username is required' ],
    match: [
      /^(?=.{8,150}$)(?![_.])(?!.*[_.]{2})[а-яА-Яa-zA-Z0-9._]+(?<![_.])$/,
      'Username invalid, it should contain 8-20 alphanumeric letters and be unique!'
    ]
  },

Thing is that my user's name is in Cyrillic and more than 20 characters. Problem about this regular expression:

> /^(?=.{8,20}$)(?![.])(?!.*[.]{2})[a-zA-Z0-9.]+(?<![.])$/,

replaced by

> /^(?=.{8,150}$)(?![.])(?!.*[.]{2})[а-яА-Яa-zA-Z0-9.]+(?<![.])$/,

Most likely you have the same problem if you get the following error in the terminal:

> User validation failed: name: Username invalid, it should contain
> 8-20 alphanumeric letters and be unique!

discussions and possible other solutions

I hope this will help in your case too

I had the same problem, and in my case, the answer was as simple as removing the angle brackets "<"and ">" around <password>. I had been trying: my_login_id:<my_password>, when it should have been my_login_id:my_password.

Just remove/comment the match key

username: {
    type: String,
    required: [true, 'Username is required']
    // match:[/^(?=.{8,150}$)(?![_.])(?!.*[_.]{2})[а-яА-Яa-zA-Z0-9._]+(?<![_.])$/,
    // 'Username invalid, it should contain 8-20 alphanumeric letters and be unique!']
},
},

I had the same problem. The solution was to remove the angle brackets around the password. I was trying to use my_login_id:<my_password>, but it should have been my_login_id:my_password.

Hope this helped