Add oauth callback

Author: thiva-k

packages/react-router/src/components/Callback.tsx

@@ -0,0 +1,89 @@
+/**
+ * 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.
+ */
+
+import {FC} from 'react';
+import {useNavigate, useLocation} from 'react-router';
+import {BaseCallback} from '@asgardeo/react';
+
+/**
+ * Props for the Callback component.
+ */
+export interface CallbackProps {
+  /**
+   * Callback function called when an error occurs during OAuth processing.
+   * @param error - The error that occurred
+   */
+  onError?: (error: Error) => void;
+
+  /**
+   * Optional custom navigation handler.
+   * If provided, this will be called instead of the default navigate() behavior.
+   * Useful for apps that need custom navigation logic.
+   * @param path - The path to navigate to
+   */
+  onNavigate?: (path: string) => void;
+}
+
+/**
+ * Handles OAuth callback redirects for React Router applications.
+ * Processes authorization code, validates CSRF state, and navigates back to the original path.
+ * Automatically handles React Router basename when configured.
+ *
+ * @example
+ * ```tsx
+ * <Route path="/callback" element={<Callback />} />
+ * ```
+ */
+const Callback: FC<CallbackProps> = ({
+  onError,
+  onNavigate,
+}) => {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const handleNavigate = (path: string): void => {
+    if (onNavigate) {
+      onNavigate(path);
+      return;
+    }
+
+    const fullPath = window.location.pathname;
+    const relativePath = location.pathname;
+    const basename = fullPath.endsWith(relativePath)
+      ? fullPath.slice(0, -relativePath.length).replace(/\/$/, '')
+      : '';
+
+    const navigationPath = basename && path.startsWith(basename)
+      ? path.slice(basename.length) || '/'
+      : path;
+
+    navigate(navigationPath);
+  };
+
+  return (
+    <BaseCallback
+      onNavigate={handleNavigate}
+      onError={onError || ((error: Error) => {
+        // eslint-disable-next-line no-console
+        console.error('OAuth callback error:', error);
+      })}
+    />
+  );
+};
+
+export default Callback;

packages/react-router/src/index.ts

@@ -18,3 +18,6 @@
 
 export {default as ProtectedRoute} from './components/ProtectedRoute';
 export * from './components/ProtectedRoute';
+
+export {default as Callback} from './components/Callback';
+export * from './components/Callback';

packages/react/src/components/auth/Callback/BaseCallback.tsx

@@ -0,0 +1,169 @@
+/**
+ * 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.
+ */
+
+import {FC, useEffect, useRef} from 'react';
+
+/**
+ * Props for BaseCallback component
+ */
+export interface BaseCallbackProps {
+  /**
+   * Function to navigate to a different path
+   */
+  onNavigate: (path: string) => void;
+
+  /**
+   * Callback function called when an error occurs
+   */
+  onError?: (error: Error) => void;
+}
+
+/**
+ * BaseCallback is a headless component that handles OAuth callback parameter forwarding.
+ * This component extracts OAuth parameters (code, state, error) from the URL and forwards them
+ * to the original component that initiated the OAuth flow.
+ *
+ * This component is framework-agnostic and should be wrapped by framework-specific
+ * implementations that provide navigation functions.
+ *
+ * Flow: Extract OAuth parameters from URL -> Parse state parameter -> Redirect to original path with parameters
+ *
+ * The original component (SignIn/AcceptInvite) is responsible for:
+ * - Processing the OAuth code via the SDK
+ * - Calling /flow/execute
+ * - Handling the assertion and auth/callback POST
+ * - Managing the authenticated session
+ */
+export const BaseCallback: FC<BaseCallbackProps> = ({
+  onNavigate,
+  onError,
+}) => {
+  // Prevent double execution in React Strict Mode
+  const processingRef = useRef(false);
+
+  useEffect(() => {
+    const processOAuthCallback = (): void => {
+      // Guard against double execution
+      if (processingRef.current) {
+        return;
+      }
+      processingRef.current = true;
+
+      // Declare variables outside try block for use in catch
+      var returnPath = '/';
+
+      try {
+        // 1. Extract OAuth parameters from URL
+        const urlParams = new URLSearchParams(window.location.search);
+        const code = urlParams.get('code');
+        const state = urlParams.get('state');
+        const nonce = urlParams.get('nonce');
+        const oauthError = urlParams.get('error');
+        const errorDescription = urlParams.get('error_description');
+
+        // 2. Validate and retrieve OAuth state from sessionStorage
+        if (!state) {
+          throw new Error('Missing OAuth state parameter - possible security issue');
+        }
+
+        const storedData = sessionStorage.getItem(`asgardeo_oauth_${state}`);
+        if (!storedData) {
+          // If state not found, might be an error callback - try to handle gracefully
+          if (oauthError) {
+            const errorMsg = errorDescription || oauthError || 'OAuth authentication failed';
+            const err = new Error(errorMsg);
+            onError?.(err);
+
+            const params = new URLSearchParams();
+            params.set('error', oauthError);
+            if (errorDescription) {
+              params.set('error_description', errorDescription);
+            }
+
+            onNavigate(`/?${params.toString()}`);
+            return;
+          }
+          throw new Error('Invalid OAuth state - possible CSRF attack');
+        }
+
+        const { path, timestamp } = JSON.parse(storedData);
+        returnPath = path || '/';
+
+        // 3. Validate state freshness
+        const MAX_STATE_AGE = 600000; // 10 minutes
+        if (Date.now() - timestamp > MAX_STATE_AGE) {
+          sessionStorage.removeItem(`asgardeo_oauth_${state}`);
+          throw new Error('OAuth state expired - please try again');
+        }
+
+        // 4. Clean up state
+        sessionStorage.removeItem(`asgardeo_oauth_${state}`);
+
+        // 5. Handle OAuth error response
+        if (oauthError) {
+          const errorMsg = errorDescription || oauthError || 'OAuth authentication failed';
+          const err = new Error(errorMsg);
+          onError?.(err);
+
+          const params = new URLSearchParams();
+          params.set('error', oauthError);
+          if (errorDescription) {
+            params.set('error_description', errorDescription);
+          }
+
+          onNavigate(`${returnPath}?${params.toString()}`);
+          return;
+        }
+
+        // 6. Validate required parameters
+        if (!code) {
+          throw new Error('Missing OAuth authorization code');
+        }
+
+        // 7. Forward OAuth code to original component
+        // The component (SignIn/AcceptInvite) will retrieve flowId/authId from sessionStorage
+        const params = new URLSearchParams();
+        params.set('code', code);
+        if (nonce) {
+          params.set('nonce', nonce);
+        }
+
+        onNavigate(`${returnPath}?${params.toString()}`);
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : 'OAuth callback processing failed';
+        console.error('OAuth callback error:', err);
+
+        onError?.(err instanceof Error ? err : new Error(errorMessage));
+
+        // Redirect back with OAuth error format
+        const params = new URLSearchParams();
+        params.set('error', 'callback_error');
+        params.set('error_description', errorMessage);
+
+        onNavigate(`${returnPath}?${params.toString()}`);
+      }
+    };
+
+    processOAuthCallback();
+  }, [onNavigate, onError]);
+
+  // Headless component - no UI, just processing logic
+  return null;
+};
+
+export default BaseCallback;

packages/react/src/components/presentation/auth/AcceptInvite/v2/AcceptInvite.tsx

@@ -184,22 +184,22 @@ const AcceptInvite: FC<AcceptInviteProps> = ({
     return '';
   }, [baseUrl]);
 
-  /**
-   * Submit flow step data.
-   * Makes an unauthenticated request to /flow/execute endpoint.
-   */
-  const handleSubmit = async (payload: Record<string, any>): Promise<AcceptInviteFlowResponse> => {
-    const response: any = await fetch(`${apiBaseUrl}/flow/execute`, {
-      body: JSON.stringify({
-        ...payload,
-        verbose: true,
-      }),
-      headers: {
-        Accept: 'application/json',
-        'Content-Type': 'application/json',
-      },
-      method: 'POST',
-    });
+    /**
+     * Submit flow step data.
+     * Makes an unauthenticated request to /flow/execute endpoint.
+     */
+    const handleSubmit = async (payload: Record<string, any>): Promise<AcceptInviteFlowResponse> => {
+        const response = await fetch(`${apiBaseUrl}/flow/execute`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                Accept: 'application/json',
+            },
+            body: JSON.stringify({
+                ...payload,
+                verbose: true,
+            }),
+        });
 
     if (!response.ok) {
       const errorText: any = await response.text();