import { Callout } from "nextra/components"
import { Code } from "@/components/Code"

# Custom Pages

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.

<Code>
<Code.Next>

```ts filename="./auth.ts" {8-10}
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.Qwik>
  
```ts filename="/src/routes/plugin@auth.ts"
import { QwikAuth$ } from "@auth/qwik"
import GitHub from "@auth/qwik/providers/github"

export const { onRequest, useSession, useSignIn, useSignOut } = QwikAuth$(
  () => ({
    providers: [GitHub],
    pages: {
      signIn: "/login",
    },
  })
)
```

</Code.Qwik>
<Code.Svelte>

```ts filename="src/auth.ts" {14-16}
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",
  },
})
```

```ts filename="src/hooks.server.ts"
export { handle } from "./auth"
```

</Code.Svelte>
<Code.Express>

```ts filename="src/routes/auth.route.ts" {12-14}
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>

To continue setting up the custom page, checkout our [guide on custom pages](/guides/pages/signin).
