feat(oauth): add error boundaries for OAuth authentication components

- Create comprehensive OAuthErrorBoundary component with fallback UI
- Add proper TypeScript interfaces for error boundary props and state
- Wrap Login page OAuth provider buttons with error boundary
- Wrap AuthCallback component with error boundary for complete coverage
- Implement graceful error handling with user-friendly error messages
- Add retry functionality and navigation options in error states
- Follow project conventions for logging, styling, and component structure

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: RonenMars

src/components/atoms/index.ts

@@ -12,6 +12,7 @@ export { Link } from "@components/atoms/link";
 export { Loader } from "@components/atoms/loader";
 export { MermaidDiagram } from "@components/atoms/mermaidDiagram";
 export { LogoCatLarge } from "@components/atoms/logoCatLarge";
+export { OAuthErrorBoundary } from "@components/atoms/oauthErrorBoundary";
 export { PageTitle } from "@components/atoms/pageTitle";
 export { SearchInput } from "@components/atoms/searchInput";
 export { SecretInput } from "@components/atoms/secretInput";

src/components/atoms/oauthErrorBoundary.tsx

@@ -0,0 +1,85 @@
+import React, { Component } from "react";
+
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+
+import { homepageURL } from "@constants/global.constants";
+import { OAuthErrorBoundaryProps, OAuthErrorBoundaryState } from "@interfaces/components";
+import { LoggerService } from "@services";
+
+const OAuthErrorFallback = ({ error, resetError }: { error?: Error; resetError?: () => void }) => {
+	const { t } = useTranslation("global", { keyPrefix: "oauthError" });
+
+	return (
+		<div className="flex w-full flex-1 flex-col items-center justify-center py-5">
+			<div className="mt-16 font-fira-code text-lg text-error">
+				{t("authenticationError", "Authentication Error")}
+			</div>
+			<div className="mt-4 max-w-md text-center font-fira-code text-sm text-gray-600">
+				{t("errorMessage", "An error occurred during authentication. Please try again.")}
+			</div>
+			{error?.message ? (
+				<div className="mt-2 max-w-md text-center font-fira-code text-xs text-gray-500">{error.message}</div>
+			) : null}
+			<div className="mt-6 flex gap-4">
+				{resetError ? (
+					<button
+						className="rounded bg-blue-500 px-4 py-2 font-fira-code text-sm text-white hover:opacity-80"
+						onClick={resetError}
+						type="button"
+					>
+						{t("tryAgain", "Try Again")}
+					</button>
+				) : null}
+				<Link
+					className="rounded border border-gray-300 px-4 py-2 font-fira-code text-sm text-gray-700 hover:bg-gray-1100"
+					to={homepageURL}
+				>
+					{t("goHome", "Go Home")}
+				</Link>
+			</div>
+		</div>
+	);
+};
+
+export class OAuthErrorBoundary extends Component<OAuthErrorBoundaryProps, OAuthErrorBoundaryState> {
+	constructor(props: OAuthErrorBoundaryProps) {
+		super(props);
+		this.state = { hasError: false };
+	}
+
+	static getDerivedStateFromError(error: Error): OAuthErrorBoundaryState {
+		return { hasError: true, error };
+	}
+
+	componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+		const { onError } = this.props;
+
+		LoggerService.error(
+			"auth.oauth.boundary",
+			`OAuth component error: ${error.message}, Stack: ${error.stack}, Component Stack: ${errorInfo.componentStack}`,
+			true
+		);
+
+		onError?.(error, errorInfo);
+	}
+
+	resetErrorBoundary = () => {
+		this.setState({ hasError: false, error: undefined });
+	};
+
+	render() {
+		const { hasError, error } = this.state;
+		const { fallback, children } = this.props;
+
+		if (hasError) {
+			if (fallback) {
+				return fallback;
+			}
+
+			return <OAuthErrorFallback error={error} resetError={this.resetErrorBoundary} />;
+		}
+
+		return children;
+	}
+}

src/components/pages/authCallback.tsx

@@ -6,13 +6,15 @@ import { useLocation } from "react-router-dom";
 import { isDevelopment } from "@constants/global.constants";
 import { LoggerService } from "@services";
 
+import { OAuthErrorBoundary } from "@components/atoms";
+
 interface OAuthExchangeResult {
 	ok: boolean;
 	data?: unknown;
 	error?: string;
 }
 
-export const AuthCallback = () => {
+const AuthCallbackContent = () => {
 	const location = useLocation();
 	const sdk = useDescope();
 	const [responseData, setResponseData] = useState<OAuthExchangeResult | null>(null);
@@ -188,3 +190,11 @@ export const AuthCallback = () => {
 		</div>
 	);
 };
+
+export const AuthCallback = () => {
+	return (
+		<OAuthErrorBoundary>
+			<AuthCallbackContent />
+		</OAuthErrorBoundary>
+	);
+};

src/components/pages/login.tsx

@@ -9,7 +9,7 @@ import { LoggerService } from "@services";
 import { LoginPageProps } from "@src/interfaces/components";
 import { validateOAuthRedirectURL } from "@utilities/validateUrl.utils";
 
-import { AHref, IconSvg, Loader } from "@components/atoms";
+import { AHref, IconSvg, Loader, OAuthErrorBoundary } from "@components/atoms";
 import { OAuthProviderButton } from "@components/molecules";
 
 import { AKRoundLogo } from "@assets/image";
@@ -123,11 +123,18 @@ const Login = ({ handleSuccess, isLoggingIn }: LoginPageProps) => {
 						{isLoggingIn ? (
 							<Loader className="h-36" size="md" />
 						) : (
-							<div className="flex flex-col gap-3">
-								{oauthProviders.map(({ id, label }) => (
-									<OAuthProviderButton id={id} key={id} label={label} onClick={handleOAuthStart} />
-								))}
-							</div>
+							<OAuthErrorBoundary>
+								<div className="flex flex-col gap-3">
+									{oauthProviders.map(({ id, label }) => (
+										<OAuthProviderButton
+											id={id}
+											key={id}
+											label={label}
+											onClick={handleOAuthStart}
+										/>
+									))}
+								</div>
+							</OAuthErrorBoundary>
 						)}
 					</div>
 				</div>

src/interfaces/components/index.ts

@@ -91,6 +91,7 @@ export type { ResizeButtonProps } from "./resizeButton.interface";
 export type { ChatbotToolbarProps } from "./chatbotToolbar.interface";
 export type { ChatbotLoadingStatesProps } from "./chatbotLoadingStates.interface";
 export type { CodeFixDiffEditorProps } from "./codeFixDiffEditor.interface";
+export type { OAuthErrorBoundaryProps, OAuthErrorBoundaryState } from "./oauthErrorBoundary.interface";
 
 // Integration component interfaces
 export * from "./integrations";

src/interfaces/components/oauthErrorBoundary.interface.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+
+export interface OAuthErrorBoundaryProps {
+	children: ReactNode;
+	fallback?: ReactNode;
+	onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+
+export interface OAuthErrorBoundaryState {
+	hasError: boolean;
+	error?: Error;
+}