import { Callout } from "nextra/components" import { Code } from "@/components/Code"
To enable custom pages add the following to your Auth.js configuration. In the pages
object, the key is the type of page and the value is the path/route at which the page is located. Please make sure you actually have a page at the specified route.
import { NextAuth } from "next-auth"
import GitHub from "next-auth/providers/github"
// Define your configuration in a separate variable and pass it to NextAuth()
// This way we can also 'export const config' for use later
export const config = {
providers: [GitHub],
pages: {
signIn: "/login",
},
}
export const { signIn, signOut, handle } = NextAuth(config)
</Code.Next>
<Code.Svelte>
import SvelteKitAuth from "@auth/sveltekit"
import GitHub from "@auth/sveltekit/providers/github"
import type { Provider } from "@auth/sveltekit/providers"
const providers: Provider[] = [GitHub]
// Export this map of provider details to use in the sign-in page later
export const providerMap = providers.map((provider) => {
return { id: provider.id, name: provider.name }
})
export const { handle, signIn, signOut } = SvelteKitAuth({
providers,
pages: {
signIn: "/signin",
},
})
export { handle } from "./auth"
</Code.Svelte>
<Code.Express>
import express from "express"
import { ExpressAuth } from "@auth/express"
import GitHub from "@auth/express/providers/github"
const app = express()
app.set("trust proxy", true)
app.use(
"/auth/*",
ExpressAuth({
providers: [GitHub],
pages: {
signIn: "/signin",
},
})
)
</Code.Express>
<Code.Fastify>
import { FastifyAuth } from "@auth/fastify"
import Fastify from "fastify"
import GitHub from "@auth/fastify/providers/github"
const fastify = Fastify({ trustProxy: true })
fastify.register(
FastifyAuth({
providers: [GitHub],
pages: {
signIn: "/signin",
},
}),
{ prefix: "/auth" }
)
</Code.Fastify>
To continue setting up the custom page, checkout our guide on custom pages.