feat: Implement OAuth callback handling; add handleOAuthCallbackAction and integrate with AsgardeoProvider

Author: brionmario

packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx

@@ -27,7 +27,7 @@ import {
 } from '@asgardeo/node';
 import {I18nProvider, FlowProvider, UserProvider, ThemeProvider, AsgardeoProviderProps} from '@asgardeo/react';
 import {FC, PropsWithChildren, useEffect, useMemo, useState} from 'react';
-import {useRouter} from 'next/navigation';
+import {useRouter, useSearchParams} from 'next/navigation';
 import AsgardeoContext, {AsgardeoContextProps} from './AsgardeoContext';
 
 /**
@@ -38,6 +38,7 @@ export type AsgardeoClientProviderProps = Partial<Omit<AsgardeoProviderProps, 'b
     signOut: AsgardeoContextProps['signOut'];
     signIn: AsgardeoContextProps['signIn'];
     signUp: AsgardeoContextProps['signUp'];
+    handleOAuthCallback: (code: string, state: string, sessionState?: string) => Promise<{success: boolean; error?: string; redirectUrl?: string}>;
     isSignedIn: boolean;
     userProfile: UserProfile;
     user: User | null;
@@ -49,6 +50,7 @@ const AsgardeoClientProvider: FC<PropsWithChildren<AsgardeoClientProviderProps>>
   signIn,
   signOut,
   signUp,
+  handleOAuthCallback,
   preferences,
   isSignedIn,
   signInUrl,
@@ -57,10 +59,61 @@ const AsgardeoClientProvider: FC<PropsWithChildren<AsgardeoClientProviderProps>>
   userProfile,
 }: PropsWithChildren<AsgardeoClientProviderProps>) => {
   const router = useRouter();
+  const searchParams = useSearchParams();
   const [isDarkMode, setIsDarkMode] = useState(false);
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [_userProfile, setUserProfile] = useState<UserProfile | null>(userProfile);
 
+  // Handle OAuth callback automatically
+  useEffect(() => {
+    // Don't handle callback if already signed in
+    if (isSignedIn) return;
+
+    const processOAuthCallback = async () => {
+      try {
+        const code = searchParams.get('code');
+        const state = searchParams.get('state');
+        const sessionState = searchParams.get('session_state');
+        const error = searchParams.get('error');
+        const errorDescription = searchParams.get('error_description');
+
+        // Check for OAuth errors first
+        if (error) {
+          console.error('[AsgardeoClientProvider] OAuth error:', error, errorDescription);
+          // Redirect to sign-in page with error
+          router.push(`/signin?error=${encodeURIComponent(error)}&error_description=${encodeURIComponent(errorDescription || '')}`);
+          return;
+        }
+
+        // Handle OAuth callback if code and state are present
+        if (code && state) {
+          console.log('[AsgardeoClientProvider] Handling OAuth callback');
+          setIsLoading(true);
+          
+          const result = await handleOAuthCallback(code, state, sessionState || undefined);
+          
+          if (result.success) {
+            // Redirect to the success URL
+            if (result.redirectUrl) {
+              router.push(result.redirectUrl);
+            } else {
+              // Refresh the page to update authentication state
+              window.location.reload();
+            }
+          } else {
+            console.error('[AsgardeoClientProvider] OAuth callback failed:', result.error);
+            router.push(`/signin?error=authentication_failed&error_description=${encodeURIComponent(result.error || 'Authentication failed')}`);
+          }
+        }
+      } catch (error) {
+        console.error('[AsgardeoClientProvider] Failed to handle OAuth callback:', error);
+        router.push('/signin?error=authentication_failed');
+      }
+    };
+
+    processOAuthCallback();
+  }, [searchParams, router, isSignedIn, handleOAuthCallback]);
+
   useEffect(() => {
     if (!preferences?.theme?.mode || preferences.theme.mode === 'system') {
       setIsDarkMode(window.matchMedia('(prefers-color-scheme: dark)').matches);

packages/nextjs/src/index.ts

@@ -24,6 +24,8 @@ export * from './client/contexts/Asgardeo/useAsgardeo';
 
 export {default as isSignedIn} from './server/actions/isSignedIn';
 
+export {default as handleOAuthCallback} from './server/actions/handleOAuthCallbackAction';
+
 export {default as SignedIn} from './client/components/control/SignedIn/SignedIn';
 export {SignedInProps} from './client/components/control/SignedIn/SignedIn';
 

packages/nextjs/src/server/AsgardeoProvider.tsx

@@ -28,6 +28,7 @@ import getUserAction from './actions/getUserAction';
 import getSessionId from './actions/getSessionId';
 import getUserProfileAction from './actions/getUserProfileAction';
 import signUpAction from './actions/signUpAction';
+import handleOAuthCallbackAction from './actions/handleOAuthCallbackAction';
 
 /**
  * Props interface of {@link AsgardeoServerProvider}
@@ -100,6 +101,7 @@ const AsgardeoServerProvider: FC<PropsWithChildren<AsgardeoServerProviderProps>>
       signIn={signInAction}
       signOut={signOutAction}
       signUp={signUpAction}
+      handleOAuthCallback={handleOAuthCallbackAction}
       signInUrl={config.signInUrl}
       signUpUrl={config.signUpUrl}
       preferences={config.preferences}

packages/nextjs/src/server/actions/handleOAuthCallbackAction.ts

@@ -0,0 +1,102 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+'use server';
+
+import { cookies } from 'next/headers';
+import { CookieConfig } from '@asgardeo/node';
+import AsgardeoNextClient from '../../AsgardeoNextClient';
+
+/**
+ * Server action to handle OAuth callback with authorization code.
+ * This action processes the authorization code received from the OAuth provider
+ * and exchanges it for tokens to complete the authentication flow.
+ *
+ * @param code - Authorization code from OAuth provider
+ * @param state - State parameter from OAuth provider for CSRF protection
+ * @param sessionState - Session state parameter from OAuth provider
+ * @returns Promise that resolves with success status and optional error message
+ */
+const handleOAuthCallbackAction = async (
+  code: string,
+  state: string,
+  sessionState?: string
+): Promise<{
+  success: boolean;
+  error?: string;
+  redirectUrl?: string;
+}> => {
+  try {
+    if (!code || !state) {
+      return {
+        success: false,
+        error: 'Missing required OAuth parameters: code and state are required'
+      };
+    }
+
+    // Get the Asgardeo client instance
+    const asgardeoClient = AsgardeoNextClient.getInstance();
+
+    if (!asgardeoClient.isInitialized) {
+      return {
+        success: false,
+        error: 'Asgardeo client is not initialized'
+      };
+    }
+
+    // Get the session ID from cookies
+    const cookieStore = await cookies();
+    const sessionId = cookieStore.get(CookieConfig.SESSION_COOKIE_NAME)?.value;
+
+    if (!sessionId) {
+      return {
+        success: false,
+        error: 'No session found. Please start the authentication flow again.'
+      };
+    }
+
+    // Exchange the authorization code for tokens
+    await asgardeoClient.signIn(
+      {
+        code,
+        session_state: sessionState,
+        state,
+      } as any,
+      {},
+      sessionId
+    );
+
+    // Get the after sign-in URL from configuration
+    const config = await asgardeoClient.getConfiguration();
+    const afterSignInUrl = config.afterSignInUrl || '/';
+
+    return {
+      success: true,
+      redirectUrl: afterSignInUrl
+    };
+  } catch (error) {
+    console.error('[handleOAuthCallbackAction] OAuth callback error:', error);
+    
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : 'Authentication failed'
+    };
+  }
+};
+
+export default handleOAuthCallbackAction;

packages/nextjs/src/server/actions/signInAction.ts

@@ -73,9 +73,6 @@ const signInAction = async (
 
       return {success: true, data: {signInUrl: String(defaultSignInUrl)}};
     } else {
-      console.log('[signInAction] Handling embedded sign-in flow with payload:', payload);
-      console.log('[signInAction] Request config:', request);
-      console.log('[signInAction] User ID:', userId);
       const response: any = await client.signIn(payload, request!, userId);
 
       if (response.flowStatus === EmbeddedSignInFlowStatus.SuccessCompleted) {