Next-auth: How to Create Custom Login Page with Using Credentials Sign-in

[iedmrc]

Your question
Creating a custom sign-in page with credentials provider is not clear on documentation. I've tried several different methods and couldn't figure out it and don't know what is the best practice.

P.S. it works well with the pre-made (sign-in) pages.

What are you trying to do
I'm trying to do create a custom sign-in page with the credentials provider. Here is my options object:

const options = {
  site: process.env.SITE || 'http://localhost:3000',

  // Configure one or more authentication providers
  providers: [
    Providers.Credentials({
        // The name to display on the sign in form (e.g. 'Sign in with...')
        id: 'password-login',
        name: 'Credentials',
        // The credentials is used to generate a suitable form on the sign in page.
        // You can specify whatever fields you are expecting to be submitted.
        // e.g. domain, username, password, 2FA token, etc.
        credentials: {
        //   username: { label: "Username", type: "text", placeholder: "jsmith" },
          password: {  label: "Password", type: "password" }
        },
        authorize: async (credentials) => {
          const user = async (credentials) => {
            const response = await fetch(loginApiUrl, {
                method: 'POST',
                headers: {
                  'Content-Type': 'application/json'
                },
                body: JSON.stringify(credentials)
              });
              let result = await response.json();
              if (result.id){
                  return result
              }
            return null
          }
          if (user) {
            // Any user object returned here will be saved in the JSON Web Token
            return Promise.resolve(user(credentials))
          } else {
            return Promise.resolve(null)
          }
        }
      })
  ],
  session: {
    jwt: true, 
  },
  pages: {
    signin: '/login',
    signout: '/',
    error: '/login'
  }
}

What I've tried so far:

• Created a form that sends POST requests to /api/auth/signin/:provider (provider=password-login). It just returns 302 with callback url
• Created a page almost similar to the e-mail provider example here . I just replaced signin('email', { email: document.getElementById('email').value } with password-login. Still returns 302 with callback url
• Created a form that sends POST requests to /api/auth/callback/:provider (provider=password-login). It works but this POST endpoint is not specified on the documentation. So I assume this is not the right way. Also calling a callback URL to sign-in seems not good.

What should I do to create my own login page with using credentials as the provider?

P.S: Both SSR and not SSR are fit. And I tried both of them to deliver such a login page.

Documentation feedback

• [ ] Found the documentation helpful
• [x] Found documentation but was incomplete
• [x] Could not find relevant documentation
• [ ] Found the example project helpful
• [ ] Did not find the example project helpful

[iedmrc]

Should I move to v3.0 beta to make use of credentials provider more efficient, as written here ?

[iaincollins]

I agree the documentation for doing this in v2 is sparse and there are a couple of relevant bugs in v2, one with CSRF tokens and one with the sign in client function for the credentials provider.

Yeah, I think the v3 beta should help, the new documentation for v3 has an example.

I don't anticipate you'll have to make any changes between v3 beta and v3 release.

[iedmrc]

Great! Is there any release date for the v3 release?

[iaincollins]

@iedmrc No firm date but likely in the next week or so.

[ndom91]

Closing this issue as v3 has now been released and an example for a custom Credential login page exists here: https://next-auth.js.org/configuration/pages#credentials-sign-in

[DeBraid]

@iedmrc do you mind sharing your outcome here? Similarly trying to make Credentials work and having trouble, thanks!

[ndom91]

@DeBraid do you want to make a custom styled sign-in page with existing credential providers (github, google, etc.) or do you want to create a custom credential providers?

[DeBraid]

@ndom91 I'm looking for any / all examples to gain a better understanding.

I have an existing auth service (custom provider) that requires integration. At this point the biggest blocker is my own limited understanding of next-auth, so digging into the docs more now.

[ndom91]

@ndom91 I'm looking for any / all examples to gain a better understanding.

I have an existing auth service (custom provider) that requires integration. At this point the biggest blocker is my own limited understanding of next-auth, so digging into the docs more now.

Maybe this example of a custom LDAP auth provider will be of use then.

https://next-auth.js.org/tutorials/ldap-auth-example

[peculiarity]

Even though there is an example I find the documentation very confusing. The information is scattered all around different sections. I still can't make this working

[ndom91]

Yeah next-auth isn't really designed for LDAP specifically so its not really a first class citizen, so to speak. It should definitely be possible to get working, however.

@peculiarity if you're stuck, feel free to open a new issue regarding LDAP auth, as this issue is closed and was on a different topic anyway.