Client-Only Auth - Tokens in the Browser

# .env.production
NEXT_PUBLIC_API_URL=https://api.example.com
NEXT_PUBLIC_OAUTH_CLIENT_ID=notes-web
NEXT_PUBLIC_OAUTH_ISSUER=https://id.example.com

Set-Cookie: rt=…opaque…; HttpOnly; Secure; SameSite=Strict; Path=/auth; Max-Age=1209600

// lib/auth/token-store.ts
'use client'

let accessToken: string | null = null
const listeners = new Set<() => void>()

export const tokenStore = {
  get: () => accessToken,
  set(token: string | null) {
    accessToken = token
    listeners.forEach((l) => l())
  },
  subscribe(listener: () => void) {
    listeners.add(listener)
    return () => listeners.delete(listener)
  },
}

// lib/auth/api.ts
'use client'

import { tokenStore } from './token-store'

const API = process.env.NEXT_PUBLIC_API_URL!

export class ApiError extends Error {
  constructor(public status: number, message: string) {
    super(message)
  }
}

type TokenResponse = { accessToken: string; expiresIn: number }

let refreshInFlight: Promise<string | null> | null = null

async function doRefresh(): Promise<string | null> {
  const res = await fetch(`${API}/auth/refresh`, {
    method: 'POST',
    credentials: 'include', // sends the httpOnly rt cookie to api.example.com
    headers: { 'X-Requested-With': 'fetch' },
  })
  if (!res.ok) {
    tokenStore.set(null)
    return null
  }
  const body = (await res.json()) as TokenResponse
  tokenStore.set(body.accessToken)
  return body.accessToken
}

// One refresh at a time per tab, and one at a time across tabs.
export function refreshAccessToken(): Promise<string | null> {
  refreshInFlight ??= (
    typeof navigator !== 'undefined' && 'locks' in navigator
      ? navigator.locks.request('auth-refresh', doRefresh)
      : doRefresh()
  ).finally(() => {
    refreshInFlight = null
  })
  return refreshInFlight
}

export async function apiFetch<T>(path: string, init: RequestInit = {}): Promise<T> {
  const send = (token: string | null) =>
    fetch(`${API}${path}`, {
      ...init,
      headers: {
        'Content-Type': 'application/json',
        ...init.headers,
        ...(token ? { Authorization: `Bearer ${token}` } : {}),
      },
    })

  let res = await send(tokenStore.get())
  if (res.status === 401) {
    const fresh = await refreshAccessToken()
    if (!fresh) throw new ApiError(401, 'Session expired')
    res = await send(fresh) // retry exactly once
  }
  if (!res.ok) throw new ApiError(res.status, await res.text())
  return res.status === 204 ? (undefined as T) : ((await res.json()) as T)
}

// lib/auth/auth-provider.tsx
'use client'

import { createContext, use, useCallback, useEffect, useMemo, useState, type ReactNode } from 'react'
import { useQueryClient } from '@tanstack/react-query'
import { apiFetch, refreshAccessToken } from './api'
import { tokenStore } from './token-store'
import { authChannel } from './auth-channel'

export type User = { id: string; name: string; role: 'user' | 'admin' }
type Status = 'loading' | 'authenticated' | 'unauthenticated'
type AuthContextValue = {
  status: Status
  user: User | null
  login: (email: string, password: string) => Promise<void>
  logout: () => Promise<void>
}

const AuthContext = createContext<AuthContextValue | null>(null)
const API = process.env.NEXT_PUBLIC_API_URL!

export function AuthProvider({ children }: { children: ReactNode }) {
  const queryClient = useQueryClient()
  const [status, setStatus] = useState<Status>('loading')
  const [user, setUser] = useState<User | null>(null)

  const loadUser = useCallback(async () => {
    const me = await apiFetch<User>('/me')
    setUser(me)
    setStatus('authenticated')
  }, [])

  const clearLocal = useCallback(() => {
    tokenStore.set(null)
    setUser(null)
    setStatus('unauthenticated')
    queryClient.clear() // drop every cached response that belonged to this user
  }, [queryClient])

  // Bootstrap: a reload lost the in-memory token, so try the refresh cookie once.
  useEffect(() => {
    let cancelled = false
    refreshAccessToken().then(async (token) => {
      if (cancelled) return
      if (!token) return setStatus('unauthenticated')
      try {
        await loadUser()
      } catch {
        if (!cancelled) clearLocal()
      }
    })
    return () => {
      cancelled = true
    }
  }, [loadUser, clearLocal])

  // Other tabs tell us when they log in or out.
  useEffect(
    () =>
      authChannel.subscribe((event) => {
        if (event === 'logout') clearLocal()
        if (event === 'login') refreshAccessToken().then((t) => (t ? loadUser() : clearLocal()))
      }),
    [clearLocal, loadUser],
  )

  const login = useCallback(
    async (email: string, password: string) => {
      const res = await fetch(`${API}/auth/login`, {
        method: 'POST',
        credentials: 'include', // the API sets the rt cookie in this response
        headers: { 'Content-Type': 'application/json', 'X-Requested-With': 'fetch' },
        body: JSON.stringify({ email, password }),
      })
      if (!res.ok) throw new Error(res.status === 401 ? 'Email or password is incorrect.' : 'Sign-in failed.')
      const { accessToken } = (await res.json()) as { accessToken: string }
      tokenStore.set(accessToken)
      await loadUser()
      authChannel.post('login')
    },
    [loadUser],
  )

  const logout = useCallback(async () => {
    // Revoke on the server first, so the refresh cookie is useless even if it leaked
    await fetch(`${API}/auth/logout`, {
      method: 'POST',
      credentials: 'include',
      headers: { 'X-Requested-With': 'fetch' },
    }).catch(() => {})
    clearLocal()
    authChannel.post('logout')
  }, [clearLocal])

  const value = useMemo(() => ({ status, user, login, logout }), [status, user, login, logout])
  return <AuthContext value={value}>{children}</AuthContext>
}

export function useAuth() {
  const ctx = use(AuthContext)
  if (!ctx) throw new Error('useAuth must be used inside <AuthProvider>')
  return ctx
}

// app/providers.tsx
'use client'

import { useState, type ReactNode } from 'react'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { AuthProvider } from '@/lib/auth/auth-provider'
import { ApiError } from '@/lib/auth/api'

export function Providers({ children }: { children: ReactNode }) {
  const [queryClient] = useState(
    () =>
      new QueryClient({
        defaultOptions: {
          queries: {
            staleTime: 30_000,
            // apiFetch already refreshed once; retrying a 401 or 403 cannot help
            retry: (count, error) =>
              !(error instanceof ApiError && (error.status === 401 || error.status === 403)) && count < 2,
          },
        },
      }),
  )
  return (
    <QueryClientProvider client={queryClient}>
      <AuthProvider>{children}</AuthProvider>
    </QueryClientProvider>
  )
}

// app/layout.tsx
import type { ReactNode } from 'react'
import { Providers } from './providers'

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  )
}

// app/(app)/dashboard/notes-list.tsx
'use client'

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { apiFetch } from '@/lib/auth/api'

type Note = { id: string; title: string }

export function NotesList() {
  const qc = useQueryClient()
  const notes = useQuery({ queryKey: ['notes'], queryFn: () => apiFetch<Note[]>('/notes') })
  const remove = useMutation({
    mutationFn: (id: string) => apiFetch<void>(`/notes/${id}`, { method: 'DELETE' }),
    onSuccess: () => qc.invalidateQueries({ queryKey: ['notes'] }),
  })

  if (notes.isPending) return <p>Loading notes…</p>
  if (notes.isError) return <p role="alert">Could not load notes.</p>
  return (
    <ul>
      {notes.data.map((n) => (
        <li key={n.id}>
          {n.title} <button onClick={() => remove.mutate(n.id)}>Delete</button>
        </li>
      ))}
    </ul>
  )
}

// app/(app)/layout.tsx
'use client'

import { useEffect, type ReactNode } from 'react'
import { usePathname, useRouter } from 'next/navigation'
import { useAuth } from '@/lib/auth/auth-provider'

export default function AppLayout({ children }: { children: ReactNode }) {
  const { status } = useAuth()
  const router = useRouter()
  const pathname = usePathname()

  useEffect(() => {
    if (status === 'unauthenticated') {
      router.replace(`/login?next=${encodeURIComponent(pathname)}`)
    }
  }, [status, pathname, router])

  if (status !== 'authenticated') {
    return <div aria-busy="true" aria-label="Loading" className="app-skeleton" />
  }
  return <>{children}</>
}

// app/(app)/admin/layout.tsx
'use client'

import type { ReactNode } from 'react'
import { useAuth } from '@/lib/auth/auth-provider'

export default function AdminLayout({ children }: { children: ReactNode }) {
  const { user } = useAuth() // the parent gate guarantees a user here
  if (user?.role !== 'admin') return <p role="alert">You do not have access to this page.</p>
  return <>{children}</>
}

// app/(auth)/login/page.tsx
'use client'

import { Suspense, useState, type FormEvent } from 'react'
import { useRouter, useSearchParams } from 'next/navigation'
import { useAuth } from '@/lib/auth/auth-provider'
import { startOAuthLogin } from '@/lib/auth/oauth'

function LoginForm() {
  const { login } = useAuth()
  const router = useRouter()
  const next = useSearchParams().get('next')
  const [error, setError] = useState<string | null>(null)
  const [pending, setPending] = useState(false)
  const safeNext = next?.startsWith('/') && !next.startsWith('//') ? next : '/dashboard'

  async function onSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault()
    const form = new FormData(e.currentTarget)
    setPending(true)
    setError(null)
    try {
      await login(String(form.get('email')), String(form.get('password')))
      router.replace(safeNext)
    } catch (err) {
      setError((err as Error).message)
    } finally {
      setPending(false)
    }
  }

  return (
    <form onSubmit={onSubmit}>
      <input name="email" type="email" autoComplete="username" required />
      <input name="password" type="password" autoComplete="current-password" required />
      {error && <p role="alert">{error}</p>}
      <button disabled={pending}>Sign in</button>
      <button type="button" onClick={() => startOAuthLogin(safeNext)}>Continue with SSO</button>
    </form>
  )
}

export default function LoginPage() {
  // useSearchParams has no value at build time in an export, so it needs a boundary
  return (
    <Suspense>
      <LoginForm />
    </Suspense>
  )
}

// lib/auth/oauth.ts
'use client'

const ISSUER = process.env.NEXT_PUBLIC_OAUTH_ISSUER!
const CLIENT_ID = process.env.NEXT_PUBLIC_OAUTH_CLIENT_ID!
const KEY = 'oauth:pkce'

function base64url(bytes: Uint8Array) {
  return btoa(String.fromCharCode(...bytes)).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '')
}

function randomString(byteLength = 32) {
  return base64url(crypto.getRandomValues(new Uint8Array(byteLength)))
}

async function s256(verifier: string) {
  const digest = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(verifier))
  return base64url(new Uint8Array(digest))
}

export function redirectUri() {
  return `${window.location.origin}/auth/callback`
}

export async function startOAuthLogin(next: string) {
  const verifier = randomString(48)
  const state = randomString(16)
  sessionStorage.setItem(KEY, JSON.stringify({ verifier, state, next }))

  const url = new URL(`${ISSUER}/authorize`)
  url.search = new URLSearchParams({
    response_type: 'code',
    client_id: CLIENT_ID,
    redirect_uri: redirectUri(),
    scope: 'openid profile offline_access',
    state,
    code_challenge: await s256(verifier),
    code_challenge_method: 'S256',
  }).toString()
  window.location.assign(url)
}

export function takePkce(): { verifier: string; state: string; next: string } | null {
  const raw = sessionStorage.getItem(KEY)
  sessionStorage.removeItem(KEY) // one use only
  return raw ? JSON.parse(raw) : null
}

// app/auth/callback/page.tsx
'use client'

import { Suspense, useEffect, useState } from 'react'
import { useSearchParams } from 'next/navigation'
import { takePkce, redirectUri } from '@/lib/auth/oauth'

let exchangeStarted = false // module-level: survives Strict Mode's double effect

function Callback() {
  const params = useSearchParams()
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    if (exchangeStarted) return
    exchangeStarted = true

    const pkce = takePkce()
    const code = params.get('code')
    if (!pkce || !code || params.get('state') !== pkce.state) {
      setError('Sign-in could not be verified. Please try again.')
      return
    }
    // Token-mediating backend: the API exchanges the code, sets the httpOnly rt cookie,
    // and returns only a short-lived access token to the browser.
    fetch(`${process.env.NEXT_PUBLIC_API_URL}/auth/oauth/callback`, {
      method: 'POST',
      credentials: 'include',
      headers: { 'Content-Type': 'application/json', 'X-Requested-With': 'fetch' },
      body: JSON.stringify({ code, codeVerifier: pkce.verifier, redirectUri: redirectUri() }),
    })
      .then((r) => {
        if (!r.ok) throw new Error('exchange failed')
        // A full navigation drops this page's memory anyway, so ignore the returned
        // access token: the AuthProvider on the next page bootstraps from the new rt cookie.
        window.location.replace(pkce.next)
      })
      .catch(() => setError('Sign-in failed. Please try again.'))
  }, [params])

  return error ? <p role="alert">{error}</p> : <p aria-busy="true">Signing you in…</p>
}

export default function CallbackPage() {
  return (
    <Suspense>
      <Callback />
    </Suspense>
  )
}

// lib/auth/auth-channel.ts
'use client'

type AuthEvent = 'login' | 'logout'
const NAME = 'auth'
const STORAGE_KEY = 'auth:event'

export const authChannel = {
  post(event: AuthEvent) {
    if (typeof BroadcastChannel !== 'undefined') {
      const ch = new BroadcastChannel(NAME)
      ch.postMessage(event)
      ch.close()
    } else {
      // storage events fire in *other* tabs only; the timestamp makes repeats distinct
      localStorage.setItem(STORAGE_KEY, JSON.stringify({ event, at: Date.now() }))
    }
  },
  subscribe(listener: (event: AuthEvent) => void) {
    if (typeof BroadcastChannel !== 'undefined') {
      const ch = new BroadcastChannel(NAME)
      ch.onmessage = (e: MessageEvent<AuthEvent>) => listener(e.data)
      return () => ch.close()
    }
    const onStorage = (e: StorageEvent) => {
      if (e.key === STORAGE_KEY && e.newValue) listener(JSON.parse(e.newValue).event)
    }
    window.addEventListener('storage', onStorage)
    return () => window.removeEventListener('storage', onStorage)
  },
}