#Next-Auth: Credentials Sign In not working

42 messages · Page 1 of 1 (latest)

urban canopy
#

I have been wanting to implement a credentials sign in, together with a github sign in and the connection with prismadb. But only the credential sign in doesn't work, if I connect next-auth with the prisma provider. Else it would work weirdly. Although when connected with prisma adapter, and logging in with credentials, there are no errors or warnings printed (it just won't sign in).
[...nextauth].ts:```ts
import { PrismaAdapter } from '@next-auth/prisma-adapter';
import NextAuth, { AuthOptions } from 'next-auth';
import CredentialsProvider from 'next-auth/providers/credentials';
import GithubProvider from 'next-auth/providers/github';
import prisma from './../../../lib/utils/prismadb';

export const authOptions: AuthOptions = {
// Configure one or more authentication providers
adapter: PrismaAdapter(prisma),
providers: [
...
// DEACTIVATE CREDENTIALS FOR NOW
CredentialsProvider({
name: 'Credentials',
credentials: {
username: { label: 'Username', type: 'text', placeholder: 'username' },
password: {
label: 'Password',
type: 'password',
placeholder: 'password',
},
},
async authorize(credentials) {
// Add logic here to look up the user from the credentials supplied
const user = {
id: '0',
name: credentials?.username,
password: credentials?.password,
};

    console.log(credentials);

    if (user) {
      // Any object returned will be saved in `user` property of the JWT
      return user;
    } else {
      // If you return null then an error will be displayed advising the user to check their details.
      return null;
    }
  },
}),

],
...
};
export default NextAuth(authOptions);

The signIn.tsx (sign in page) (ignore the styling, etc.) can be found here: https://paste.ofcode.org/vR2uJZ2AJ4X3vwddXvm62T
potent field
#

It's difficult to say why the sign-in functionality with credentials provider is not working without more information, such as any error messages or warnings that are being logged.

One suggestion would be to add some logging statements in the authorize function of the CredentialsProvider to see what values are being passed to it and what the return value is. This can help you determine if there is an issue with thecredentials object or the user object.

Additionally, you can try debugging the prisma-adapter code to see what is happening when the adapter is being used with the credentials provider. This may give you more insight into the issue and help you resolve it.

TIP Make sure that the database has been migrated with Prisma and the connection is running. It's important to check that the database and Prisma are properly set up before attempting to sign in. If there are any issues with the database connection, the sign in process may not work as expected.

potent field
urban canopy
#

And Prisma works well, cause when logging in with my GitHub Provider then it just works well and creates database entries (I just didn't show that GitHub Provider Configuration due to limited message length)

potent field
#

If you can upload your project to Github, I'd be happy to take a closer look.

urban canopy
#

And I think those two files are the only ones you really need. I haven't changed anything in them

#
  1. No Error Messages 2. Logged credentials and user object have the right values (3.) It really seems to be an issue with the db
potent field
#

I think the error is that you are using the useCallback method. Try it this way:

  const onSubmit = (e) => {
    e.preventDefault();

    signIn('credentials', { username, password, callbackUrl: '/' });
  }

But don't forget that you still need to do a fetch in the authorize method to verify the data on the server side as well.
For this you can usually create a check-credentials.js file in your API directory.

urban canopy
urban canopy
#

Like with server side, etc.

#

I just have this for GitHub and it works perfectly: ts GithubProvider({ clientId: process.env.GITHUB_ID || '', clientSecret: process.env.GITHUB_SECRET || '', }),

potent field
#

What exactly happens when you enter the data and confirm the registration?

urban canopy
potent field
#

Do you can show your prisma schema?

potent field
#

Do you can change this

const user = {
          id: '0',
          name: credentials?.username,
          password: credentials?.password,
        };

to

const user = {
          id: '1',
          name: credentials?.username,
          password: credentials?.password,
        };

And let me know what happens then

#

If the same thing happens, try this:

const user = {
          id: '1',
          name: "myname",
          password: "anypassword",
        };
urban canopy
#

That might be it though

#

I am currently eating my meal xd

potent field
#

The problem could be that no valid user is returned. The user interface contains the name, password, ID, email and possibly other properties. This could possibly cause the problem

potent field
#

I also think that is the trigger. If you solved the problem this way, you would only need to include an API route / create a check-credentials file in /pages/api/user/ that reads the user from the database and returns it. You can then use fetch in the authorize method. Just make sure that you specify a full URL with protocol, host and path in the fetch method.

urban canopy
#

Well, so, I will try it out now

#

But first I wanna implement turbo as I saw it in one of your github projects

#

Nevermind turbo now works.

#

I will now have a look at your code suggestion.

potent field
#

do you can show your scripts in package.json ?

potent field
urban canopy
#

I was dumb and didn't thought about that turbo dev would just execute the dev script xd

#

I thought it would like automatically run the next build script but it would run the script specified in package.json

urban canopy
#

I tried it with a bunch of ids

#

The user object is right but it won't login.

urban canopy
pale ridge
#

Were you able to fix it?