Auth.js

• Next.js is main framework, but starting to support svelte & express (started as next-auth becoming @auth/*)

• Supports 4 auth methods:

  • OAuth - google, github, linkedin, etc

  • Magic Links - supports resend, sendgrid, etc

  • Credentials - username&password + external APIs

  • WebAuthn - Passkeys

• Supports database adapters to store user data, including prisma, neon, sup abase, etc

• Comes with default set of pages

Setup

npm install next-auth@beta

Need to set the AUTH_SECRET env variable

npx auth secret #generate a good secret	

auth.ts

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

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

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

./middleware.ts

export { auth as middleware } from "@/auth" 
//Add optional Middleware to keep the session alive, this will update the session expiry every time its called.

Credentials

import NextAuth from "next-auth"
import Credentials from "next-auth/providers/credentials"
// Your own logic for dealing with plaintext password strings; be careful!
import { saltAndHashPassword } from "@/utils/password"
 
export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [
    Credentials({
      // You can specify which fields should be submitted, by adding keys to the `credentials` object.
      // e.g. domain, username, password, 2FA token, etc.
      credentials: {
        email: {},
        password: {},
      },
      authorize: async (credentials) => {
        let user = null
 
        // logic to salt and hash password
        const pwHash = saltAndHashPassword(credentials.password)
 
        // logic to verify if the user exists
        user = await getUserFromDb(credentials.email, pwHash)
 
        if (!user) {
          // No user found, so this is their first attempt to login
          // Optionally, this is also the place you could do a user registration
          throw new Error("Invalid credentials.")
        }
 
        // return user object with their profile data
        return user
      },
    }),
  ],
  // Remove pages and defaults to [basePath]/signin
  pages: {
    signIn: "/signin",
  },
  // Obv remove in prod
  debug: true,
})

Usage

import { signIn, signOut } from "next-auth/react"
 
signIn() // Redirected to configured sign in page, default /[basePath]/signin
signIn("credentials", formData); // Attempts sign in with that provider 
signOut();

To use session in app router

app/admin/dashboard.tsx

"use client"
import { useSession } from "next-auth/react"
 
export default function Dashboard() {
  const { data: session } = useSession()
 
  if (session?.user?.role === "admin") {
    return <p>You are an admin, welcome!</p>
  }
 
  return <p>You are not authorized to view this page!</p>
}

app/admin/page.tsx

import { SessionProvider } from "next-auth/react"
import { Dashboard } from "./Dashboard"
 
export default function Administrator() {
  return (
    <SessionProvider>
      <Dashboard />
    </SessionProvider>
  )
}