ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

feat(security): switch auth to HttpOnly cookies and add server actions

Browse Source
This commit is contained in:
Usman Baig
2026-01-18 21:19:44 +01:00
parent 389db73bf5
commit d4486f952f
5 changed files with 263 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
lib/api/client.ts
View File

@@ -27,14 +27,14 @@ export class ApiError extends Error {
// * Mutex for token refresh
let isRefreshing = false
let refreshSubscribers: ((token: string) => void)[] = []
let refreshSubscribers: (() => void)[] = []
function subscribeToTokenRefresh(cb: (token: string) => void) {
function subscribeToTokenRefresh(cb: () => void) {
refreshSubscribers.push(cb)
}
function onRefreshed(token: string) {
refreshSubscribers.map((cb) => cb(token))
function onRefreshed() {
refreshSubscribers.map((cb) => cb())
refreshSubscribers = []
}
@@ -55,40 +55,31 @@ async function apiRequest<T>(
...options.headers,
}
// Inject Auth Token if available (Client-side only)
if (typeof window !== 'undefined') {
const token = localStorage.getItem('token')
if (token) {
(headers as any)['Authorization'] = `Bearer ${token}`
}
}
// * We rely on HttpOnly cookies, so no manual Authorization header injection.
// * We MUST set credentials: 'include' for the browser to send cookies cross-origin (or same-site).
const response = await fetch(url, {
...options,
headers,
credentials: 'include', // * IMPORTANT: Send cookies
})
if (!response.ok) {
if (response.status === 401) {
// * Attempt Token Refresh if 401
if (typeof window !== 'undefined') {
const refreshToken = localStorage.getItem('refreshToken')
// * Prevent infinite loop: Don't refresh if the failed request WAS a refresh request
if (refreshToken && !endpoint.includes('/auth/refresh')) {
// * Prevent infinite loop: Don't refresh if the failed request WAS a refresh request (unlikely via apiRequest but safe to check)
if (!endpoint.includes('/auth/refresh')) {
if (isRefreshing) {
// * If refresh is already in progress, wait for it to complete
return new Promise((resolve, reject) => {
subscribeToTokenRefresh(async (newToken) => {
// Retry original request with new token
const newHeaders = {
...headers,
'Authorization': `Bearer ${newToken}`,
}
subscribeToTokenRefresh(async () => {
// Retry original request (browser uses new cookie)
try {
const retryResponse = await fetch(url, {
...options,
headers: newHeaders,
headers,
credentials: 'include',
})
if (retryResponse.ok) {
resolve(retryResponse.json())
@@ -105,30 +96,21 @@ async function apiRequest<T>(
isRefreshing = true
try {
const refreshRes = await fetch(`${AUTH_API_URL}/api/v1/auth/refresh`, {
// * Call our internal Next.js API route to handle refresh securely
const refreshRes = await fetch('/api/auth/refresh', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
refresh_token: refreshToken,
}),
})
if (refreshRes.ok) {
const data = await refreshRes.json()
localStorage.setItem('token', data.access_token)
localStorage.setItem('refreshToken', data.refresh_token) // Rotation
// Notify waiting requests
onRefreshed(data.access_token)
// * Refresh successful, cookies updated
onRefreshed()
// * Retry original request with new token
const newHeaders = {
...headers,
'Authorization': `Bearer ${data.access_token}`,
}
// * Retry original request
const retryResponse = await fetch(url, {
...options,
headers: newHeaders,
headers,
credentials: 'include',
})
if (retryResponse.ok) {
@@ -136,9 +118,9 @@ async function apiRequest<T>(
}
} else {
// * Refresh failed, logout
localStorage.removeItem('token')
localStorage.removeItem('refreshToken')
localStorage.removeItem('user')
// * Redirect to login if needed, or let the app handle 401
// window.location.href = '/'
}
} catch (e) {
// * Network error during refresh

56
lib/auth/context.tsx
View File

@@ -4,6 +4,7 @@ import React, { createContext, useContext, useEffect, useState, useCallback } fr
import { useRouter } from 'next/navigation'
import apiRequest from '@/lib/api/client'
import LoadingOverlay from '@/components/LoadingOverlay'
import { logoutAction, getSessionAction } from '@/app/actions/auth'
interface User {
id: string
@@ -14,7 +15,7 @@ interface User {
interface AuthContextType {
user: User | null
loading: boolean
login: (token: string, refreshToken: string, user: User) => void
login: (user: User) => void
logout: () => void
refresh: () => Promise<void>
refreshSession: () => Promise<void>
@@ -35,19 +36,20 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
const [isLoggingOut, setIsLoggingOut] = useState(false)
const router = useRouter()
const login = (token: string, refreshToken: string, userData: User) => {
localStorage.setItem('token', token)
localStorage.setItem('refreshToken', refreshToken)
const login = (userData: User) => {
// * We still store user profile in localStorage for optimistic UI, but NOT the token
localStorage.setItem('user', JSON.stringify(userData))
setUser(userData)
router.refresh()
}
const logout = useCallback(() => {
const logout = useCallback(async () => {
setIsLoggingOut(true)
await logoutAction()
localStorage.removeItem('user')
// * Clear legacy tokens if they exist
localStorage.removeItem('token')
localStorage.removeItem('refreshToken')
localStorage.removeItem('user')
setTimeout(() => {
window.location.href = '/'
@@ -61,13 +63,9 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
localStorage.setItem('user', JSON.stringify(userData))
} catch (e) {
console.error('Failed to refresh user data', e)
const savedUser = localStorage.getItem('user')
if (savedUser && !user) {
try { setUser(JSON.parse(savedUser)) } catch {}
}
}
router.refresh()
}, [router, user])
}, [router])
const refreshSession = useCallback(async () => {
await refresh()
@@ -76,28 +74,24 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
// Initial load
useEffect(() => {
const init = async () => {
const token = localStorage.getItem('token')
const savedUser = localStorage.getItem('user')
// * 1. Check server-side session (cookies)
const session = await getSessionAction()
if (token) {
// Optimistically set from local storage first
if (savedUser) {
try {
setUser(JSON.parse(savedUser))
} catch (e) {
localStorage.removeItem('user')
}
}
// Then fetch fresh data
try {
const userData = await apiRequest<User>('/auth/user/me')
setUser(userData)
localStorage.setItem('user', JSON.stringify(userData))
} catch (e) {
console.error('Failed to fetch initial user data', e)
}
if (session) {
setUser(session)
localStorage.setItem('user', JSON.stringify(session))
} else {
// * Session invalid/expired
localStorage.removeItem('user')
setUser(null)
}
// * Clear legacy tokens if they exist (migration)
if (localStorage.getItem('token')) {
localStorage.removeItem('token')
localStorage.removeItem('refreshToken')
}
setLoading(false)
}
init()