How to brand a custom Signin Page

[rnarayan]

Your question
I want to design a custom Signin page to add the site brand. The custom CSS and text that I add are not getting displayed.

What are you trying to do
In Pages/auth/signin.js, I added a div <div>Custom Signin Page</div>. But this is not displayed in the signin page.

Here is the repository.
https://github.com/rnarayan/NextJS-TailwindCSS-Mongoose-Next-Auth-Template/tree/NextAuth-CustomSigninPage

import React from 'react'
import { providers, signIn } from 'next-auth/client'

export default function SignIn({ providers }) {
    console.log('Custom Signin page was called.')
    return (
        <>
            <div>Custom Signin Page</div>
            {Object.values(providers).map(provider => (
                <div key={provider.name}>
                    <button onClick={() => signIn(provider.id)}>Sign in with {provider.name}</button>
                </div>
            ))}
        </>
    )
}

SignIn.getInitialProps = async (context) => {
    return {
        providers: await providers(context)
    }
}

Feedback
Documentation refers to searching through online documentation, code comments and issue history. The example project refers to next-auth-example.

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

[SharadKumar]

Hi @rnarayan
Adding pages.signin config in [...next-auth].js and having a custom page is all you need to get this going. Check your app... cause I have it working fine - no issues. Doesn't look like a next-auth issue.

[rnarayan]

@SharadKumar Thanks for the reply.

I do have the pages.signin config in [...next-auth].js. Please look at the NextAuth-CustomSigninPage branch in Github. Here is the link.

https://github.com/rnarayan/NextJS-TailwindCSS-Mongoose-Next-Auth-Template/blob/NextAuth-CustomSigninPage/pages/api/auth/%5B...nextauth%5D.js

pages: {
    signin: '/auth/signin',  // Displays signin buttons 
  },

My issue is that I am unable to display any custom CSS and text in the Signin page. I added a <div>Custom Signin Page</div> in pages/auth/signin.js. I expected to see Custom Signin Page as the title of Sign in page but it's not there.

Here is the code in pages/auth/signin.js, truncated for brevity.

...
export default function SignIn({ providers }) {
    console.log('Custom Signin page was called.')
    return (
        <>
            <div>Custom Signin Page</div>
            {Object.values(providers).map(provider => (
                <div key={provider.name}>
                    <button onClick={() => signIn(provider.id)}>Sign in with {provider.name}</button>
                </div>
            ))}
        </>
    )
}
...

[nyedidikeke]

• Could not find relevant documentation

@rnarayan Custom sign-in page documentation is available at https://next-auth.js.org/configuration/pages.

[iaincollins]

@rnarayan Hi there!

I think you want signIn rather than signin (i.e. is case sensitive) as the option in pages.

We updated all options 3.0 so that all options were camel case, for consistency.

There is probably scope for improving error handling by catching unrecognised options and logging to the console.

[rnarayan]

After extensive debugging on next-auth, I resolved it. The case (signIn or signin) was not the issue. It seems NextAuth doesn't read the pages option so I commented it out.

pages/api/auth/[...nextauth].js

// pages: { signin: '/auth/signin'},

I replaced the following code

import { signIn, signout, useSession } from "next-auth/client"
...
...
 <a href={`/auth/signin`} onClick={e => { e.preventDefault(); signin() }} className="sign"> Sign in </a>)} 

with this:

<a href={/auth/signin} className="sign" > Sign in </a>

Removing the onClick() function enabled the app to go to the custom login page - localhost:3000/auth/signin.

The code in pages/auth/signin.js is the same as the tutorial but now I can add my own texts and CSS.

pages/auth/signin.js

import React from 'react'
import { providers, signIn } from 'next-auth/client'

export default function SignIn({ providers }) {
    console.log('Custom Signin page was called.')
    return (
        <>
            <div id='Custom'>Custom Signin Page</div>
            {Object.values(providers).map(provider => (
                <div key={provider.name}>
                    <button onClick={() => signIn(provider.id)}>Sign in with {provider.name}</button>
                </div>
            ))}
        </>
    )
}

SignIn.getInitialProps = async (context) => {
    return {
        providers: await providers(context)
    }
}

[Aid19801]

If it's of interest to anyone - i wanted to brand the default page and found it quite difficult too.
But for me the key thing was handing signIn(platformName) - with no platform defined, no parameter, the function bounces you to the default screen. If you hand it options on your own pages/auth/signin.tsx screen you can give it, say, 4 buttons (FB, Twitter, Google, Twitch or whatever) and for each one signIn('facebook') and it'll take you straight to the api.