- {status === 'loading' && (
- <>
-
-
Completing Authentication
-
Connecting to {provider}...
-
- )}
-
- {status === 'success' && (
- <>
-
-
Authentication Successful!
-
Successfully connected to {provider}. You can now close this window.
-
-
- )}
-
- {status === 'error' && (
- <>
-
-
Authentication Failed
-
{error || 'An error occurred during authentication'}
-
-
- )}
+
+
+
Authenticating...
+
Please wait while we complete your authentication.
+
This window should close automatically.
+
+
)
}
-
-export default OAuthCallback
diff --git a/examples/chat-ui/src/components/PkceCallback.tsx b/examples/chat-ui/src/components/PkceCallback.tsx
new file mode 100644
index 0000000..0502ef3
--- /dev/null
+++ b/examples/chat-ui/src/components/PkceCallback.tsx
@@ -0,0 +1,153 @@
+import React, { useEffect, useState, useRef } from 'react'
+import { useSearchParams } from 'react-router-dom'
+import { completeOAuthFlow } from '../utils/auth'
+import { SupportedProvider } from '../types/models'
+
+interface OAuthCallbackProps {
+ provider: SupportedProvider
+}
+
+const PkceCallback: React.FC
= ({ provider }) => {
+ const [searchParams] = useSearchParams()
+ const [status, setStatus] = useState<'loading' | 'success' | 'error'>('loading')
+ const [error, setError] = useState(null)
+ const executedRef = useRef(false)
+
+ useEffect(() => {
+ const handleCallback = async () => {
+ if (executedRef.current) {
+ console.log('DEBUG: Skipping duplicate OAuth callback execution')
+ return
+ }
+ executedRef.current = true
+
+ try {
+ const code = searchParams.get('code')
+ const error = searchParams.get('error')
+
+ if (error) {
+ throw new Error(`OAuth error: ${error}`)
+ }
+
+ if (!code) {
+ throw new Error('Missing authorization code')
+ }
+
+ // TODO: Add state parameter handling back if needed later
+ // const stateToUse = state || 'no-state'
+ await completeOAuthFlow(provider, code)
+ setStatus('success')
+
+ console.log('DEBUG: OAuth flow completed successfully')
+ console.log('DEBUG: window.opener exists:', !!window.opener)
+ console.log('DEBUG: window.opener closed:', window.opener?.closed)
+ console.log('DEBUG: window.parent exists:', !!window.parent)
+ console.log('DEBUG: window.parent === window:', window.parent === window)
+
+ // Try to send success message to parent if possible
+ const sendSuccessMessage = () => {
+ const message = { type: 'oauth_success', provider }
+
+ // Try window.opener first
+ if (window.opener && !window.opener.closed) {
+ console.log('DEBUG: Sending message via window.opener')
+ window.opener.postMessage(message, '*')
+ return true
+ }
+
+ // Also try window.parent as fallback
+ if (window.parent && window.parent !== window) {
+ console.log('DEBUG: Sending message via window.parent')
+ window.parent.postMessage(message, '*')
+ return true
+ }
+
+ return false
+ }
+
+ // Try to send success message
+ const messageSent = sendSuccessMessage()
+ console.log({ messageSent })
+
+ console.log('DEBUG: Closing popup in 100ms')
+ setTimeout(() => {
+ console.log('DEBUG: Attempting to close popup')
+ window.close()
+ }, 100)
+ } catch (err) {
+ console.error('OAuth callback error:', err)
+ setError(err instanceof Error ? err.message : 'Unknown error')
+ setStatus('error')
+ }
+ }
+
+ handleCallback()
+ }, [searchParams, provider])
+
+ return (
+
+
+
+ {status === 'loading' && (
+ <>
+
+
Completing Authentication
+
Connecting to {provider}...
+
+ )}
+
+ {status === 'success' && (
+ <>
+
+
Authentication Successful!
+
Successfully connected to {provider}.
+
+
+
+
+ )}
+
+ {status === 'error' && (
+ <>
+
+
Authentication Failed
+
{error || 'An error occurred during authentication'}
+
+
+ )}
+
+
+