@proveanything/smartlinks-auth-ui 0.1.0 → 0.1.1

package/README.md

@@ -23,10 +23,21 @@ npm install @smartlinks/auth-ui
 
 ## Quick Start
 
-### Basic Usage with Session Management
+### 1. Import the CSS (Required!)
+
+Add this import to your app's entry point (e.g., `main.tsx`, `index.tsx`, or `App.tsx`):
+
+```tsx
+import '@smartlinks/auth-ui/dist/index.css';
+```
+
+**Important**: Without this CSS import, the authentication UI will not be styled correctly.
+
+### 2. Basic Usage with Session Management
 
 ```tsx
 import { SmartlinksAuthUI, AuthProvider, useAuth } from '@smartlinks/auth-ui';
+import '@smartlinks/auth-ui/dist/index.css'; // Don't forget this!
 
 function App() {
   return (
@@ -298,24 +309,111 @@ Response:
 
 ## Styling
 
-The component uses CSS modules and can be customized:
+### CSS Import (Required)
+
+The module requires you to import the CSS file for proper styling:
+
+```tsx
+import '@smartlinks/auth-ui/dist/index.css';
+```
+
+Add this to your app's entry point (`main.tsx`, `index.tsx`, or `App.tsx`).
+
+### Theme Support
+
+The component supports light and dark themes:
 
 ```tsx
 <SmartlinksAuthUI
   apiEndpoint="https://api.smartlinks.com"
   clientId="your-client-123"
   onAuthSuccess={handleAuth}
-  className="custom-auth-container"
-  theme="dark"
+  theme="dark"  // or "light" (default)
 />
 ```
 
+### Custom Styling
+
+You can customize the appearance by:
+
+1. **Using the customization prop** (recommended):
+```tsx
+<SmartlinksAuthUI
+  customization={{
+    branding: {
+      primaryColor: "#6366f1",
+      secondaryColor: "#4f46e5",
+      backgroundColor: "#f0f9ff",
+      fontFamily: "Inter, sans-serif"
+    }
+  }}
+/>
+```
+
+2. **Overriding CSS classes** in your own stylesheet:
+```css
+/* In your app's CSS file */
+.auth-container {
+  /* Your custom styles */
+}
+
+.auth-button-primary {
+  /* Your custom button styles */
+}
+```
+
+3. **Using CSS custom properties** for quick theming:
+```css
+.auth-container {
+  --auth-primary-color: #6366f1;
+  --auth-bg-color: #f0f9ff;
+  --auth-font-family: "Inter", sans-serif;
+}
+```
+
+## Troubleshooting
+
+### Styles Not Appearing
+
+**Problem**: The authentication UI appears unstyled or has no layout.
+
+**Solution**: Make sure you've imported the CSS file:
+```tsx
+import '@smartlinks/auth-ui/dist/index.css';
+```
+
+This import should be at the top of your app's entry point (before your component imports).
+
+### Build Errors
+
+**Problem**: `Cannot find module '@smartlinks/auth-ui/dist/index.css'`
+
+**Solution**: 
+1. Verify the package is installed: `npm install @smartlinks/auth-ui`
+2. Ensure your bundler (Vite, Webpack) supports CSS imports
+3. Try clearing your node_modules and reinstalling
+
+### TypeScript Errors
+
+**Problem**: Type errors when using the components.
+
+**Solution**: The package includes TypeScript definitions. Make sure:
+```tsx
+import type { AuthUser, AuthToken, AuthProvider } from '@smartlinks/auth-ui';
+```
+
 ## TypeScript Support
 
 Full TypeScript definitions included:
 
 ```tsx
-import type { AuthUser, AuthToken, AuthProvider } from '@smartlinks/auth-ui';
+import type { 
+  AuthUser, 
+  AuthToken, 
+  AuthProvider,
+  AuthUIConfig,
+  SmartlinksAuthUIProps 
+} from '@smartlinks/auth-ui';
 ```
 
 ## License

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAQnD,OAAO,KAAK,EAAE,qBAAqB,EAAyC,MAAM,SAAS,CAAC;AAE5F,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAwnB5D,CAAC;AAGF,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGpD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAG3D,mBAAmB,SAAS,CAAC;AAG7B,OAAO,EAAE,gBAAgB,IAAI,cAAc,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAQnD,OAAO,KAAK,EAAE,qBAAqB,EAAyC,MAAM,SAAS,CAAC;AAK5F,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA+sB5D,CAAC;AAGF,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGpD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAG3D,mBAAmB,SAAS,CAAC;AAG7B,OAAO,EAAE,gBAAgB,IAAI,cAAc,EAAE,CAAC"}

package/dist/index.esm.js

@@ -378,6 +378,8 @@ const AuthUIPreview = ({ customization, enabledProviders = ['email', 'google', '
     return (jsxs(AuthContainer, { theme: theme, className: className, config: customization, children: [showEmail && (jsxs("div", { className: "auth-form", children: [jsxs("div", { className: "auth-form-group", children: [jsx("label", { className: "auth-label", children: "Email" }), jsx("input", { type: "email", className: "auth-input", placeholder: "Enter your email", disabled: true })] }), jsxs("div", { className: "auth-form-group", children: [jsx("label", { className: "auth-label", children: "Password" }), jsx("input", { type: "password", className: "auth-input", placeholder: "Enter your password", disabled: true })] }), jsx("button", { className: "auth-button auth-button-primary", disabled: true, children: "Sign In" }), jsx("div", { style: { textAlign: 'center', marginTop: '1rem' }, children: jsx("button", { className: "auth-link", disabled: true, children: "Forgot password?" }) }), jsxs("div", { style: { textAlign: 'center', marginTop: '0.5rem', fontSize: '0.875rem', color: 'var(--auth-text-muted, #6B7280)' }, children: ["Don't have an account?", ' ', jsx("button", { className: "auth-link", disabled: true, children: "Sign up" })] })] })), hasProviders && (jsxs(Fragment, { children: [showEmail && (jsx("div", { className: "auth-or-divider", children: jsx("span", { children: "or continue with" }) })), jsxs("div", { className: "auth-provider-buttons", children: [showGoogle && (jsxs("button", { className: "auth-provider-button", disabled: true, children: [jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", children: [jsx("path", { d: "M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.874 2.684-6.615z", fill: "#4285F4" }), jsx("path", { d: "M9 18c2.43 0 4.467-.806 5.956-2.183l-2.908-2.259c-.806.54-1.837.86-3.048.86-2.344 0-4.328-1.584-5.036-3.711H.957v2.332C2.438 15.983 5.482 18 9 18z", fill: "#34A853" }), jsx("path", { d: "M3.964 10.707c-.18-.54-.282-1.117-.282-1.707 0-.593.102-1.167.282-1.707V4.961H.957C.347 6.175 0 7.548 0 9s.348 2.825.957 4.039l3.007-2.332z", fill: "#FBBC05" }), jsx("path", { d: "M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0 5.482 0 2.438 2.017.957 4.958L3.964 7.29C4.672 5.163 6.656 3.58 9 3.58z", fill: "#EA4335" })] }), jsx("span", { children: "Google" })] })), showPhone && (jsxs("button", { className: "auth-provider-button", disabled: true, children: [jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsx("path", { d: "M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" }) }), jsx("span", { children: "Phone" })] }))] })] }))] }));
 };
 
+// Default Smartlinks Google OAuth Client ID (public - safe to expose)
+const DEFAULT_GOOGLE_CLIENT_ID = '696509063554-jdlbjl8vsjt7cr0vgkjkjf3ffnvi3a70.apps.googleusercontent.com';
 const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAuthSuccess, onAuthError, enabledProviders = ['email', 'google', 'phone'], redirectUrl, theme = 'light', className, customization, skipConfigFetch = false, }) => {
     const [mode, setMode] = useState('login');
     const [loading, setLoading] = useState(false);
@@ -670,19 +672,94 @@ const SmartlinksAuthUI = ({ apiEndpoint, clientId, clientName, accountData, onAu
         }
     };
     const handleGoogleLogin = async () => {
+        // Use custom client ID from config, or fall back to default Smartlinks client ID
+        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';
         setLoading(true);
         setError(undefined);
         try {
-            // In a real implementation, this would open Google OAuth flow
-            // For now, this is a placeholder that the consuming app would implement
-            throw new Error('Google OAuth flow must be implemented in your application');
+            const google = window.google;
+            if (!google) {
+                throw new Error('Google Identity Services not loaded. Please check your internet connection.');
+            }
+            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');
+                }
+                const client = google.accounts.oauth2.initTokenClient({
+                    client_id: googleClientId,
+                    scope: 'openid email profile',
+                    callback: async (response) => {
+                        try {
+                            if (response.error) {
+                                throw new Error(response.error_description || response.error);
+                            }
+                            const accessToken = response.access_token;
+                            // Send access token to backend
+                            const authResponse = await api.loginWithGoogle(accessToken);
+                            auth.login(authResponse.token, authResponse.user, authResponse.accountData);
+                            setAuthSuccess(true);
+                            setSuccessMessage('Google login successful!');
+                            onAuthSuccess(authResponse.token, authResponse.user, authResponse.accountData);
+                            if (redirectUrl) {
+                                setTimeout(() => {
+                                    window.location.href = redirectUrl;
+                                }, 2000);
+                            }
+                            setLoading(false);
+                        }
+                        catch (err) {
+                            const errorMessage = err instanceof Error ? err.message : 'Google login failed';
+                            setError(errorMessage);
+                            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
+                            setLoading(false);
+                        }
+                    },
+                });
+                client.requestAccessToken();
+            }
+            else {
+                // Use One Tap / Sign-In button flow (smoother UX but doesn't work in iframes)
+                google.accounts.id.initialize({
+                    client_id: googleClientId,
+                    callback: async (response) => {
+                        try {
+                            const idToken = response.credential;
+                            const authResponse = await api.loginWithGoogle(idToken);
+                            auth.login(authResponse.token, authResponse.user, authResponse.accountData);
+                            setAuthSuccess(true);
+                            setSuccessMessage('Google login successful!');
+                            onAuthSuccess(authResponse.token, authResponse.user, authResponse.accountData);
+                            if (redirectUrl) {
+                                setTimeout(() => {
+                                    window.location.href = redirectUrl;
+                                }, 2000);
+                            }
+                            setLoading(false);
+                        }
+                        catch (err) {
+                            const errorMessage = err instanceof Error ? err.message : 'Google login failed';
+                            setError(errorMessage);
+                            onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
+                            setLoading(false);
+                        }
+                    },
+                    auto_select: false,
+                    cancel_on_tap_outside: true,
+                });
+                google.accounts.id.prompt((notification) => {
+                    if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
+                        setLoading(false);
+                    }
+                });
+            }
         }
         catch (err) {
             const errorMessage = err instanceof Error ? err.message : 'Google login failed';
             setError(errorMessage);
             onAuthError?.(err instanceof Error ? err : new Error(errorMessage));
-        }
-        finally {
             setLoading(false);
         }
     };