Auth.js | Installation

Installing Auth.js

Start by installing the appropriate package for your framework.

npm install next-auth@beta

pnpm add next-auth@beta

yarn add next-auth@beta

bun add next-auth@beta

You can use the Qwik starter script:

npm run qwik add auth

pnpm run qwik add auth

yarn qwik add auth

bun run qwik add auth

npm install @auth/sveltekit

pnpm add @auth/sveltekit

yarn add @auth/sveltekit

bun add @auth/sveltekit

npm install @auth/express

pnpm add @auth/express

yarn add @auth/express

bun add @auth/express

Installing @auth/core is not necessary, as a user you should never have to interact with @auth/core.

Setup Environment

The only environment variable that is mandatory is the AUTH_SECRET. This is a random value used by the library to encrypt tokens and email verification hashes. (See Deployment to learn more). You can generate one via running:

npx auth secret

Alternatively, you can use the following openssl command, which should be available on all Linux / Mac OS X systems.

openssl rand -base64 33

Then add it to your .env.local file:

.env.local

AUTH_SECRET=secret

Configure

Next, create the Auth.js config file and object. This is where you can control the behaviour of the library and specify custom authentication logic, adapters, etc. We recommend all frameworks to create an auth.ts file in the project. In this file we’ll pass in all the options to the framework specific initalization function and then export the route handler(s), signin and signout methods, and more.

You can name this file whatever you want and place it wherever you like, these are just conventions we’ve come up with.

Start by creating a new auth.ts file at the root of your app with the following content.

./auth.ts

import NextAuth from "next-auth"
 
export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [],
})

Add a Route Handler under /app/api/auth/[...nextauth]/route.ts.

💡

This file must be an App Router Route Handler, however, the rest of your app can stay under page/ if you’d like.

./app/api/auth/[...nextauth]/route.ts

import { handlers } from "@/auth" // Referring to the auth.ts we just created
export const { GET, POST } = handlers

Add optional Middleware to keep the session alive, this will update the session expiry every time its called.

./middleware.ts

export { auth as middleware } from "@/auth"

You can add Auth.js easily by using the following Qwik starter script:

npm run qwik add auth

pnpm run qwik add auth

yarn qwik add auth

bun run qwik add auth

This command will add a new package:

@auth/qwik

and create a new file named plugin@auth.ts with an example configuration.

/src/routes/plugin@auth.ts

import { QwikAuth$ } from "@auth/qwik"
 
export const { onRequest, useSession, useSignIn, useSignOut } = QwikAuth$(
  () => ({
    providers: [...],
  })
)

Start by creating a new auth.ts file in your src/ directory with the following content.

./src/auth.ts

import { SvelteKitAuth } from "@auth/sveltekit"
 
export const { handle } = SvelteKitAuth({
  providers: [],
})

Re-export the handle method in SvelteKit’s src/hooks.server.ts file.

./src/hooks.server.ts

export { handle } from "./auth"

That handle function adds an auth() method onto our event.locals, which is available in any +layout.server.ts or +page.server.ts file. Therefore, we can access the session in our load function like this.

./src/routes/+layout.server.ts

import type { LayoutServerLoad } from "./$types"
 
export const load: LayoutServerLoad = async (event) => {
  const session = await event.locals.auth()
 
  return {
    session,
  }
}

Start by importing ExpressAuth and adding the handler to the auth route.

./src/routes/auth.route.ts

import { ExpressAuth } from "@auth/express"
import express from "express"
 
const app = express()
 
// If your app is served through a proxy
// trust the proxy to allow us to read the `X-Forwarded-*` headers
app.set("trust proxy", true)
app.use("/auth/*", ExpressAuth({ providers: [] }))

Note this creates the Auth.js API, but does not yet protect resources. Continue on to protecting resources for more details.

Setup Authentication Methods

With that, the basic setup is complete! Next we’ll setup the first authentication methods and fill out that providers array.

Migrate to NextAuth.js v5 Authentication

Installing Auth.js

Setup Environment

Configure

Setup Authentication Methods

About Auth.js

Download

Acknowledgements