135 lines
5.0 KiB
TypeScript
135 lines
5.0 KiB
TypeScript
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| |