@beamarco/auth-sdk 0.1.0

package/README.md

@@ -0,0 +1,163 @@
+# @beamarco/auth-sdk
+
+Embed authentication like Clerk in your React apps. Works with the Beamar auth-service backend.
+
+## Installation
+
+```bash
+npm install @beamarco/auth-sdk
+```
+
+## Quick Start
+
+### 1. Wrap your app with BeamarAuthProvider
+
+```tsx
+import { BeamarAuthProvider } from '@beamarco/auth-sdk'
+
+const config = {
+  apiUrl: 'https://auth.creztu.com',  // or your auth-service URL
+  appName: 'my-app',                   // e.g. GOMEDI, developers-portal
+  googleClientId: 'xxx.apps.googleusercontent.com',  // optional, for Google Sign In
+}
+
+function App() {
+  return (
+    <BeamarAuthProvider config={config}>
+      <YourApp />
+    </BeamarAuthProvider>
+  )
+}
+```
+
+### 2. Use SignedIn / SignedOut for conditional rendering
+
+```tsx
+import { SignedIn, SignedOut, SignIn, SignUp } from '@beamarco/auth-sdk'
+
+function App() {
+  return (
+    <>
+      <SignedIn>
+        <Dashboard />
+      </SignedIn>
+      <SignedOut>
+        <SignIn signUpUrl="/sign-up" />
+      </SignedOut>
+    </>
+  )
+}
+```
+
+### 3. Add routes (e.g. with React Router)
+
+```tsx
+import { Routes, Route, Navigate } from 'react-router-dom'
+import {
+  BeamarAuthProvider,
+  SignIn,
+  SignUp,
+  SignedIn,
+  SignedOut,
+  useAuth,
+} from '@beamarco/auth-sdk'
+
+function ProtectedRoute({ children }) {
+  const { isLoaded, isSignedIn } = useAuth()
+  if (!isLoaded) return <Spinner />
+  if (!isSignedIn) return <Navigate to="/sign-in" replace />
+  return children
+}
+
+function AuthRoute({ children }) {
+  const { isLoaded, isSignedIn } = useAuth()
+  if (!isLoaded) return <Spinner />
+  if (isSignedIn) return <Navigate to="/" replace />
+  return children
+}
+
+function App() {
+  return (
+    <BeamarAuthProvider config={config}>
+      <Routes>
+        <Route path="/" element={
+          <ProtectedRoute><Home /></ProtectedRoute>
+        } />
+        <Route path="/sign-in" element={
+          <AuthRoute><SignIn /></AuthRoute>
+        } />
+        <Route path="/sign-up" element={
+          <AuthRoute><SignUp /></AuthRoute>
+        } />
+      </Routes>
+    </BeamarAuthProvider>
+  )
+}
+```
+
+## API
+
+### Components
+
+| Component | Description |
+|-----------|-------------|
+| `BeamarAuthProvider` | Wrap your app; provides auth context |
+| `SignIn` | Email/password + Google sign-in form |
+| `SignUp` | Email/password + Google sign-up form |
+| `SignedIn` | Renders children only when signed in |
+| `SignedOut` | Renders children only when signed out |
+| `SignInButton` | Link/button to sign-in page |
+| `SignUpButton` | Link/button to sign-up page |
+| `UserButton` | User avatar/menu with sign out |
+| `ProtectedRoute` | Redirects to sign-in when not authenticated |
+
+### Hooks
+
+| Hook | Description |
+|------|-------------|
+| `useAuth()` | Full auth context (signIn, signOut, user, etc.) |
+| `useUser()` | Current user and loading state |
+
+### Config
+
+```ts
+interface BeamarAuthConfig {
+  apiUrl: string       // auth-service base URL
+  appName: string      // application name (multi-tenant)
+  googleClientId?: string  // for Google OAuth
+  parentUrl?: string   // for password reset redirect
+}
+```
+
+## CORS & Cookies
+
+The auth-service uses **httpOnly cookies** for sessions. Ensure:
+
+1. **Same origin** or **CORS with credentials**: Your frontend and auth-service must allow `credentials: 'include'`.
+2. **auth-service CORS**: Set `APP_CORS` env var to include your frontend origin(s).
+3. **Cookie domain**: In production, auth-service may set `domain` for cross-subdomain cookies (e.g. `.creztu.com`).
+
+## Developers Portal & Creztu
+
+To protect developers-portal or embed auth in the Creztu portal:
+
+```tsx
+// developers-portal - replace Clerk with Beamar Auth
+import { BeamarAuthProvider, SignIn, SignedIn, SignedOut, UserButton } from '@beamarco/auth-sdk'
+
+const config = {
+  apiUrl: process.env.VITE_AUTH_API_URL,
+  appName: 'developers-portal',
+  googleClientId: process.env.VITE_GOOGLE_CLIENT_ID,
+}
+
+<BeamarAuthProvider config={config}>
+  <SignedIn>
+    <UserButton />
+    <MainContent />
+  </SignedIn>
+  <SignedOut>
+    <SignIn />
+  </SignedOut>
+</BeamarAuthProvider>
+```

package/dist/client.d.ts

@@ -0,0 +1,59 @@
+import type { User, LoginCredentials, RegisterCredentials, GoogleCredential } from './types';
+export interface BeamarAuthClientOptions {
+    apiUrl: string;
+    appName: string;
+    parentUrl?: string;
+}
+/**
+ * Low-level client for Beamar auth-service API.
+ * Uses credentials: 'include' for cookie-based sessions.
+ */
+export declare class BeamarAuthClient {
+    private apiUrl;
+    private appName;
+    private parentUrl;
+    constructor(options: BeamarAuthClientOptions);
+    private request;
+    /**
+     * Login with email and password (Basic auth)
+     */
+    login(credentials: LoginCredentials): Promise<User>;
+    /**
+     * Register new account with email and password
+     */
+    register(credentials: RegisterCredentials): Promise<{
+        message: string;
+    }>;
+    /**
+     * Logout (clears session cookie)
+     */
+    logout(): Promise<void>;
+    /**
+     * Check if email exists
+     */
+    validateEmail(loginId: string): Promise<boolean>;
+    /**
+     * Get current session - returns user if logged in
+     * Uses GET /user/preference which returns user info when cookie is valid
+     */
+    getSession(): Promise<User | null>;
+    /**
+     * Login with Google OAuth credential
+     */
+    loginWithGoogle(credential: GoogleCredential): Promise<User>;
+    /**
+     * Register with Google OAuth credential
+     */
+    registerWithGoogle(credential: GoogleCredential): Promise<{
+        message: string;
+    }>;
+    /**
+     * Request password reset email
+     */
+    requestPasswordReset(loginId: string): Promise<void>;
+    /**
+     * Update password with reset token
+     */
+    updatePassword(key: string, password: string): Promise<void>;
+}
+//# sourceMappingURL=client.d.ts.map

package/dist/client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAG5F,MAAM,WAAW,uBAAuB;IACtC,MAAM,EAAE,MAAM,CAAA;IACd,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;GAGG;AACH,qBAAa,gBAAgB;IAC3B,OAAO,CAAC,MAAM,CAAQ;IACtB,OAAO,CAAC,OAAO,CAAQ;IACvB,OAAO,CAAC,SAAS,CAAQ;gBAEb,OAAO,EAAE,uBAAuB;YAM9B,OAAO;IAoCrB;;OAEG;IACG,KAAK,CAAC,WAAW,EAAE,gBAAgB,GAAG,OAAO,CAAC,IAAI,CAAC;IAWzD;;OAEG;IACG,QAAQ,CAAC,WAAW,EAAE,mBAAmB,GAAG,OAAO,CAAC;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IAW9E;;OAEG;IACG,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;IAI7B;;OAEG;IACG,aAAa,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC;IAQtD;;;OAGG;IACG,UAAU,IAAI,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC;IAwBxC;;OAEG;IACG,eAAe,CAAC,UAAU,EAAE,gBAAgB,GAAG,OAAO,CAAC,IAAI,CAAC;IAWlE;;OAEG;IACG,kBAAkB,CAAC,UAAU,EAAE,gBAAgB,GAAG,OAAO,CAAC;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IAYpF;;OAEG;IACG,oBAAoB,CAAC,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAQ1D;;OAEG;IACG,cAAc,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;CAMnE"}

package/dist/client.js

@@ -0,0 +1,149 @@
+import { AuthError } from './types';
+/**
+ * Low-level client for Beamar auth-service API.
+ * Uses credentials: 'include' for cookie-based sessions.
+ */
+export class BeamarAuthClient {
+    constructor(options) {
+        this.apiUrl = options.apiUrl.replace(/\/$/, '');
+        this.appName = options.appName;
+        this.parentUrl = options.parentUrl ?? (typeof window !== 'undefined' ? window.location.origin : '');
+    }
+    async request(path, options = {}) {
+        const { params, ...fetchOptions } = options;
+        const url = new URL(`${this.apiUrl}${path}`);
+        if (params) {
+            Object.entries(params).forEach(([k, v]) => url.searchParams.set(k, v));
+        }
+        const res = await fetch(url.toString(), {
+            ...fetchOptions,
+            credentials: 'include',
+            headers: {
+                'Content-Type': 'application/json',
+                ...fetchOptions.headers,
+            },
+        });
+        if (!res.ok) {
+            const body = await res.json().catch(() => ({}));
+            const message = body?.message ??
+                body?.error ??
+                res.statusText ??
+                'Request failed';
+            throw new AuthError(message, res.status, body?.code);
+        }
+        if (res.status === 204 || res.headers.get('content-length') === '0') {
+            return {};
+        }
+        return res.json();
+    }
+    /**
+     * Login with email and password (Basic auth)
+     */
+    async login(credentials) {
+        const basic = btoa(`${credentials.email}:${credentials.password}`);
+        return this.request('/auth/login', {
+            method: 'POST',
+            params: { appName: this.appName },
+            headers: {
+                Authorization: `Basic ${basic}`,
+            },
+        });
+    }
+    /**
+     * Register new account with email and password
+     */
+    async register(credentials) {
+        const res = await this.request('/auth/register', {
+            method: 'POST',
+            body: JSON.stringify({
+                email: credentials.email,
+                password: credentials.password,
+            }),
+        });
+        return { message: res.message ?? 'Account created' };
+    }
+    /**
+     * Logout (clears session cookie)
+     */
+    async logout() {
+        await this.request('/auth/logout', { method: 'GET' });
+    }
+    /**
+     * Check if email exists
+     */
+    async validateEmail(loginId) {
+        const res = await this.request('/auth/validate', {
+            method: 'POST',
+            body: JSON.stringify({ loginId }),
+        });
+        return res === true;
+    }
+    /**
+     * Get current session - returns user if logged in
+     * Uses GET /user/preference which returns user info when cookie is valid
+     */
+    async getSession() {
+        try {
+            const res = await this.request('/user/preference', { method: 'GET' });
+            if (!res || !res.email)
+                return null;
+            return {
+                id: res.id ?? '',
+                loginId: res.email,
+                displayName: res.displayName,
+                imageUrl: res.imageUrl,
+                cellphone: res.cellphone,
+                tenants: [],
+            };
+        }
+        catch {
+            return null;
+        }
+    }
+    /**
+     * Login with Google OAuth credential
+     */
+    async loginWithGoogle(credential) {
+        return this.request('/goauth/login', {
+            method: 'POST',
+            params: { appName: this.appName },
+            body: JSON.stringify({
+                tokenId: credential.credential,
+                googleId: credential.clientId,
+            }),
+        });
+    }
+    /**
+     * Register with Google OAuth credential
+     */
+    async registerWithGoogle(credential) {
+        const res = await this.request('/goauth/register', {
+            method: 'POST',
+            params: { appName: this.appName },
+            body: JSON.stringify({
+                tokenId: credential.credential,
+                googleId: credential.clientId,
+            }),
+        });
+        return { message: res.message ?? 'Account created' };
+    }
+    /**
+     * Request password reset email
+     */
+    async requestPasswordReset(loginId) {
+        await this.request('/auth/password-request', {
+            method: 'POST',
+            params: { parentUrl: this.parentUrl, appName: this.appName },
+            body: JSON.stringify({ loginId }),
+        });
+    }
+    /**
+     * Update password with reset token
+     */
+    async updatePassword(key, password) {
+        await this.request('/auth/password-request', {
+            method: 'PUT',
+            body: JSON.stringify({ key, password }),
+        });
+    }
+}

package/dist/components/ProtectedRoute.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface ProtectedRouteProps {
+    children: React.ReactNode;
+    /** Redirect to this path when not signed in */
+    fallbackRedirectUrl?: string;
+    /** Custom loading component */
+    loading?: React.ReactNode;
+}
+/**
+ * Protects routes - redirects to sign-in when not authenticated
+ */
+export declare function ProtectedRoute({ children, fallbackRedirectUrl, loading, }: ProtectedRouteProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=ProtectedRoute.d.ts.map

package/dist/components/ProtectedRoute.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProtectedRoute.d.ts","sourceRoot":"","sources":["../../src/components/ProtectedRoute.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,+CAA+C;IAC/C,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,+BAA+B;IAC/B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,mBAAgC,EAChC,OAAO,GACR,EAAE,mBAAmB,kDAqBrB"}

package/dist/components/ProtectedRoute.js

@@ -0,0 +1,21 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useBeamarAuth } from '../hooks';
+/**
+ * Protects routes - redirects to sign-in when not authenticated
+ */
+export function ProtectedRoute({ children, fallbackRedirectUrl = '/sign-in', loading, }) {
+    const { isLoaded, isSignedIn } = useBeamarAuth();
+    if (!isLoaded) {
+        if (loading)
+            return _jsx(_Fragment, { children: loading });
+        return (_jsx("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '200px' }, children: "Loading..." }));
+    }
+    if (!isSignedIn) {
+        const to = fallbackRedirectUrl
+            ? `${fallbackRedirectUrl}?redirect_url=${encodeURIComponent(window.location.pathname + window.location.search)}`
+            : fallbackRedirectUrl;
+        window.location.href = to;
+        return null;
+    }
+    return _jsx(_Fragment, { children: children });
+}

package/dist/components/SignIn.d.ts

@@ -0,0 +1,87 @@
+import React from 'react';
+import type { LoginCredentials } from '../types';
+declare const defaultStyles: {
+    container: {
+        display: string;
+        flexDirection: "column";
+        gap: string;
+        maxWidth: string;
+        padding: string;
+        fontFamily: string;
+    };
+    input: {
+        padding: string;
+        fontSize: string;
+        border: string;
+        borderRadius: string;
+        width: string;
+        boxSizing: "border-box";
+    };
+    button: {
+        padding: string;
+        fontSize: string;
+        fontWeight: number;
+        border: string;
+        borderRadius: string;
+        cursor: string;
+        backgroundColor: string;
+        color: string;
+    };
+    buttonGoogle: {
+        padding: string;
+        fontSize: string;
+        border: string;
+        borderRadius: string;
+        cursor: string;
+        backgroundColor: string;
+        color: string;
+    };
+    error: {
+        color: string;
+        fontSize: string;
+    };
+    link: {
+        color: string;
+        cursor: string;
+        textDecoration: string;
+    };
+    divider: {
+        display: string;
+        alignItems: string;
+        gap: string;
+        color: string;
+    };
+    dividerLine: {
+        flex: number;
+        height: number;
+        backgroundColor: string;
+    };
+};
+export interface SignInProps {
+    /** Redirect path after sign in (optional - caller handles navigation) */
+    afterSignInUrl?: string;
+    /** Custom styles */
+    styles?: Partial<typeof defaultStyles>;
+    /** Show Google sign in button */
+    showGoogle?: boolean;
+    /** Link to sign up - e.g. /sign-up */
+    signUpUrl?: string;
+    /** Link to forgot password - e.g. /forgot-password */
+    forgotPasswordUrl?: string;
+    /** Called after successful sign in */
+    onSuccess?: () => void;
+    /** Render prop for custom layout */
+    children?: (props: SignInRenderProps) => React.ReactNode;
+}
+export interface SignInRenderProps {
+    signIn: (credentials: LoginCredentials) => Promise<void>;
+    signInWithGoogle: (credential: {
+        credential: string;
+        clientId: string;
+    }) => Promise<void>;
+    error: string | null;
+    isLoading: boolean;
+}
+export declare function SignIn({ afterSignInUrl, styles: customStyles, showGoogle, signUpUrl, forgotPasswordUrl, onSuccess, children, }: SignInProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SignIn.d.ts.map

package/dist/components/SignIn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignIn.d.ts","sourceRoot":"","sources":["../../src/components/SignIn.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAEhD,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDlB,CAAA;AAED,MAAM,WAAW,WAAW;IAC1B,yEAAyE;IACzE,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,oBAAoB;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC,OAAO,aAAa,CAAC,CAAA;IACtC,iCAAiC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,sDAAsD;IACtD,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,KAAK,CAAC,SAAS,CAAA;CACzD;AAED,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,CAAC,WAAW,EAAE,gBAAgB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACxD,gBAAgB,EAAE,CAAC,UAAU,EAAE;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IACzF,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,SAAS,EAAE,OAAO,CAAA;CACnB;AAED,wBAAgB,MAAM,CAAC,EACrB,cAAc,EACd,MAAM,EAAE,YAAiB,EACzB,UAAiB,EACjB,SAAsB,EACtB,iBAAiB,EACjB,SAAS,EACT,QAAQ,GACT,EAAE,WAAW,2CAoHb"}

package/dist/components/SignIn.js

@@ -0,0 +1,149 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import { useBeamarAuth } from '../hooks';
+const defaultStyles = {
+    container: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '16px',
+        maxWidth: '400px',
+        padding: '24px',
+        fontFamily: 'system-ui, sans-serif',
+    },
+    input: {
+        padding: '10px 12px',
+        fontSize: '16px',
+        border: '1px solid #ccc',
+        borderRadius: '6px',
+        width: '100%',
+        boxSizing: 'border-box',
+    },
+    button: {
+        padding: '12px 24px',
+        fontSize: '16px',
+        fontWeight: 600,
+        border: 'none',
+        borderRadius: '6px',
+        cursor: 'pointer',
+        backgroundColor: '#0066cc',
+        color: 'white',
+    },
+    buttonGoogle: {
+        padding: '12px 24px',
+        fontSize: '16px',
+        border: '1px solid #ccc',
+        borderRadius: '6px',
+        cursor: 'pointer',
+        backgroundColor: 'white',
+        color: '#333',
+    },
+    error: {
+        color: '#c00',
+        fontSize: '14px',
+    },
+    link: {
+        color: '#0066cc',
+        cursor: 'pointer',
+        textDecoration: 'none',
+    },
+    divider: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '12px',
+        color: '#666',
+    },
+    dividerLine: {
+        flex: 1,
+        height: 1,
+        backgroundColor: '#ddd',
+    },
+};
+export function SignIn({ afterSignInUrl, styles: customStyles = {}, showGoogle = true, signUpUrl = '/sign-up', forgotPasswordUrl, onSuccess, children, }) {
+    const { signIn, signInWithGoogle, googleClientId } = useBeamarAuth();
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [error, setError] = useState(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const styles = { ...defaultStyles, ...customStyles };
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setError(null);
+        setIsLoading(true);
+        try {
+            await signIn({ email, password });
+            onSuccess?.();
+            if (afterSignInUrl) {
+                window.location.href = afterSignInUrl;
+            }
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Sign in failed');
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    const handleGoogleSuccess = async (credential) => {
+        setError(null);
+        setIsLoading(true);
+        try {
+            await signInWithGoogle(credential);
+            onSuccess?.();
+            if (afterSignInUrl) {
+                window.location.href = afterSignInUrl;
+            }
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Sign in with Google failed');
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    if (children) {
+        return (_jsx(_Fragment, { children: children({
+                signIn: async (creds) => {
+                    setError(null);
+                    setIsLoading(true);
+                    try {
+                        await signIn(creds);
+                        onSuccess?.();
+                        if (afterSignInUrl)
+                            window.location.href = afterSignInUrl;
+                    }
+                    catch (err) {
+                        setError(err instanceof Error ? err.message : 'Sign in failed');
+                        throw err;
+                    }
+                    finally {
+                        setIsLoading(false);
+                    }
+                },
+                signInWithGoogle: handleGoogleSuccess,
+                error,
+                isLoading,
+            }) }));
+    }
+    return (_jsxs("form", { onSubmit: handleSubmit, style: styles.container, children: [error && _jsx("div", { style: styles.error, children: error }), _jsx("input", { type: "email", placeholder: "Email", value: email, onChange: (e) => setEmail(e.target.value), required: true, disabled: isLoading, style: styles.input }), _jsx("input", { type: "password", placeholder: "Password", value: password, onChange: (e) => setPassword(e.target.value), required: true, disabled: isLoading, style: styles.input }), forgotPasswordUrl && (_jsx("a", { href: forgotPasswordUrl, style: styles.link, children: "Forgot password?" })), _jsx("button", { type: "submit", disabled: isLoading, style: styles.button, children: isLoading ? 'Signing in...' : 'Sign in' }), showGoogle && (_jsxs(_Fragment, { children: [_jsxs("div", { style: styles.divider, children: [_jsx("span", { style: styles.dividerLine }), _jsx("span", { children: "or" }), _jsx("span", { style: styles.dividerLine })] }), _jsx(GoogleSignInButton, { onSuccess: handleGoogleSuccess, disabled: isLoading, clientId: googleClientId })] })), _jsxs("p", { children: ["Don't have an account? ", _jsx("a", { href: signUpUrl, style: styles.link, children: "Sign up" })] })] }));
+}
+/**
+ * Google Sign In button - requires GoogleOAuthProvider wrapper with clientId from config
+ */
+function GoogleSignInButton({ onSuccess, disabled, clientId, }) {
+    const [GoogleLogin, setGoogleLogin] = useState(null);
+    React.useEffect(() => {
+        import('@react-oauth/google').then((mod) => {
+            setGoogleLogin(() => mod.GoogleLogin);
+        });
+    }, []);
+    if (!clientId)
+        return null;
+    if (!GoogleLogin) {
+        return (_jsx("button", { type: "button", disabled: true, style: { ...defaultStyles.buttonGoogle, opacity: 0.7 }, children: "Loading..." }));
+    }
+    return (_jsx(GoogleLogin, { onSuccess: (res) => {
+            if (res.credential && res.clientId) {
+                onSuccess({ credential: res.credential, clientId: res.clientId });
+            }
+        }, onError: () => { }, useOneTap: false }));
+}

package/dist/components/SignInButton.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface SignInButtonProps {
+    children?: React.ReactNode;
+    fallbackRedirectUrl?: string;
+    signInUrl?: string;
+    style?: React.CSSProperties;
+    className?: string;
+}
+/**
+ * Button that redirects to sign-in page (Clerk-style)
+ */
+export declare function SignInButton({ children, signInUrl, fallbackRedirectUrl, style, className, }: SignInButtonProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=SignInButton.d.ts.map

package/dist/components/SignInButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignInButton.d.ts","sourceRoot":"","sources":["../../src/components/SignInButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAoB,EACpB,SAAsB,EACtB,mBAAmB,EACnB,KAAK,EACL,SAAS,GACV,EAAE,iBAAiB,kDAanB"}

package/dist/components/SignInButton.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useBeamarAuth } from '../hooks';
+/**
+ * Button that redirects to sign-in page (Clerk-style)
+ */
+export function SignInButton({ children = 'Sign in', signInUrl = '/sign-in', fallbackRedirectUrl, style, className, }) {
+    const { isSignedIn } = useBeamarAuth();
+    const to = fallbackRedirectUrl
+        ? `${signInUrl}?redirect_url=${encodeURIComponent(fallbackRedirectUrl)}`
+        : signInUrl;
+    if (isSignedIn)
+        return null;
+    return (_jsx("a", { href: to, style: style, className: className, children: children }));
+}