Custom Sign-in Page
To add a custom sign-in page, you’ll need to define the path to your page in the pages object in your Auth.js configuration. Make sure a route / page actually exists at the path you’re defining here!
In additionally, we’ll have to export a map of provider.id and provider.name to easily consume in our custom page if we want to dynamically render the correct buttons, based on what we’ve defined in our auth.ts configuration. Because you can pass your providers to the providers array as both a function, or the result of calling that function, this example providerMap handles both cases.
./auth.ts
import NextAuth from "next-auth"
import GitHub from "next-auth/providers/github"
import Credentials from "next-auth/providers/credentials"
import type { Provider } from "next-auth/providers"
const providers: Provider[] = [
Github,
Credentials({
credentials: { password: { label: "Password", type: "password" } },
authorize(c) {
if (c.password !== "password") return null
return {
id: "test",
name: "Test User",
email: "test@example.com",
}
},
}),
]
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: "/signin",
},
})We can now build our own custom sign in page.
app/signin/page.tsx
import { signIn, auth, providerMap } from "@/auth.ts"
export default async function SignInPage() {
return (
<div className="flex flex-col gap-2">
{Object.values(providerMap).map((provider) => (
<form
action={async () => {
"use server"
await signIn(provider.id)
}}
>
<button type="submit">
<span>Sign in with {provider.name}</span>
</button>
</form>
))}
</div>
)
}Then when calling signIn without any arguments anywhere in your application, the custom signin page will appear.
