@proveanything/smartlinks-auth-ui 0.1.9 → 0.1.11

package/dist/index.js

@@ -10667,8 +10667,21 @@ class AuthAPI {
             accountData: data.accountData,
         });
     }
-    async loginWithGoogle(idToken) {
-        return smartlinks__namespace.authKit.googleLogin(this.clientId, idToken);
+    async loginWithGoogle(token, options) {
+        this.log.log('loginWithGoogle called:', {
+            tokenType: options?.tokenType || 'id_token',
+            hasUserInfo: !!options?.googleUserInfo,
+            userEmail: options?.googleUserInfo?.email,
+            tokenLength: token?.length,
+        });
+        // Note: The SDK only supports ID tokens currently
+        // Access tokens from popup flow may fail with "Invalid or expired Google token"
+        if (options?.tokenType === 'access_token') {
+            this.log.warn('Warning: Popup flow sends access_token, but backend expects id_token. This may fail.');
+            this.log.warn('Consider using OneTap flow (default) or updating backend to handle access tokens.');
+        }
+        // Pass token to SDK - backend verifies with Google
+        return smartlinks__namespace.authKit.googleLogin(this.clientId, token);
     }
     async sendPhoneCode(phoneNumber) {
         return smartlinks__namespace.authKit.sendPhoneCode(this.clientId, phoneNumber);
@@ -11514,6 +11527,33 @@ const loadGoogleIdentityServices = () => {
         document.head.appendChild(script);
     });
 };
+// Helper to convert generic SDK errors to user-friendly messages
+const getFriendlyErrorMessage = (errorMessage) => {
+    // Check for common HTTP status codes in the error message
+    if (errorMessage.includes('status 400')) {
+        return 'Invalid request. Please check your input and try again.';
+    }
+    if (errorMessage.includes('status 401')) {
+        return 'Invalid credentials. Please check your email and password.';
+    }
+    if (errorMessage.includes('status 403')) {
+        return 'Access denied. You do not have permission to perform this action.';
+    }
+    if (errorMessage.includes('status 404')) {
+        return 'Account not found. Please check your email or create a new account.';
+    }
+    if (errorMessage.includes('status 409')) {
+        return 'This email is already registered.';
+    }
+    if (errorMessage.includes('status 429')) {
+        return 'Too many attempts. Please wait a moment and try again.';
+    }
+    if (errorMessage.includes('status 500') || errorMessage.includes('status 502') || errorMessage.includes('status 503')) {
+        return 'Server error. Please try again later.';
+    }
+    // Return original message if no pattern matches
+    return errorMessage;
+};
 const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAuthSuccess, onAuthError, enabledProviders = ['email', 'google', 'phone'], initialMode = 'login', redirectUrl, theme = 'auto', className, customization, skipConfigFetch = false, minimal = false, logger, }) => {
     const [mode, setMode] = React.useState(initialMode);
     const [loading, setLoading] = React.useState(false);
@@ -11530,6 +11570,7 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
     const [config, setConfig] = React.useState(null);
     const [configLoading, setConfigLoading] = React.useState(!skipConfigFetch);
     const [showEmailForm, setShowEmailForm] = React.useState(false); // Track if email form should be shown when emailDisplayMode is 'button'
+    const [sdkReady, setSdkReady] = React.useState(false); // Track SDK initialization state
     const log = React.useMemo(() => createLoggerWrapper(logger), [logger]);
     const api = new AuthAPI(apiEndpoint, clientId, clientName, logger);
     const auth = useAuth();
@@ -11550,6 +11591,7 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
     // IMPORTANT: Preserve bearer token during reinitialization
     React.useEffect(() => {
         log.log('SDK reinitialize useEffect triggered', { apiEndpoint });
+        setSdkReady(false); // Mark SDK as not ready during reinitialization
         const reinitializeWithToken = async () => {
             if (apiEndpoint) {
                 log.log('Reinitializing SDK with baseURL:', apiEndpoint);
@@ -11561,15 +11603,20 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
                     ngrokSkipBrowserWarning: true,
                     logger: logger, // Pass logger to SDK for verbose SDK logging
                 });
+                log.log('SDK reinitialized successfully');
                 // Restore bearer token after reinitialization using auth.verifyToken
                 if (currentToken) {
                     smartlinks__namespace.auth.verifyToken(currentToken).catch(err => {
                         log.warn('Failed to restore bearer token after reinit:', err);
                     });
                 }
+                // Mark SDK as ready
+                setSdkReady(true);
             }
             else {
-                log.log('No apiEndpoint, skipping SDK reinitialize');
+                log.log('No apiEndpoint, SDK already initialized by App');
+                // SDK was initialized by App component, mark as ready
+                setSdkReady(true);
             }
         };
         reinitializeWithToken();
@@ -11590,8 +11637,14 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
             clientId,
             clientIdType: typeof clientId,
             clientIdTruthy: !!clientId,
-            apiEndpoint
+            apiEndpoint,
+            sdkReady
         });
+        // Wait for SDK to be ready before fetching config
+        if (!sdkReady) {
+            log.log('SDK not ready yet, waiting...');
+            return;
+        }
         if (skipConfigFetch) {
             log.log('Skipping config fetch - skipConfigFetch is true');
             setConfig(customization || {});
@@ -11652,7 +11705,7 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
             }
         };
         fetchConfig();
-    }, [apiEndpoint, clientId, customization, skipConfigFetch, log]);
+    }, [apiEndpoint, clientId, customization, skipConfigFetch, sdkReady, log]);
     // Reset showEmailForm when mode changes away from login/register
     React.useEffect(() => {
         if (mode !== 'login' && mode !== 'register') {
@@ -11865,14 +11918,18 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
         }
         catch (err) {
             const errorMessage = err instanceof Error ? err.message : 'Authentication failed';
-            // Check if error is about email already registered
-            if (mode === 'register' && errorMessage.toLowerCase().includes('already') && errorMessage.toLowerCase().includes('email')) {
+            // Check if error is about email already registered (by content or 409 status code)
+            const isAlreadyRegistered = mode === 'register' && ((errorMessage.toLowerCase().includes('already') && errorMessage.toLowerCase().includes('email')) ||
+                errorMessage.includes('status 409'));
+            if (isAlreadyRegistered) {
                 setShowResendVerification(true);
                 setResendEmail(data.email);
                 setError('This email is already registered. If you didn\'t receive the verification email, you can resend it below.');
             }
             else {
-                setError(errorMessage);
+                // Try to extract a more meaningful error message from status codes
+                const friendlyMessage = getFriendlyErrorMessage(errorMessage);
+                setError(friendlyMessage);
             }
             onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
         }
@@ -11928,6 +11985,15 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
         const googleClientId = config?.googleClientId || DEFAULT_GOOGLE_CLIENT_ID;
         // Determine OAuth flow: default to 'oneTap' for better UX, but allow 'popup' for iframe compatibility
         const oauthFlow = config?.googleOAuthFlow || 'oneTap';
+        // Log Google Auth configuration for debugging
+        log.log('Google Auth initiated:', {
+            googleClientId,
+            oauthFlow,
+            currentOrigin: window.location.origin,
+            currentHref: window.location.href,
+            configGoogleClientId: config?.googleClientId,
+            usingDefaultClientId: !config?.googleClientId,
+        });
         setLoading(true);
         setError(undefined);
         try {
@@ -11937,35 +12003,87 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
             if (!google?.accounts) {
                 throw new Error('Google Identity Services failed to initialize');
             }
+            log.log('Google Identity Services loaded, using flow:', oauthFlow);
             if (oauthFlow === 'popup') {
                 // Use OAuth2 popup flow (works in iframes but requires popup permission)
                 if (!google.accounts.oauth2) {
                     throw new Error('Google OAuth2 not available');
                 }
+                log.log('Initializing Google OAuth2 popup flow:', {
+                    client_id: googleClientId,
+                    scope: 'openid email profile',
+                    origin: window.location.origin,
+                });
                 const client = google.accounts.oauth2.initTokenClient({
                     client_id: googleClientId,
                     scope: 'openid email profile',
                     callback: async (response) => {
                         try {
+                            log.log('Google OAuth2 popup callback received:', {
+                                hasAccessToken: !!response.access_token,
+                                hasIdToken: !!response.id_token,
+                                tokenType: response.token_type,
+                                expiresIn: response.expires_in,
+                                scope: response.scope,
+                                error: response.error,
+                                errorDescription: response.error_description,
+                            });
                             if (response.error) {
                                 throw new Error(response.error_description || response.error);
                             }
+                            // OAuth2 popup flow returns access_token, not id_token
+                            // We need to use the access token to get user info from Google
                             const accessToken = response.access_token;
-                            // Send access token to backend
-                            const authResponse = await api.loginWithGoogle(accessToken);
-                            if (authResponse.token) {
-                                auth.login(authResponse.token, authResponse.user, authResponse.accountData);
-                                setAuthSuccess(true);
-                                setSuccessMessage('Google login successful!');
-                                onAuthSuccess(authResponse.token, authResponse.user, authResponse.accountData);
+                            if (!accessToken) {
+                                throw new Error('No access token received from Google');
                             }
-                            else {
-                                throw new Error('Authentication failed - no token received');
+                            log.log('Fetching user info from Google using access token...');
+                            // Fetch user info from Google's userinfo endpoint
+                            const userInfoResponse = await fetch('https://www.googleapis.com/oauth2/v3/userinfo', {
+                                headers: {
+                                    'Authorization': `Bearer ${accessToken}`,
+                                },
+                            });
+                            if (!userInfoResponse.ok) {
+                                throw new Error('Failed to fetch user info from Google');
                             }
-                            if (redirectUrl) {
-                                setTimeout(() => {
-                                    window.location.href = redirectUrl;
-                                }, 2000);
+                            const userInfo = await userInfoResponse.json();
+                            log.log('Google user info retrieved:', {
+                                email: userInfo.email,
+                                name: userInfo.name,
+                                sub: userInfo.sub,
+                            });
+                            // For popup flow, send the access token to backend
+                            // Note: This may fail if backend only supports ID token verification
+                            try {
+                                const authResponse = await api.loginWithGoogle(accessToken, {
+                                    googleUserInfo: userInfo,
+                                    tokenType: 'access_token',
+                                });
+                                if (authResponse.token) {
+                                    auth.login(authResponse.token, authResponse.user, authResponse.accountData);
+                                    setAuthSuccess(true);
+                                    setSuccessMessage('Google login successful!');
+                                    onAuthSuccess(authResponse.token, authResponse.user, authResponse.accountData);
+                                }
+                                else {
+                                    throw new Error('Authentication failed - no token received');
+                                }
+                                if (redirectUrl) {
+                                    setTimeout(() => {
+                                        window.location.href = redirectUrl;
+                                    }, 2000);
+                                }
+                            }
+                            catch (apiError) {
+                                const errorMessage = apiError instanceof Error ? apiError.message : 'Google login failed';
+                                // Check if this is the access token vs ID token mismatch
+                                if (errorMessage.includes('Invalid or expired Google token')) {
+                                    log.error('Popup flow access token rejected by backend. Backend may only support ID tokens.');
+                                    log.error('User info retrieved from Google:', userInfo);
+                                    throw new Error('Google authentication failed. The popup flow may not be supported. Please try again or contact support.');
+                                }
+                                throw apiError;
                             }
                             setLoading(false);
                         }
@@ -11981,6 +12099,10 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
             }
             else {
                 // Use One Tap / Sign-In button flow (smoother UX but doesn't work in iframes)
+                log.log('Initializing Google OneTap flow:', {
+                    client_id: googleClientId,
+                    origin: window.location.origin,
+                });
                 google.accounts.id.initialize({
                     client_id: googleClientId,
                     callback: async (response) => {