Theo's Typesafe Cult•2y ago

What is the convention for customizing sign-in pages in NextAuth

Is there any example of custom pages for NextAuth authentication, something that I can follow the similar setup from as with my generated T3 app? Bear in my mind I did read the NextAuth documentation - but I am still having trouble with figuring out why the setup as they described won't work, and I think it must have something to do with how the server and client structure is setup. I followed this example: https://next-auth.js.org/configuration/pages

Pages | NextAuth.js

NextAuth.js automatically creates simple, unbranded authentication pages for handling Sign in, Sign out, Email Verification and displaying error messages.

8 Replies

niels•2y ago

I built a login.tsx myself and implement the signIn function from Auth

await signIn('credentials', {
    redirect: false,
    callbackUrl: '/products',
    username: username,
    password: password,
});

await signIn('credentials', {
    redirect: false,
    callbackUrl: '/products',
    username: username,
    password: password,
});

ygor perez•2y ago

src/pages/auth/signin.tsx

import { faSpotify } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { type Provider } from 'next-auth/providers'
import { getProviders, signIn } from 'next-auth/react'

interface SignInProps {
  providers: Provider[]
}

const SignIn = ({ providers }: SignInProps) => {
  return (
    <>
      <main className='flex min-h-screen w-full flex-col items-center justify-center bg-black'>
        {Object.values(providers).map(provider => (
          <div key={provider.name}>
            <button
              className='rounded-full bg-white p-4 text-xl transition-all delay-75 hover:scale-105 hover:bg-gray-200'
              onClick={() => void signIn(provider.id, { callbackUrl: '/' })}
            >
              {provider.name === 'Spotify' && (
                <FontAwesomeIcon
                  icon={faSpotify}
                  className='mr-4 rounded-full align-middle text-green-600'
                  size='2x'
                />
              )}
              Sign in with {provider.name}
            </button>
          </div>
        ))}
      </main>
    </>
  )
}

export const getServerSideProps = async () => {
  const providers = await getProviders()
  if (!providers) {
    throw Error('no providers found')
  }
  return {
    props: { providers },
  }
}

export default SignIn

import { faSpotify } from '@fortawesome/free-brands-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { type Provider } from 'next-auth/providers'
import { getProviders, signIn } from 'next-auth/react'

interface SignInProps {
  providers: Provider[]
}

const SignIn = ({ providers }: SignInProps) => {
  return (
    <>
      <main className='flex min-h-screen w-full flex-col items-center justify-center bg-black'>
        {Object.values(providers).map(provider => (
          <div key={provider.name}>
            <button
              className='rounded-full bg-white p-4 text-xl transition-all delay-75 hover:scale-105 hover:bg-gray-200'
              onClick={() => void signIn(provider.id, { callbackUrl: '/' })}
            >
              {provider.name === 'Spotify' && (
                <FontAwesomeIcon
                  icon={faSpotify}
                  className='mr-4 rounded-full align-middle text-green-600'
                  size='2x'
                />
              )}
              Sign in with {provider.name}
            </button>
          </div>
        ))}
      </main>
    </>
  )
}

export const getServerSideProps = async () => {
  const providers = await getProviders()
  if (!providers) {
    throw Error('no providers found')
  }
  return {
    props: { providers },
  }
}

export default SignIn

src/server/auth.ts

export const authOptions: NextAuthOptions = {
  session: {
    ...
  },
  callbacks: {
    ...
    },
  },
  adapter: PrismaAdapter(prisma),
  providers: [
    ...
    ],
  pages: {
    // this is what matters
    signIn: '/auth/signin',
  },
}

export const authOptions: NextAuthOptions = {
  session: {
    ...
  },
  callbacks: {
    ...
    },
  },
  adapter: PrismaAdapter(prisma),
  providers: [
    ...
    ],
  pages: {
    // this is what matters
    signIn: '/auth/signin',
  },
}

I heard that this path to the sign in page is a convention

MadsOP•2y ago

Ahh thank you so much for your answer Ygor, I will try it out again 😄 I had originally followed the documentation - but has some problems with the rendering of the signin page even though it is defined in pages

ygor perez•2y ago

No problem Mads 😁 , I had some issues when I first tried to implement it myself too, the documentation isn't the clearest.

MadsOP•2y ago

But I think the problem was in me defining it in the api folder instead of in the pages folder As I can see you didn't do that:)

ygor perez•2y ago

if you have any problems with the sign in reach out to me again!

MadsOP•2y ago

Thanks mate:)

ygor perez•2y ago

Happy to help!

Gaming

Programming

What is the convention for customizing sign-in pages in NextAuth

Did you find this page helpful?