@sudobility/building_blocks 0.0.28 → 0.0.30

package/dist/components/pages/index.d.ts

@@ -3,4 +3,4 @@ export type { AppSitemapPageProps, SitemapPageText, SitemapSection, SitemapLink,
 export { AppTextPage } from './app-text-page';
 export type { AppTextPageProps, TextPageContent, TextSection, TextSectionWithContent, TextSectionWithList, TextSectionWithSubsections, TextPageContact, TextPageContactInfo, GdprNotice, } from './app-text-page';
 export { LoginPage } from './login-page';
-export type { LoginPageProps, LoginPageText } from './login-page';
+export type { LoginPageProps, LoginPageText, AuthErrorInfo, } from './login-page';

package/dist/components/pages/login-page.d.ts

@@ -1,5 +1,16 @@
 import { type ReactNode } from 'react';
 import { type Auth } from 'firebase/auth';
+/**
+ * Auth error info passed to onAuthError callback
+ */
+export interface AuthErrorInfo {
+    /** Firebase error code (e.g., 'auth/popup-closed-by-user') */
+    code: string;
+    /** Error message */
+    message: string;
+    /** Whether this is a user-initiated action (like closing popup) vs actual error */
+    isUserAction: boolean;
+}
 /**
  * Props for the LoginPage component
  */
@@ -12,6 +23,8 @@ export interface LoginPageProps {
     auth: Auth;
     /** Callback fired on successful authentication */
     onSuccess: () => void;
+    /** Callback fired on auth errors - if provided, errors won't be shown inline */
+    onAuthError?: (error: AuthErrorInfo) => void;
     /** Whether to show Google sign-in option (default: true) */
     showGoogleSignIn?: boolean;
     /** Whether to show sign-up option (default: true) */
@@ -38,26 +51,4 @@ export interface LoginPageText {
     alreadyHaveAccount: string;
     dontHaveAccount: string;
 }
-/**
- * A reusable login page component with email/password and Google sign-in support.
- *
- * @example
- * ```tsx
- * import { LoginPage } from '@sudobility/building_blocks';
- * import { getFirebaseAuth } from '@sudobility/auth_lib';
- *
- * function MyLoginPage() {
- *   const navigate = useNavigate();
- *   const auth = getFirebaseAuth();
- *
- *   return (
- *     <LoginPage
- *       appName="My App"
- *       auth={auth}
- *       onSuccess={() => navigate('/')}
- *     />
- *   );
- * }
- * ```
- */
-export declare function LoginPage({ appName, logo, auth, onSuccess, showGoogleSignIn, showSignUp, className, primaryColorClass, }: LoginPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function LoginPage({ appName, logo, auth, onSuccess, onAuthError, showGoogleSignIn, showSignUp, className, primaryColorClass, }: LoginPageProps): import("react/jsx-runtime").JSX.Element;

package/dist/index.js

@@ -5193,11 +5193,17 @@ const defaultText = {
   alreadyHaveAccount: "Already have an account?",
   dontHaveAccount: "Don't have an account?"
 };
+const USER_ACTION_ERROR_CODES = [
+  "auth/popup-closed-by-user",
+  "auth/cancelled-popup-request",
+  "auth/user-cancelled"
+];
 function LoginPage({
   appName,
   logo,
   auth,
   onSuccess,
+  onAuthError,
   showGoogleSignIn = true,
   showSignUp = true,
   className = "",
@@ -5208,6 +5214,33 @@ function LoginPage({
   const [password, setPassword] = useState("");
   const [error, setError] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
+  const [isGoogleSignInPending, setIsGoogleSignInPending] = useState(false);
+  const googleSignInStartTime = useRef(null);
+  useEffect(() => {
+    const handleFocus = () => {
+      if (isGoogleSignInPending && googleSignInStartTime.current) {
+        const elapsed = Date.now() - googleSignInStartTime.current;
+        if (elapsed > 2e3) {
+          setIsLoading(false);
+          setIsGoogleSignInPending(false);
+          googleSignInStartTime.current = null;
+        }
+      }
+    };
+    window.addEventListener("focus", handleFocus);
+    return () => window.removeEventListener("focus", handleFocus);
+  }, [isGoogleSignInPending]);
+  const handleAuthError = (err) => {
+    const firebaseError = err;
+    const code = firebaseError.code || "unknown";
+    const message = firebaseError.message || "Authentication failed";
+    const isUserAction = USER_ACTION_ERROR_CODES.includes(code);
+    if (onAuthError) {
+      onAuthError({ code, message, isUserAction });
+    } else if (!isUserAction) {
+      setError(message);
+    }
+  };
   const handleSubmit = async (e) => {
     e.preventDefault();
     setError(null);
@@ -5221,7 +5254,7 @@ function LoginPage({
       }
       onSuccess();
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Authentication failed");
+      handleAuthError(err);
     } finally {
       setIsLoading(false);
     }
@@ -5229,15 +5262,19 @@ function LoginPage({
   const handleGoogleSignIn = async () => {
     setError(null);
     setIsLoading(true);
+    setIsGoogleSignInPending(true);
+    googleSignInStartTime.current = Date.now();
     try {
       if (!auth) throw new Error("Firebase not configured");
       const provider = new GoogleAuthProvider();
       await signInWithPopup(auth, provider);
       onSuccess();
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Google sign-in failed");
+      handleAuthError(err);
     } finally {
       setIsLoading(false);
+      setIsGoogleSignInPending(false);
+      googleSignInStartTime.current = null;
     }
   };
   const text = defaultText;