Next.js – Authentication

Next.js

Authentication

Implementing authentication using NextAuth.js (Auth.js) in the App Router.

Installation: Install NextAuth.js packages.

📄terminal
BASH

npm install next-auth@beta
# Generate an Auth Secret
npx auth secret

Auth Config: NextAuth configuration with a generic provider (e.g., Credentials or GitHub).

📄auth.ts
TS

import NextAuth from "next-auth"
import GitHub from "next-auth/providers/github"

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [GitHub],
  pages: {
    signIn: '/login', // Optional: custom login page
  },
  callbacks: {
    authorized({ auth, request: { nextUrl } }) {
      const isLoggedIn = !!auth?.user;
      const isOnDashboard = nextUrl.pathname.startsWith('/dashboard');
      if (isOnDashboard) {
        if (isLoggedIn) return true;
        return false; // Redirect unauthenticated users to login page
      } else if (isLoggedIn) {
        return Response.redirect(new URL('/dashboard', nextUrl));
      }
      return true;
    },
  },
})

Route Handler: Setting up the API route for NextAuth.

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

import { handlers } from "@/auth"

export const { GET, POST } = handlers

Protecting Server Components: Checking session in a server component.

📄app/dashboard/page.tsx
TSX

import { auth, signOut } from "@/auth"
import { redirect } from "next/navigation"

export default async function DashboardPage() {
  const session = await auth()

  if (!session?.user) {
    redirect("/api/auth/signin")
  }

  return (
    <div>
      <h1>Welcome, {session.user.name}</h1>
      <p>Email: {session.user.email}</p>
      
      <form action={async () => {
        "use server"
        await signOut()
      }}>
        <button type="submit">Sign Out</button>
      </form>
    </div>
  )
}