fix: resolve frontend build errors and enable credentials for options requests in backend
This commit is contained in:
Usman Baig
@@ -1,147 +1,146 @@
|
||||
1|/**
|
||||
2| * HTTP client wrapper for API calls
|
||||
3| */
|
||||
4|
|
||||
5|export const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8082'
|
||||
6|export const AUTH_URL = process.env.NEXT_PUBLIC_AUTH_URL || 'http://localhost:3000'
|
||||
7|export const APP_URL = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3003'
|
||||
8|export const AUTH_API_URL = process.env.NEXT_PUBLIC_AUTH_API_URL || 'https://auth-api.ciphera.net'
|
||||
9|
|
||||
10|export function getLoginUrl(redirectPath = '/auth/callback') {
|
||||
11| const redirectUri = encodeURIComponent(`${APP_URL}${redirectPath}`)
|
||||
12| return `${AUTH_URL}/login?client_id=analytics-app&redirect_uri=${redirectUri}&response_type=code`
|
||||
13|}
|
||||
14|
|
||||
15|export function getSignupUrl(redirectPath = '/auth/callback') {
|
||||
16| const redirectUri = encodeURIComponent(`${APP_URL}${redirectPath}`)
|
||||
17| return `${AUTH_URL}/signup?client_id=analytics-app&redirect_uri=${redirectUri}&response_type=code`
|
||||
18|}
|
||||
19|
|
||||
20|export class ApiError extends Error {
|
||||
21| status: number
|
||||
22| constructor(message: string, status: number) {
|
||||
23| super(message)
|
||||
24| this.status = status
|
||||
25| }
|
||||
26|}
|
||||
27|
|
||||
28|// * Mutex for token refresh
|
||||
29|let isRefreshing = false
|
||||
30|let refreshSubscribers: (() => void)[] = []
|
||||
31|
|
||||
32|function subscribeToTokenRefresh(cb: () => void) {
|
||||
33| refreshSubscribers.push(cb)
|
||||
34|}
|
||||
35|
|
||||
36|function onRefreshed() {
|
||||
37| refreshSubscribers.map((cb) => cb())
|
||||
38| refreshSubscribers = []
|
||||
39|}
|
||||
40|
|
||||
41|/**
|
||||
42| * Base API client with error handling
|
||||
43| */
|
||||
44|async function apiRequest<T>(
|
||||
45| endpoint: string,
|
||||
46| options: RequestInit = {}
|
||||
47|): Promise<T> {
|
||||
48| // * Determine base URL
|
||||
49| const isAuthRequest = endpoint.startsWith('/auth')
|
||||
50| const baseUrl = isAuthRequest ? AUTH_API_URL : API_URL
|
||||
51| const url = `${baseUrl}/api/v1${endpoint}`
|
||||
52|
|
||||
53| const headers: HeadersInit = {
|
||||
54| 'Content-Type': 'application/json',
|
||||
55| ...options.headers,
|
||||
56| }
|
||||
57|
|
||||
58| // * We rely on HttpOnly cookies, so no manual Authorization header injection.
|
||||
59| // * We MUST set credentials: 'include' for the browser to send cookies cross-origin (or same-site).
|
||||
60|
|
||||
61| const response = await fetch(url, {
|
||||
62| ...options,
|
||||
63| headers,
|
||||
64| credentials: 'include', // * IMPORTANT: Send cookies
|
||||
65| })
|
||||
66|
|
||||
67| if (!response.ok) {
|
||||
68| if (response.status === 401) {
|
||||
69| // * Attempt Token Refresh if 401
|
||||
70| if (typeof window !== 'undefined') {
|
||||
71| // * Prevent infinite loop: Don't refresh if the failed request WAS a refresh request (unlikely via apiRequest but safe to check)
|
||||
72| if (!endpoint.includes('/auth/refresh')) {
|
||||
73| if (isRefreshing) {
|
||||
74| // * If refresh is already in progress, wait for it to complete
|
||||
75| return new Promise((resolve, reject) => {
|
||||
76| subscribeToTokenRefresh(async () => {
|
||||
77| // Retry original request (browser uses new cookie)
|
||||
78| try {
|
||||
79| const retryResponse = await fetch(url, {
|
||||
80| ...options,
|
||||
81| headers,
|
||||
82| credentials: 'include',
|
||||
83| })
|
||||
84| if (retryResponse.ok) {
|
||||
85| resolve(retryResponse.json())
|
||||
86| } else {
|
||||
87| reject(new ApiError('Retry failed', retryResponse.status))
|
||||
88| }
|
||||
89| } catch (e) {
|
||||
90| reject(e)
|
||||
91| }
|
||||
92| })
|
||||
93| })
|
||||
94| }
|
||||
95|
|
||||
96| isRefreshing = true
|
||||
97|
|
||||
98| try {
|
||||
99| // * Call our internal Next.js API route to handle refresh securely
|
||||
100| const refreshRes = await fetch('/api/auth/refresh', {
|
||||
101| method: 'POST',
|
||||
102| headers: { 'Content-Type': 'application/json' },
|
||||
103| })
|
||||
104|
|
||||
105| if (refreshRes.ok) {
|
||||
106| // * Refresh successful, cookies updated
|
||||
107| onRefreshed()
|
||||
108|
|
||||
109| // * Retry original request
|
||||
110| const retryResponse = await fetch(url, {
|
||||
111| ...options,
|
||||
112| headers,
|
||||
113| credentials: 'include',
|
||||
114| })
|
||||
115|
|
||||
116| if (retryResponse.ok) {
|
||||
117| return retryResponse.json()
|
||||
118| }
|
||||
119| } else {
|
||||
120| // * Refresh failed, logout
|
||||
121| localStorage.removeItem('user')
|
||||
122| // * Redirect to login if needed, or let the app handle 401
|
||||
123| // window.location.href = '/'
|
||||
124| }
|
||||
125| } catch (e) {
|
||||
126| // * Network error during refresh
|
||||
127| throw e
|
||||
128| } finally {
|
||||
129| isRefreshing = false
|
||||
130| }
|
||||
131| }
|
||||
132| }
|
||||
133| }
|
||||
134|
|
||||
135| const errorBody = await response.json().catch(() => ({
|
||||
136| error: 'Unknown error',
|
||||
137| message: `HTTP ${response.status}: ${response.statusText}`,
|
||||
138| }))
|
||||
139| throw new ApiError(errorBody.message || errorBody.error || 'Request failed', response.status)
|
||||
140| }
|
||||
141|
|
||||
142| return response.json()
|
||||
143|}
|
||||
144|
|
||||
145|export const authFetch = apiRequest
|
||||
146|export default apiRequest
|
||||
147|
|
||||
/**
|
||||
* HTTP client wrapper for API calls
|
||||
*/
|
||||
|
||||
export const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8082'
|
||||
export const AUTH_URL = process.env.NEXT_PUBLIC_AUTH_URL || 'http://localhost:3000'
|
||||
export const APP_URL = process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3003'
|
||||
export const AUTH_API_URL = process.env.NEXT_PUBLIC_AUTH_API_URL || 'https://auth-api.ciphera.net'
|
||||
|
||||
export function getLoginUrl(redirectPath = '/auth/callback') {
|
||||
const redirectUri = encodeURIComponent(`${APP_URL}${redirectPath}`)
|
||||
return `${AUTH_URL}/login?client_id=analytics-app&redirect_uri=${redirectUri}&response_type=code`
|
||||
}
|
||||
|
||||
export function getSignupUrl(redirectPath = '/auth/callback') {
|
||||
const redirectUri = encodeURIComponent(`${APP_URL}${redirectPath}`)
|
||||
return `${AUTH_URL}/signup?client_id=analytics-app&redirect_uri=${redirectUri}&response_type=code`
|
||||
}
|
||||
|
||||
export class ApiError extends Error {
|
||||
status: number
|
||||
constructor(message: string, status: number) {
|
||||
super(message)
|
||||
this.status = status
|
||||
}
|
||||
}
|
||||
|
||||
// * Mutex for token refresh
|
||||
let isRefreshing = false
|
||||
let refreshSubscribers: (() => void)[] = []
|
||||
|
||||
function subscribeToTokenRefresh(cb: () => void) {
|
||||
refreshSubscribers.push(cb)
|
||||
}
|
||||
|
||||
function onRefreshed() {
|
||||
refreshSubscribers.map((cb) => cb())
|
||||
refreshSubscribers = []
|
||||
}
|
||||
|
||||
/**
|
||||
* Base API client with error handling
|
||||
*/
|
||||
async function apiRequest<T>(
|
||||
endpoint: string,
|
||||
options: RequestInit = {}
|
||||
): Promise<T> {
|
||||
// * Determine base URL
|
||||
const isAuthRequest = endpoint.startsWith('/auth')
|
||||
const baseUrl = isAuthRequest ? AUTH_API_URL : API_URL
|
||||
const url = `${baseUrl}/api/v1${endpoint}`
|
||||
|
||||
const headers: HeadersInit = {
|
||||
'Content-Type': 'application/json',
|
||||
...options.headers,
|
||||
}
|
||||
|
||||
// * 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') {
|
||||
// * 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 () => {
|
||||
// Retry original request (browser uses new cookie)
|
||||
try {
|
||||
const retryResponse = await fetch(url, {
|
||||
...options,
|
||||
headers,
|
||||
credentials: 'include',
|
||||
})
|
||||
if (retryResponse.ok) {
|
||||
resolve(retryResponse.json())
|
||||
} else {
|
||||
reject(new ApiError('Retry failed', retryResponse.status))
|
||||
}
|
||||
} catch (e) {
|
||||
reject(e)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
isRefreshing = true
|
||||
|
||||
try {
|
||||
// * 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' },
|
||||
})
|
||||
|
||||
if (refreshRes.ok) {
|
||||
// * Refresh successful, cookies updated
|
||||
onRefreshed()
|
||||
|
||||
// * Retry original request
|
||||
const retryResponse = await fetch(url, {
|
||||
...options,
|
||||
headers,
|
||||
credentials: 'include',
|
||||
})
|
||||
|
||||
if (retryResponse.ok) {
|
||||
return retryResponse.json()
|
||||
}
|
||||
} else {
|
||||
// * Refresh failed, logout
|
||||
localStorage.removeItem('user')
|
||||
// * Redirect to login if needed, or let the app handle 401
|
||||
// window.location.href = '/'
|
||||
}
|
||||
} catch (e) {
|
||||
// * Network error during refresh
|
||||
throw e
|
||||
} finally {
|
||||
isRefreshing = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const errorBody = await response.json().catch(() => ({
|
||||
error: 'Unknown error',
|
||||
message: `HTTP ${response.status}: ${response.statusText}`,
|
||||
}))
|
||||
throw new ApiError(errorBody.message || errorBody.error || 'Request failed', response.status)
|
||||
}
|
||||
|
||||
return response.json()
|
||||
}
|
||||
|
||||
export const authFetch = apiRequest
|
||||
export default apiRequest
|
||||
|
||||
@@ -1,109 +1,108 @@
|
||||
1|'use client'
|
||||
2|
|
||||
3|import React, { createContext, useContext, useEffect, useState, useCallback } from 'react'
|
||||
4|import { useRouter } from 'next/navigation'
|
||||
5|import apiRequest from '@/lib/api/client'
|
||||
6|import LoadingOverlay from '@/components/LoadingOverlay'
|
||||
7|import { logoutAction, getSessionAction } from '@/app/actions/auth'
|
||||
8|
|
||||
9|interface User {
|
||||
10| id: string
|
||||
11| email: string
|
||||
12| totp_enabled: boolean
|
||||
13|}
|
||||
14|
|
||||
15|interface AuthContextType {
|
||||
16| user: User | null
|
||||
17| loading: boolean
|
||||
18| login: (user: User) => void
|
||||
19| logout: () => void
|
||||
20| refresh: () => Promise<void>
|
||||
21| refreshSession: () => Promise<void>
|
||||
22|}
|
||||
23|
|
||||
24|const AuthContext = createContext<AuthContextType>({
|
||||
25| user: null,
|
||||
26| loading: true,
|
||||
27| login: () => {},
|
||||
28| logout: () => {},
|
||||
29| refresh: async () => {},
|
||||
30| refreshSession: async () => {},
|
||||
31|})
|
||||
32|
|
||||
33|export function AuthProvider({ children }: { children: React.ReactNode }) {
|
||||
34| const [user, setUser] = useState<User | null>(null)
|
||||
35| const [loading, setLoading] = useState(true)
|
||||
36| const [isLoggingOut, setIsLoggingOut] = useState(false)
|
||||
37| const router = useRouter()
|
||||
38|
|
||||
39| const login = (userData: User) => {
|
||||
40| // * We still store user profile in localStorage for optimistic UI, but NOT the token
|
||||
41| localStorage.setItem('user', JSON.stringify(userData))
|
||||
42| setUser(userData)
|
||||
43| router.refresh()
|
||||
44| }
|
||||
45|
|
||||
46| const logout = useCallback(async () => {
|
||||
47| setIsLoggingOut(true)
|
||||
48| await logoutAction()
|
||||
49| localStorage.removeItem('user')
|
||||
50| // * Clear legacy tokens if they exist
|
||||
51| localStorage.removeItem('token')
|
||||
52| localStorage.removeItem('refreshToken')
|
||||
53|
|
||||
54| setTimeout(() => {
|
||||
55| window.location.href = '/'
|
||||
56| }, 500)
|
||||
57| }, [])
|
||||
58|
|
||||
59| const refresh = useCallback(async () => {
|
||||
60| try {
|
||||
61| const userData = await apiRequest<User>('/auth/user/me')
|
||||
62| setUser(userData)
|
||||
63| localStorage.setItem('user', JSON.stringify(userData))
|
||||
64| } catch (e) {
|
||||
65| console.error('Failed to refresh user data', e)
|
||||
66| }
|
||||
67| router.refresh()
|
||||
68| }, [router])
|
||||
69|
|
||||
70| const refreshSession = useCallback(async () => {
|
||||
71| await refresh()
|
||||
72| }, [refresh])
|
||||
73|
|
||||
74| // Initial load
|
||||
75| useEffect(() => {
|
||||
76| const init = async () => {
|
||||
77| // * 1. Check server-side session (cookies)
|
||||
78| const session = await getSessionAction()
|
||||
79|
|
||||
80| if (session) {
|
||||
81| setUser(session)
|
||||
82| localStorage.setItem('user', JSON.stringify(session))
|
||||
83| } else {
|
||||
84| // * Session invalid/expired
|
||||
85| localStorage.removeItem('user')
|
||||
86| setUser(null)
|
||||
87| }
|
||||
88|
|
||||
89| // * Clear legacy tokens if they exist (migration)
|
||||
90| if (localStorage.getItem('token')) {
|
||||
91| localStorage.removeItem('token')
|
||||
92| localStorage.removeItem('refreshToken')
|
||||
93| }
|
||||
94|
|
||||
95| setLoading(false)
|
||||
96| }
|
||||
97| init()
|
||||
98| }, [])
|
||||
99|
|
||||
100| return (
|
||||
101| <AuthContext.Provider value={{ user, loading, login, logout, refresh, refreshSession }}>
|
||||
102| {isLoggingOut && <LoadingOverlay logoSrc="/ciphera_icon_no_margins.png" title="Ciphera Analytics" />}
|
||||
103| {children}
|
||||
104| </AuthContext.Provider>
|
||||
105| )
|
||||
106|}
|
||||
107|
|
||||
108|export const useAuth = () => useContext(AuthContext)
|
||||
109|
|
||||
'use client'
|
||||
|
||||
import React, { createContext, useContext, useEffect, useState, useCallback } from 'react'
|
||||
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
|
||||
email: string
|
||||
totp_enabled: boolean
|
||||
}
|
||||
|
||||
interface AuthContextType {
|
||||
user: User | null
|
||||
loading: boolean
|
||||
login: (user: User) => void
|
||||
logout: () => void
|
||||
refresh: () => Promise<void>
|
||||
refreshSession: () => Promise<void>
|
||||
}
|
||||
|
||||
const AuthContext = createContext<AuthContextType>({
|
||||
user: null,
|
||||
loading: true,
|
||||
login: () => {},
|
||||
logout: () => {},
|
||||
refresh: async () => {},
|
||||
refreshSession: async () => {},
|
||||
})
|
||||
|
||||
export function AuthProvider({ children }: { children: React.ReactNode }) {
|
||||
const [user, setUser] = useState<User | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [isLoggingOut, setIsLoggingOut] = useState(false)
|
||||
const router = useRouter()
|
||||
|
||||
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(async () => {
|
||||
setIsLoggingOut(true)
|
||||
await logoutAction()
|
||||
localStorage.removeItem('user')
|
||||
// * Clear legacy tokens if they exist
|
||||
localStorage.removeItem('token')
|
||||
localStorage.removeItem('refreshToken')
|
||||
|
||||
setTimeout(() => {
|
||||
window.location.href = '/'
|
||||
}, 500)
|
||||
}, [])
|
||||
|
||||
const refresh = useCallback(async () => {
|
||||
try {
|
||||
const userData = await apiRequest<User>('/auth/user/me')
|
||||
setUser(userData)
|
||||
localStorage.setItem('user', JSON.stringify(userData))
|
||||
} catch (e) {
|
||||
console.error('Failed to refresh user data', e)
|
||||
}
|
||||
router.refresh()
|
||||
}, [router])
|
||||
|
||||
const refreshSession = useCallback(async () => {
|
||||
await refresh()
|
||||
}, [refresh])
|
||||
|
||||
// Initial load
|
||||
useEffect(() => {
|
||||
const init = async () => {
|
||||
// * 1. Check server-side session (cookies)
|
||||
const session = await getSessionAction()
|
||||
|
||||
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()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<AuthContext.Provider value={{ user, loading, login, logout, refresh, refreshSession }}>
|
||||
{isLoggingOut && <LoadingOverlay logoSrc="/ciphera_icon_no_margins.png" title="Ciphera Analytics" />}
|
||||
{children}
|
||||
</AuthContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export const useAuth = () => useContext(AuthContext)
|
||||
|
||||
Reference in New Issue
Block a user