Cannot Read Properties of Undefined Error When Importing Mongoose Model in NextAuth Credentials Provider about next-auth

[subhajit100]

Hey, The error seemed to be gone but now that i am using the mongoose model directly in my auth.js file The same error seems to appear but this time only in my browser. Here is my auth.js file `import NextAuth from "next-auth"; import GitHub from "next-auth/providers/github"; import Google from "next-auth/providers/google"; import CredentialsProvider from "next-auth/providers/credentials"; import { SignInWithEmailAndPassword } from "@/actions/user.actions"; import User from "./utils/db/models/user.model"; import dbConnect from "./utils/db/dbConnect";

const providers = [ Google, GitHub, CredentialsProvider({ name: "Credentials", credentials: { email: { label: "Email", type: "email" }, password: { label: "Password", type: "password" }, }, async authorize(credentials) { try { const user = await SignInWithEmailAndPassword(credentials); // Your user verification logic if (!user) { throw new Error("user not found"); } console.log(user); return user.data; } catch (error) { return null; } }, }), ];

export const providerMap = providers.map((provider) => { if (typeof provider === "function") { const providerData = provider(); return { id: providerData.id, name: providerData.name }; } else { return { id: provider.id, name: provider.name }; } });

export const { handlers, auth, signIn, signOut } = NextAuth({ providers, pages: { signIn: "/auth/sign-in", }, callbacks: { async signIn({ user, account }) { if (account.provider === "google" || account.provider === "github") { try { const { name, email } = user; const con = await dbConnect(); const existingUser = await User.findOne({ email }); if (existingUser) { return; } const users = await User.create({ email, name, authType: "oauth", });

      return user;
    } catch (err) {
      console.log(err);
    }
  }
  return user;
},

}, }); `

Hi @Ali-Raza764 , this problem might also be solved using optional chaining ?. in user.model.js file. You should change all occurrences of mongoose.models.user to mongoose?.models.user.

[Ali-Raza764]

Hey,
The error seemed to be gone but now that i am using the mongoose model directly in my auth.js file The same error seems to appear but this time only in my browser.
Here is my auth.js file
`import NextAuth from "next-auth";
import GitHub from "next-auth/providers/github";
import Google from "next-auth/providers/google";
import CredentialsProvider from "next-auth/providers/credentials";
import { SignInWithEmailAndPassword } from "@/actions/user.actions";
import User from "./utils/db/models/user.model";
import dbConnect from "./utils/db/dbConnect";

const providers = [
Google,
GitHub,
CredentialsProvider({
name: "Credentials",
credentials: {
email: { label: "Email", type: "email" },
password: { label: "Password", type: "password" },
},
async authorize(credentials) {
try {
const user = await SignInWithEmailAndPassword(credentials); // Your user verification logic
if (!user) {
throw new Error("user not found");
}
console.log(user);
return user.data;
} catch (error) {
return null;
}
},
}),
];

export const providerMap = providers.map((provider) => {
if (typeof provider === "function") {
const providerData = provider();
return { id: providerData.id, name: providerData.name };
} else {
return { id: provider.id, name: provider.name };
}
});

export const { handlers, auth, signIn, signOut } = NextAuth({
providers,
pages: {
signIn: "/auth/sign-in",
},
callbacks: {
async signIn({ user, account }) {
if (account.provider === "google" || account.provider === "github") {
try {
const { name, email } = user;
const con = await dbConnect();
const existingUser = await User.findOne({ email });
if (existingUser) {
return;
}
const users = await User.create({
email,
name,
authType: "oauth",
});

      return user;
    } catch (err) {
      console.log(err);
    }
  }
  return user;
},

},
});
`

[Ali-Raza764]

Firstly, I want to thank you for your previous help; removing middleware.js completely resolved the issue we were facing.

I am seeking your advice on another aspect of our project. We currently store user credentials (email and password) in a MongoDB collection for login and signup functionality. We are now looking to integrate OAuth sign-in data alongside our existing user credential system.

To manage users authenticated via different methods (OAuth and traditional credentials), I am considering adding an authType field to distinguish between them. For instance, setting authType to "oauth" for users signing in through OAuth providers and "credentials" for those using traditional email and password.

Could you please provide your insights on the following:

Is adding an authType field a good strategy for differentiating between OAuth and credential-based authentication?
How should we structure the user data in MongoDB to effectively support both authentication methods?
Any best practices or additional insights you could offer on implementing this strategy efficiently would be greatly appreciated.

Thank you in advance for your assistance.

[neil-py]

I'm actually taking the same approach you have proposed, adding an authType field or, in my case, a provider field that indicates whether the user added to the database used OAuth or credentials.

When it comes to authentication, you can modify the signIn callback to check if the provider is OAuth. If so, you can process accordingly and return the intended user.

Here's what I did using Google as an additional provider:

async signIn({ user, account }) {
    if (account?.provider === "google") {
        try {
            const { name, email } = user;

            // Check if the email using credentials exists
            if (await checkGmailCredentials(email)) {
                // Redirect the user to the sign-in page with an error message
                return "/signin?error=Please enter your credentials";
            }

            // Authenticate Google account and return account details from the database
            const authUser = await authGoogleAccount(email, name);
            user = authUser;

        } catch (error) {
            console.error(error);
        }
    }
    return user;
}

• checkGmailCredentials(email): This function checks if an email matches a document in the Users collection and verifies if the provider used is credentials.
• authGoogleAccount(email, name): This function checks if the email exists in the database. If not, it records the new entry and returns the necessary information. If the email already exists, it returns the user information from the database.

For the MongoDB schema, what I did was I made the password field optional. I'm not sure if this approach will backfire in the future, but for testing, this is the approach I did.

Additionally, when it comes to best practices, I'm not entirely sure, but I'm still learning. Feedback and improvements are always welcome.

[neil-py]

Instead of directly importing the Model inside the SignIn callback, try and create a separate method/server action that handles the logic you are implementing inside the callback, then import and use that inside the SignIn callback

[neil-py]

if you have a middleware.ts file, try removing it. I'm currently experiencing the same problem when initializing the middleware file and exporting/wrapping with auth().

You can try and implement this approach #10912 (comment)

[Ali-Raza764]

Thanks for shairing your approach. If I find a better approach sure I will share it.

[Ali-Raza764]

Yeah just tried that it works perfectly fine

[Ali-Raza764]

But Why ?

[Ali-Raza764]

Take a look here at this piece of code
`import NextAuth from "next-auth";
import GitHub from "next-auth/providers/github";
import Google from "next-auth/providers/google";
import CredentialsProvider from "next-auth/providers/credentials";
import {
SignInWithEmailAndPassword,
SignUpWithEmailAndPassword,
} from "@/actions/user.actions";

const providers = [
Google,
// GitHub, //! Not using Github provider because It becoms difficult to manage the same email,name from different providers Maybe use only one Oauth Provider Feature will be developed in the future
CredentialsProvider({
name: "Credentials",
credentials: {
email: { label: "Email", type: "email" },
password: { label: "Password", type: "password" },
},
async authorize(credentials) {
try {
const user = await SignInWithEmailAndPassword(credentials); // Your user verification logic
if (!user) {
throw new Error("user not found");
}
return user.data;
} catch (error) {
return null;
}
},
}),
];

export const providerMap = providers.map((provider) => {
if (typeof provider === "function") {
const providerData = provider();
return { id: providerData.id, name: providerData.name };
} else {
return { id: provider.id, name: provider.name };
}
});

export const { handlers, auth, signIn, signOut } = NextAuth({
providers,
pages: {
signIn: "/auth/sign-in",
},
callbacks: {
async signIn({ user, account }) {
if (account.provider === "google" || account.provider === "github") {
const { name, email } = user;
console.log(user);
try {
const user = SignUpWithEmailAndPassword(
{
name,
email,
},
"oauth"
);

      return user;
    } catch (err) {
      console.log(err);
    }
  }
  return user;
},

},
});
export const SignUpWithEmailAndPassword = async (payload, authType) => {
// TODO Implement Two factor auth before storing the user In our database
try {
const email = payload.email;
const name = payload.name;
let userData;
if (authType == "oauth") {
userData = {
email,
name,
authType,
};
}
if (authType == "credentials") {
const password = payload.password;
userData = {
email,
name,
password,
authType,
};
}

const conn = await dbConnect();

const existingUser = await User.findOne({ email });
if (existingUser) {
  return JSON.parse(
    JSON.stringify({
      message: "User Already Exists",
      status: 400,
    })
  );
}

// Hash the password before storing it in the database
// const hashedPassword = await bcrypt.hash(password, 10);
// console.log("Data ", email, "   ", password, "   ", hashedPassword);

// If user is created successfully, return a success message
const users = await User.create(userData);

const data = JSON.stringify(users);
console.log("users ", users);
return JSON.parse(
  JSON.stringify({
    status: 200,
    success: true,
    data: data,
  })
);

} catch (error) {
console.error;
}
};
is there any other way to implement it. Should i create a separate function for the oauth sign /signup ??

How are you implementing it?
`

[Ali-Raza764]

For The time being I have only included on oauth provider. It seems a tackle to distinguish between two users with same email but different oauth providers.

[Ali-Raza764]

mongoose.models.user
Seems that it should solve the error..

[ChiragChrg]

Hey, The error seemed to be gone but now that i am using the mongoose model directly in my auth.js file The same error seems to appear but this time only in my browser. Here is my auth.js file `import NextAuth from "next-auth"; import GitHub from "next-auth/providers/github"; import Google from "next-auth/providers/google"; import CredentialsProvider from "next-auth/providers/credentials"; import { SignInWithEmailAndPassword } from "@/actions/user.actions"; import User from "./utils/db/models/user.model"; import dbConnect from "./utils/db/dbConnect";
const providers = [ Google, GitHub, CredentialsProvider({ name: "Credentials", credentials: { email: { label: "Email", type: "email" }, password: { label: "Password", type: "password" }, }, async authorize(credentials) { try { const user = await SignInWithEmailAndPassword(credentials); // Your user verification logic if (!user) { throw new Error("user not found"); } console.log(user); return user.data; } catch (error) { return null; } }, }), ];
export const providerMap = providers.map((provider) => { if (typeof provider === "function") { const providerData = provider(); return { id: providerData.id, name: providerData.name }; } else { return { id: provider.id, name: provider.name }; } });
export const { handlers, auth, signIn, signOut } = NextAuth({ providers, pages: { signIn: "/auth/sign-in", }, callbacks: { async signIn({ user, account }) { if (account.provider === "google" || account.provider === "github") { try { const { name, email } = user; const con = await dbConnect(); const existingUser = await User.findOne({ email }); if (existingUser) { return; } const users = await User.create({ email, name, authType: "oauth", });

      return user;
    } catch (err) {
      console.log(err);
    }
  }
  return user;
},

}, }); `

Hi @Ali-Raza764 , this problem might also be solved using optional chaining ?. in user.model.js file. You should change all occurrences of mongoose.models.user to mongoose?.models.user.

Optional chaining fixed the issue for me 🙌🏻
In my case : const UserModel = models?.User || model("User", UserSchema);

[Ali-Raza764]

Yeah The problem was solved both ways:

1. Optional Chaining -> ?
2. Shifting all the mongoose logic to as separate server action.
   Thanks to every one for their help @ChiragChrg @subhajit100 @neil-py @linyiru

[SwapnilKotkar]

Hey, The error seemed to be gone but now that i am using the mongoose model directly in my auth.js file The same error seems to appear but this time only in my browser. Here is my auth.js file `import NextAuth from "next-auth"; import GitHub from "next-auth/providers/github"; import Google from "next-auth/providers/google"; import CredentialsProvider from "next-auth/providers/credentials"; import { SignInWithEmailAndPassword } from "@/actions/user.actions"; import User from "./utils/db/models/user.model"; import dbConnect from "./utils/db/dbConnect";
const providers = [ Google, GitHub, CredentialsProvider({ name: "Credentials", credentials: { email: { label: "Email", type: "email" }, password: { label: "Password", type: "password" }, }, async authorize(credentials) { try { const user = await SignInWithEmailAndPassword(credentials); // Your user verification logic if (!user) { throw new Error("user not found"); } console.log(user); return user.data; } catch (error) { return null; } }, }), ];
export const providerMap = providers.map((provider) => { if (typeof provider === "function") { const providerData = provider(); return { id: providerData.id, name: providerData.name }; } else { return { id: provider.id, name: provider.name }; } });
export const { handlers, auth, signIn, signOut } = NextAuth({ providers, pages: { signIn: "/auth/sign-in", }, callbacks: { async signIn({ user, account }) { if (account.provider === "google" || account.provider === "github") { try { const { name, email } = user; const con = await dbConnect(); const existingUser = await User.findOne({ email }); if (existingUser) { return; } const users = await User.create({ email, name, authType: "oauth", });

      return user;
    } catch (err) {
      console.log(err);
    }
  }
  return user;
},

}, }); `

Hi @Ali-Raza764 , this problem might also be solved using optional chaining ?. in user.model.js file. You should change all occurrences of mongoose.models.user to mongoose?.models.user.

Thanks man, Optional chaining solved my issue. May god provide you lot of money. thankssssssssssss man. I took me 8 days to add just single ? question mark. Lots of love to you ❤️❤️❤️❤️