Improve login UI with error handling and callback page

crawler/frontend/src/auth/authService.ts

@@ -1,11 +1,36 @@
 import { User, UserManager } from 'oidc-client-ts';
 import { oidcConfig } from './config';
+import { parseOidcError, type AuthError } from './errors';
 
 const userManager = new UserManager(oidcConfig);
 
-export const login = () => userManager.signinRedirect();
-export const logout = () => userManager.signoutRedirect();
-export const handleCallback = () => userManager.signinRedirectCallback();
+export const login = async (): Promise<void> => {
+    try {
+        await userManager.signinRedirect();
+    } catch (error) {
+        console.error('Login redirect failed:', error);
+        throw parseOidcError(error);
+    }
+};
+
+export const logout = async (): Promise<void> => {
+    try {
+        await userManager.signoutRedirect();
+    } catch (error) {
+        console.error('Logout redirect failed:', error);
+        throw parseOidcError(error);
+    }
+};
+
+export const handleCallback = async (): Promise<User> => {
+    try {
+        const user = await userManager.signinRedirectCallback();
+        return user;
+    } catch (error) {
+        console.error('Callback handling failed:', error);
+        throw parseOidcError(error);
+    }
+};
 
 export const getUser = async (): Promise<User | null> => {
     try {
@@ -16,3 +41,5 @@ export const getUser = async (): Promise<User | null> => {
         return null;
     }
 };
+
+export type { AuthError };

crawler/frontend/src/auth/errors.ts

@@ -0,0 +1,60 @@
+export enum AuthErrorType {
+  REDIRECT_FAILED = 'REDIRECT_FAILED',
+  CALLBACK_FAILED = 'CALLBACK_FAILED',
+  NETWORK_ERROR = 'NETWORK_ERROR',
+  USER_CANCELLED = 'USER_CANCELLED',
+}
+
+export interface AuthError {
+  type: AuthErrorType;
+  message: string;
+  retryable: boolean;
+}
+
+export function parseOidcError(error: unknown): AuthError {
+  const errorMessage = error instanceof Error ? error.message : String(error);
+  const errorString = errorMessage.toLowerCase();
+
+  // Check for popup/redirect blocked errors
+  if (errorString.includes('popup') || errorString.includes('blocked') || errorString.includes('window')) {
+    return {
+      type: AuthErrorType.REDIRECT_FAILED,
+      message: 'Unable to redirect. Please check if popups are blocked.',
+      retryable: true,
+    };
+  }
+
+  // Check for user cancellation
+  if (errorString.includes('cancel') || errorString.includes('closed') || errorString.includes('denied')) {
+    return {
+      type: AuthErrorType.USER_CANCELLED,
+      message: 'Sign in was cancelled.',
+      retryable: true,
+    };
+  }
+
+  // Check for network errors
+  if (errorString.includes('network') || errorString.includes('fetch') || errorString.includes('timeout') || errorString.includes('failed to fetch')) {
+    return {
+      type: AuthErrorType.NETWORK_ERROR,
+      message: 'Unable to reach authentication server. Please check your connection.',
+      retryable: true,
+    };
+  }
+
+  // Check for callback/state errors
+  if (errorString.includes('state') || errorString.includes('invalid') || errorString.includes('mismatch') || errorString.includes('no matching state')) {
+    return {
+      type: AuthErrorType.CALLBACK_FAILED,
+      message: 'Login verification failed. Please try again.',
+      retryable: true,
+    };
+  }
+
+  // Default error
+  return {
+    type: AuthErrorType.CALLBACK_FAILED,
+    message: errorMessage || 'An unexpected error occurred during sign in.',
+    retryable: true,
+  };
+}