fix(cors): allow credentials on options requests and update frontend auth flow
This commit is contained in:
Usman Baig
@@ -1,143 +1,144 @@
|
||||
'use server'
|
||||
|
||||
import { cookies } from 'next/headers'
|
||||
|
||||
const AUTH_API_URL = process.env.NEXT_PUBLIC_AUTH_API_URL || process.env.NEXT_PUBLIC_AUTH_URL || 'http://localhost:8081'
|
||||
|
||||
interface AuthResponse {
|
||||
access_token: string
|
||||
refresh_token: string
|
||||
id_token: string
|
||||
expires_in: number
|
||||
}
|
||||
|
||||
interface UserPayload {
|
||||
sub: string
|
||||
email?: string
|
||||
totp_enabled?: boolean
|
||||
}
|
||||
|
||||
export async function exchangeAuthCode(code: string, codeVerifier: string, redirectUri: string) {
|
||||
try {
|
||||
const res = await fetch(`${AUTH_API_URL}/oauth/token`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
grant_type: 'authorization_code',
|
||||
code,
|
||||
client_id: 'analytics-app',
|
||||
redirect_uri: redirectUri,
|
||||
code_verifier: codeVerifier,
|
||||
}),
|
||||
})
|
||||
|
||||
if (!res.ok) {
|
||||
const data = await res.json()
|
||||
throw new Error(data.error || 'Failed to exchange token')
|
||||
}
|
||||
|
||||
const data: AuthResponse = await res.json()
|
||||
|
||||
// * Decode payload (without verification, we trust the direct channel to Auth Server)
|
||||
const payloadPart = data.access_token.split('.')[1]
|
||||
const payload: UserPayload = JSON.parse(Buffer.from(payloadPart, 'base64').toString())
|
||||
|
||||
// * Set Cookies
|
||||
const cookieStore = await cookies()
|
||||
|
||||
// * Access Token
|
||||
cookieStore.set('access_token', data.access_token, {
|
||||
httpOnly: true,
|
||||
secure: process.env.NODE_ENV === 'production',
|
||||
sameSite: 'lax',
|
||||
path: '/',
|
||||
maxAge: 60 * 15 // 15 minutes (short lived)
|
||||
})
|
||||
|
||||
// * Refresh Token (Long lived)
|
||||
cookieStore.set('refresh_token', data.refresh_token, {
|
||||
httpOnly: true,
|
||||
secure: process.env.NODE_ENV === 'production',
|
||||
sameSite: 'lax',
|
||||
path: '/',
|
||||
maxAge: 60 * 60 * 24 * 30 // 30 days
|
||||
})
|
||||
|
||||
return {
|
||||
success: true,
|
||||
user: {
|
||||
id: payload.sub,
|
||||
email: payload.email || 'user@ciphera.net',
|
||||
totp_enabled: payload.totp_enabled || false
|
||||
}
|
||||
}
|
||||
|
||||
} catch (error: any) {
|
||||
console.error('Auth Exchange Error:', error)
|
||||
return { success: false, error: error.message }
|
||||
}
|
||||
}
|
||||
|
||||
export async function setSessionAction(accessToken: string, refreshToken: string) {
|
||||
try {
|
||||
const payloadPart = accessToken.split('.')[1]
|
||||
const payload: UserPayload = JSON.parse(Buffer.from(payloadPart, 'base64').toString())
|
||||
|
||||
const cookieStore = await cookies()
|
||||
|
||||
cookieStore.set('access_token', accessToken, {
|
||||
httpOnly: true,
|
||||
secure: process.env.NODE_ENV === 'production',
|
||||
sameSite: 'lax',
|
||||
path: '/',
|
||||
maxAge: 60 * 15
|
||||
})
|
||||
|
||||
cookieStore.set('refresh_token', refreshToken, {
|
||||
httpOnly: true,
|
||||
secure: process.env.NODE_ENV === 'production',
|
||||
sameSite: 'lax',
|
||||
path: '/',
|
||||
maxAge: 60 * 60 * 24 * 30
|
||||
})
|
||||
|
||||
return {
|
||||
success: true,
|
||||
user: {
|
||||
id: payload.sub,
|
||||
email: payload.email || 'user@ciphera.net',
|
||||
totp_enabled: payload.totp_enabled || false
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
return { success: false, error: 'Invalid token' }
|
||||
}
|
||||
}
|
||||
|
||||
export async function logoutAction() {
|
||||
const cookieStore = await cookies()
|
||||
cookieStore.delete('access_token')
|
||||
cookieStore.delete('refresh_token')
|
||||
return { success: true }
|
||||
}
|
||||
|
||||
export async function getSessionAction() {
|
||||
const cookieStore = await cookies()
|
||||
const token = cookieStore.get('access_token')
|
||||
|
||||
if (!token) return null
|
||||
|
||||
try {
|
||||
const payloadPart = token.value.split('.')[1]
|
||||
const payload: UserPayload = JSON.parse(Buffer.from(payloadPart, 'base64').toString())
|
||||
return {
|
||||
id: payload.sub,
|
||||
email: payload.email || 'user@ciphera.net',
|
||||
totp_enabled: payload.totp_enabled || false
|
||||
}
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
1|'use server'
|
||||
2|
|
||||
3|import { cookies } from 'next/headers'
|
||||
4|
|
||||
5|const AUTH_API_URL = process.env.NEXT_PUBLIC_AUTH_API_URL || process.env.NEXT_PUBLIC_AUTH_URL || 'http://localhost:8081'
|
||||
6|
|
||||
7|interface AuthResponse {
|
||||
8| access_token: string
|
||||
9| refresh_token: string
|
||||
10| id_token: string
|
||||
11| expires_in: number
|
||||
12|}
|
||||
13|
|
||||
14|interface UserPayload {
|
||||
15| sub: string
|
||||
16| email?: string
|
||||
17| totp_enabled?: boolean
|
||||
18|}
|
||||
19|
|
||||
20|export async function exchangeAuthCode(code: string, codeVerifier: string, redirectUri: string) {
|
||||
21| try {
|
||||
22| const res = await fetch(`${AUTH_API_URL}/oauth/token`, {
|
||||
23| method: 'POST',
|
||||
24| headers: {
|
||||
25| 'Content-Type': 'application/json',
|
||||
26| },
|
||||
27| body: JSON.stringify({
|
||||
28| grant_type: 'authorization_code',
|
||||
29| code,
|
||||
30| client_id: 'analytics-app',
|
||||
31| redirect_uri: redirectUri,
|
||||
32| code_verifier: codeVerifier,
|
||||
33| }),
|
||||
34| })
|
||||
35|
|
||||
36| if (!res.ok) {
|
||||
37| const data = await res.json()
|
||||
38| throw new Error(data.error || 'Failed to exchange token')
|
||||
39| }
|
||||
40|
|
||||
41| const data: AuthResponse = await res.json()
|
||||
42|
|
||||
43| // * Decode payload (without verification, we trust the direct channel to Auth Server)
|
||||
44| const payloadPart = data.access_token.split('.')[1]
|
||||
45| const payload: UserPayload = JSON.parse(Buffer.from(payloadPart, 'base64').toString())
|
||||
46|
|
||||
47| // * Set Cookies
|
||||
48| const cookieStore = await cookies()
|
||||
49|
|
||||
50| // * Access Token
|
||||
51| cookieStore.set('access_token', data.access_token, {
|
||||
52| httpOnly: true,
|
||||
53| secure: process.env.NODE_ENV === 'production',
|
||||
54| sameSite: 'lax',
|
||||
55| path: '/',
|
||||
56| maxAge: 60 * 15 // 15 minutes (short lived)
|
||||
57| })
|
||||
58|
|
||||
59| // * Refresh Token (Long lived)
|
||||
60| cookieStore.set('refresh_token', data.refresh_token, {
|
||||
61| httpOnly: true,
|
||||
62| secure: process.env.NODE_ENV === 'production',
|
||||
63| sameSite: 'lax',
|
||||
64| path: '/',
|
||||
65| maxAge: 60 * 60 * 24 * 30 // 30 days
|
||||
66| })
|
||||
67|
|
||||
68| return {
|
||||
69| success: true,
|
||||
70| user: {
|
||||
71| id: payload.sub,
|
||||
72| email: payload.email || 'user@ciphera.net',
|
||||
73| totp_enabled: payload.totp_enabled || false
|
||||
74| }
|
||||
75| }
|
||||
76|
|
||||
77| } catch (error: any) {
|
||||
78| console.error('Auth Exchange Error:', error)
|
||||
79| return { success: false, error: error.message }
|
||||
80| }
|
||||
81|}
|
||||
82|
|
||||
83|export async function setSessionAction(accessToken: string, refreshToken: string) {
|
||||
84| try {
|
||||
85| const payloadPart = accessToken.split('.')[1]
|
||||
86| const payload: UserPayload = JSON.parse(Buffer.from(payloadPart, 'base64').toString())
|
||||
87|
|
||||
88| const cookieStore = await cookies()
|
||||
89|
|
||||
90| cookieStore.set('access_token', accessToken, {
|
||||
91| httpOnly: true,
|
||||
92| secure: process.env.NODE_ENV === 'production',
|
||||
93| sameSite: 'lax',
|
||||
94| path: '/',
|
||||
95| maxAge: 60 * 15
|
||||
96| })
|
||||
97|
|
||||
98| cookieStore.set('refresh_token', refreshToken, {
|
||||
99| httpOnly: true,
|
||||
100| secure: process.env.NODE_ENV === 'production',
|
||||
101| sameSite: 'lax',
|
||||
102| path: '/',
|
||||
103| maxAge: 60 * 60 * 24 * 30
|
||||
104| })
|
||||
105|
|
||||
106| return {
|
||||
107| success: true,
|
||||
108| user: {
|
||||
109| id: payload.sub,
|
||||
110| email: payload.email || 'user@ciphera.net',
|
||||
111| totp_enabled: payload.totp_enabled || false
|
||||
112| }
|
||||
113| }
|
||||
114| } catch (e) {
|
||||
115| return { success: false, error: 'Invalid token' }
|
||||
116| }
|
||||
117|}
|
||||
118|
|
||||
119|export async function logoutAction() {
|
||||
120| const cookieStore = await cookies()
|
||||
121| cookieStore.delete('access_token')
|
||||
122| cookieStore.delete('refresh_token')
|
||||
123| return { success: true }
|
||||
124|}
|
||||
125|
|
||||
126|export async function getSessionAction() {
|
||||
127| const cookieStore = await cookies()
|
||||
128| const token = cookieStore.get('access_token')
|
||||
129|
|
||||
130| if (!token) return null
|
||||
131|
|
||||
132| try {
|
||||
133| const payloadPart = token.value.split('.')[1]
|
||||
134| const payload: UserPayload = JSON.parse(Buffer.from(payloadPart, 'base64').toString())
|
||||
135| return {
|
||||
136| id: payload.sub,
|
||||
137| email: payload.email || 'user@ciphera.net',
|
||||
138| totp_enabled: payload.totp_enabled || false
|
||||
139| }
|
||||
140| } catch {
|
||||
141| return null
|
||||
142| }
|
||||
143|}
|
||||
144|
|
||||
@@ -1,134 +1,135 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState, Suspense, useRef } from 'react'
|
||||
import { useRouter, useSearchParams } from 'next/navigation'
|
||||
import { useAuth } from '@/lib/auth/context'
|
||||
import { AUTH_URL } from '@/lib/api/client'
|
||||
import { exchangeAuthCode, setSessionAction } from '@/app/actions/auth'
|
||||
|
||||
function AuthCallbackContent() {
|
||||
const router = useRouter()
|
||||
const searchParams = useSearchParams()
|
||||
const { login } = useAuth()
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const processedRef = useRef(false)
|
||||
|
||||
useEffect(() => {
|
||||
// * Prevent double execution (React Strict Mode or fast re-renders)
|
||||
if (processedRef.current) return
|
||||
|
||||
// * Check for direct token passing (from auth-frontend direct login)
|
||||
// * TODO: This flow exposes tokens in URL, should be deprecated in favor of Authorization Code flow
|
||||
const token = searchParams.get('token')
|
||||
const refreshToken = searchParams.get('refresh_token')
|
||||
|
||||
if (token && refreshToken) {
|
||||
processedRef.current = true
|
||||
|
||||
const handleDirectTokens = async () => {
|
||||
const result = await setSessionAction(token, refreshToken)
|
||||
if (result.success && result.user) {
|
||||
login(result.user)
|
||||
const returnTo = searchParams.get('returnTo') || '/'
|
||||
router.push(returnTo)
|
||||
} else {
|
||||
setError('Invalid token received')
|
||||
}
|
||||
}
|
||||
handleDirectTokens()
|
||||
return
|
||||
}
|
||||
|
||||
const code = searchParams.get('code')
|
||||
const state = searchParams.get('state')
|
||||
|
||||
// * Skip if params are missing (might be initial render before params are ready)
|
||||
if (!code || !state) return
|
||||
|
||||
processedRef.current = true
|
||||
|
||||
const storedState = localStorage.getItem('oauth_state')
|
||||
const codeVerifier = localStorage.getItem('oauth_code_verifier')
|
||||
|
||||
if (!code || !state) {
|
||||
setError('Missing code or state')
|
||||
return
|
||||
}
|
||||
|
||||
if (state !== storedState) {
|
||||
console.error('State mismatch', { received: state, stored: storedState })
|
||||
setError('Invalid state')
|
||||
return
|
||||
}
|
||||
|
||||
if (!codeVerifier) {
|
||||
setError('Missing code verifier')
|
||||
return
|
||||
}
|
||||
|
||||
const exchangeCode = async () => {
|
||||
try {
|
||||
const redirectUri = window.location.origin + '/auth/callback'
|
||||
const result = await exchangeAuthCode(code, codeVerifier, redirectUri)
|
||||
|
||||
if (!result.success || !result.user) {
|
||||
throw new Error(result.error || 'Failed to exchange token')
|
||||
}
|
||||
|
||||
login(result.user)
|
||||
|
||||
// * Cleanup
|
||||
localStorage.removeItem('oauth_state')
|
||||
localStorage.removeItem('oauth_code_verifier')
|
||||
|
||||
router.push('/')
|
||||
} catch (err: any) {
|
||||
setError(err.message)
|
||||
}
|
||||
}
|
||||
|
||||
exchangeCode()
|
||||
}, [searchParams, login, router])
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center p-4">
|
||||
<div className="rounded-md bg-red-50 dark:bg-red-900/20 p-4 text-red-500">
|
||||
Error: {error}
|
||||
<div className="mt-4">
|
||||
<button
|
||||
onClick={() => window.location.href = `${AUTH_URL}/login`}
|
||||
className="text-sm underline"
|
||||
>
|
||||
Back to Login
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center p-4">
|
||||
<div className="text-center">
|
||||
<div className="h-8 w-8 animate-spin rounded-full border-4 border-neutral-200 border-t-neutral-800 mx-auto mb-4"></div>
|
||||
<p className="text-neutral-600 dark:text-neutral-400">Completing sign in...</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function AuthCallback() {
|
||||
return (
|
||||
<Suspense fallback={
|
||||
<div className="flex min-h-screen items-center justify-center p-4">
|
||||
<div className="text-center">
|
||||
<div className="h-8 w-8 animate-spin rounded-full border-4 border-neutral-200 border-t-neutral-800 mx-auto mb-4"></div>
|
||||
<p className="text-neutral-600 dark:text-neutral-400">Loading...</p>
|
||||
</div>
|
||||
</div>
|
||||
}>
|
||||
<AuthCallbackContent />
|
||||
</Suspense>
|
||||
)
|
||||
}
|
||||
1|'use client'
|
||||
2|
|
||||
3|import { useEffect, useState, Suspense, useRef } from 'react'
|
||||
4|import { useRouter, useSearchParams } from 'next/navigation'
|
||||
5|import { useAuth } from '@/lib/auth/context'
|
||||
6|import { AUTH_URL } from '@/lib/api/client'
|
||||
7|import { exchangeAuthCode, setSessionAction } from '@/app/actions/auth'
|
||||
8|
|
||||
9|function AuthCallbackContent() {
|
||||
10| const router = useRouter()
|
||||
11| const searchParams = useSearchParams()
|
||||
12| const { login } = useAuth()
|
||||
13| const [error, setError] = useState<string | null>(null)
|
||||
14| const processedRef = useRef(false)
|
||||
15|
|
||||
16| useEffect(() => {
|
||||
17| // * Prevent double execution (React Strict Mode or fast re-renders)
|
||||
18| if (processedRef.current) return
|
||||
19|
|
||||
20| // * Check for direct token passing (from auth-frontend direct login)
|
||||
21| // * TODO: This flow exposes tokens in URL, should be deprecated in favor of Authorization Code flow
|
||||
22| const token = searchParams.get('token')
|
||||
23| const refreshToken = searchParams.get('refresh_token')
|
||||
24|
|
||||
25| if (token && refreshToken) {
|
||||
26| processedRef.current = true
|
||||
27|
|
||||
28| const handleDirectTokens = async () => {
|
||||
29| const result = await setSessionAction(token, refreshToken)
|
||||
30| if (result.success && result.user) {
|
||||
31| login(result.user)
|
||||
32| const returnTo = searchParams.get('returnTo') || '/'
|
||||
33| router.push(returnTo)
|
||||
34| } else {
|
||||
35| setError('Invalid token received')
|
||||
36| }
|
||||
37| }
|
||||
38| handleDirectTokens()
|
||||
39| return
|
||||
40| }
|
||||
41|
|
||||
42| const code = searchParams.get('code')
|
||||
43| const state = searchParams.get('state')
|
||||
44|
|
||||
45| // * Skip if params are missing (might be initial render before params are ready)
|
||||
46| if (!code || !state) return
|
||||
47|
|
||||
48| processedRef.current = true
|
||||
49|
|
||||
50| const storedState = localStorage.getItem('oauth_state')
|
||||
51| const codeVerifier = localStorage.getItem('oauth_code_verifier')
|
||||
52|
|
||||
53| if (!code || !state) {
|
||||
54| setError('Missing code or state')
|
||||
55| return
|
||||
56| }
|
||||
57|
|
||||
58| if (state !== storedState) {
|
||||
59| console.error('State mismatch', { received: state, stored: storedState })
|
||||
60| setError('Invalid state')
|
||||
61| return
|
||||
62| }
|
||||
63|
|
||||
64| if (!codeVerifier) {
|
||||
65| setError('Missing code verifier')
|
||||
66| return
|
||||
67| }
|
||||
68|
|
||||
69| const exchangeCode = async () => {
|
||||
70| try {
|
||||
71| const redirectUri = window.location.origin + '/auth/callback'
|
||||
72| const result = await exchangeAuthCode(code, codeVerifier, redirectUri)
|
||||
73|
|
||||
74| if (!result.success || !result.user) {
|
||||
75| throw new Error(result.error || 'Failed to exchange token')
|
||||
76| }
|
||||
77|
|
||||
78| login(result.user)
|
||||
79|
|
||||
80| // * Cleanup
|
||||
81| localStorage.removeItem('oauth_state')
|
||||
82| localStorage.removeItem('oauth_code_verifier')
|
||||
83|
|
||||
84| router.push('/')
|
||||
85| } catch (err: any) {
|
||||
86| setError(err.message)
|
||||
87| }
|
||||
88| }
|
||||
89|
|
||||
90| exchangeCode()
|
||||
91| }, [searchParams, login, router])
|
||||
92|
|
||||
93| if (error) {
|
||||
94| return (
|
||||
95| <div className="flex min-h-screen items-center justify-center p-4">
|
||||
96| <div className="rounded-md bg-red-50 dark:bg-red-900/20 p-4 text-red-500">
|
||||
97| Error: {error}
|
||||
98| <div className="mt-4">
|
||||
99| <button
|
||||
100| onClick={() => window.location.href = `${AUTH_URL}/login`}
|
||||
101| className="text-sm underline"
|
||||
102| >
|
||||
103| Back to Login
|
||||
104| </button>
|
||||
105| </div>
|
||||
106| </div>
|
||||
107| </div>
|
||||
108| )
|
||||
109| }
|
||||
110|
|
||||
111| return (
|
||||
112| <div className="flex min-h-screen items-center justify-center p-4">
|
||||
113| <div className="text-center">
|
||||
114| <div className="h-8 w-8 animate-spin rounded-full border-4 border-neutral-200 border-t-neutral-800 mx-auto mb-4"></div>
|
||||
115| <p className="text-neutral-600 dark:text-neutral-400">Completing sign in...</p>
|
||||
116| </div>
|
||||
117| </div>
|
||||
118| )
|
||||
119|}
|
||||
120|
|
||||
121|export default function AuthCallback() {
|
||||
122| return (
|
||||
123| <Suspense fallback={
|
||||
124| <div className="flex min-h-screen items-center justify-center p-4">
|
||||
125| <div className="text-center">
|
||||
126| <div className="h-8 w-8 animate-spin rounded-full border-4 border-neutral-200 border-t-neutral-800 mx-auto mb-4"></div>
|
||||
127| <p className="text-neutral-600 dark:text-neutral-400">Loading...</p>
|
||||
128| </div>
|
||||
129| </div>
|
||||
130| }>
|
||||
131| <AuthCallbackContent />
|
||||
132| </Suspense>
|
||||
133| )
|
||||
134|}
|
||||
135|
|
||||
Reference in New Issue
Block a user