@rebasepro/app 0.0.1-canary.4829d6e

package/src/auth/api.ts

@@ -0,0 +1,148 @@
+/**
+ * Auth-config fetch helper for the Rebase React frontend.
+ *
+ * The former per-endpoint auth client (login, register, refresh, OAuth,
+ * sessions, …) has been removed: `useRebaseAuthController` now delegates to
+ * the headless SDK's `client.auth` (from `@rebasepro/client`), which is the
+ * single source of truth for the auth session. The only piece that remains
+ * here is the unauthenticated `/api/auth/config` probe used to detect
+ * bootstrap mode and enabled providers before a session exists.
+ */
+
+import { RebaseApiError } from "@rebasepro/types";
+
+/**
+ * @deprecated Use {@link RebaseApiError} (from `@rebasepro/types`, re-exported by
+ * `@rebasepro/client`). Kept as an alias so `instanceof` / imports keep working;
+ * errors thrown here now carry `.code` and `.status` on the unified type.
+ */
+export const AuthApiError = RebaseApiError;
+
+async function handleResponse<T>(response: Response): Promise<T> {
+    let data: Record<string, unknown>;
+    try {
+        data = await response.json();
+    } catch (parseError) {
+        // Response wasn't JSON - could be network error or server issue
+        throw new RebaseApiError(
+            `Server returned non-JSON response (status: ${response.status})`,
+            { status: response.status, code: "PARSE_ERROR" }
+        );
+    }
+
+    if (!response.ok) {
+        throw new RebaseApiError(
+            (data as Record<string, Record<string, string>>).error?.message || "Request failed",
+            {
+                status: response.status,
+                code: (data as Record<string, Record<string, string>>).error?.code || "UNKNOWN_ERROR"
+            }
+        );
+    }
+
+    return data as T;
+}
+
+/**
+ * Wrapper for fetch that catches generic network failures (like server down)
+ * and translates them to a {@link RebaseApiError} with code `NETWORK_ERROR`.
+ */
+async function fetchWithHandling(input: RequestInfo | URL, init?: RequestInit): Promise<Response> {
+    try {
+        return await fetch(input, init);
+    } catch (error: unknown) {
+        if (error instanceof TypeError && error.message.includes("Failed to fetch")) {
+            throw new RebaseApiError(
+                "Failed to connect to the backend server. The backend might be down or failed to initialize (e.g., database connection timeout).",
+                { code: "NETWORK_ERROR", cause: error }
+            );
+        }
+        throw new RebaseApiError(
+            "Network error: " + (error instanceof Error ? error.message : String(error)),
+            { code: "NETWORK_ERROR", cause: error }
+        );
+    }
+}
+
+/**
+ * Auth config response from the backend
+ */
+export interface AuthConfigResponse {
+    /** True when there are no users in the system and first user setup is needed */
+    needsSetup: boolean;
+    /** Whether new user registration is enabled */
+    registrationEnabled: boolean;
+    /** Whether email service is configured */
+    emailServiceEnabled?: boolean;
+    /** Whether the self-service password reset flow (email link) is supported */
+    passwordReset?: boolean;
+    /**
+     * Whether an admin can reset another user's password, i.e. the adapter
+     * mounts `POST /admin/users/:userId/reset-password`. Absent on backends
+     * predating this field, which the frontend treats as supported.
+     */
+    adminPasswordReset?: boolean;
+    /** Whether email verification is supported */
+    emailVerification?: boolean;
+    /** Complete list of enabled OAuth provider IDs (e.g. ["google", "github", "discord"]) */
+    enabledProviders: string[];
+}
+
+/**
+ * Cache container for `fetchAuthConfig` — holds both the inflight promise
+ * (to deduplicate concurrent calls) and the cached result.
+ */
+export interface AuthConfigCache {
+    cached: AuthConfigResponse | null;
+    inflight: Promise<AuthConfigResponse> | null;
+}
+
+/**
+ * Create a fresh `AuthConfigCache` instance.
+ * Callers own the cache object and pass it into `fetchAuthConfig` / `clearAuthConfigCache`.
+ */
+export function createAuthConfigCache(): AuthConfigCache {
+    return { cached: null, inflight: null };
+}
+
+/**
+ * Fetch auth configuration / status from the backend
+ * This is an unauthenticated endpoint used to detect bootstrap mode.
+ *
+ * Results are cached for the session lifetime.
+ * Concurrent calls are deduplicated: only one network request is made
+ * and all callers share the same promise.
+ */
+export async function fetchAuthConfig(apiUrl: string, cache: AuthConfigCache): Promise<AuthConfigResponse> {
+    if (cache.cached) {
+        return cache.cached;
+    }
+
+    if (cache.inflight) {
+        return cache.inflight;
+    }
+
+    cache.inflight = (async () => {
+        const response = await fetchWithHandling(`${apiUrl}/api/auth/config`, {
+            method: "GET",
+            headers: { "Content-Type": "application/json" }
+        });
+        return handleResponse<AuthConfigResponse>(response);
+    })();
+
+    try {
+        const result = await cache.inflight;
+        cache.cached = result;
+        return result;
+    } finally {
+        cache.inflight = null;
+    }
+}
+
+/**
+ * Clear the cached auth config (e.g. on logout or for testing).
+ */
+export function clearAuthConfigCache(cache: AuthConfigCache): void {
+    cache.cached = null;
+    cache.inflight = null;
+}

package/src/auth/index.ts

@@ -0,0 +1,25 @@
+/**
+ * @rebasepro/app
+ *
+ * React authentication controller for Rebase frontends.
+ * Provides the `useRebaseAuthController` hook and API utilities
+ * for communicating with a Rebase backend's JWT auth endpoints.
+ *
+ * For the generic LoginView and RebaseAuth components, see @rebasepro/app.
+ */
+
+// Types
+export type {
+    RebaseAuthController,
+    RebaseAuthControllerProps,
+    AuthTokens,
+    DeviceSession,
+    UserInfo,
+    AuthResponse,
+    RefreshResponse
+} from "./types";
+
+export { useRebaseAuthController } from "./useRebaseAuthController";
+// API utilities
+export { fetchAuthConfig, clearAuthConfigCache, createAuthConfigCache, AuthApiError } from "./api";
+export type { AuthConfigResponse, AuthConfigCache } from "./api";

package/src/auth/types.ts

@@ -0,0 +1,115 @@
+import { AuthController, User, AuthTokens, DeviceSession, RebaseSession, AuthChangeEvent } from "@rebasepro/types";
+import type { AuthConfigResponse } from "./api";
+
+/** @deprecated Use `User` from `@rebasepro/types` instead. */
+export type UserInfo = User;
+/** @deprecated Use `DeviceSession` from `@rebasepro/types` instead. */
+export type Session = DeviceSession;
+// Re-export canonical types for backward compatibility
+export type { AuthTokens, DeviceSession };
+
+/**
+ * Auth controller that extends the base AuthController
+ * with additional methods for email/password and Google login
+ */
+export type RebaseAuthController = AuthController & {
+    /** Login with Google — accepts an ID token, access token, or authorization code payload */
+    googleLogin: (payload: { idToken: string } | { accessToken: string } | { code: string; redirectUri: string }) => Promise<void>;
+    /** Generic OAuth login — works with any provider. Posts payload to /auth/{providerId}. */
+    oauthLogin: (providerId: string, payload: Record<string, unknown>) => Promise<void>;
+    /** Login with email and password */
+    emailPasswordLogin: (email: string, password: string) => Promise<void>;
+    /** Register a new user */
+    register: (email: string, password: string, displayName?: string) => Promise<void>;
+    /** Skip login (for anonymous access if enabled) */
+    skipLogin: () => void;
+    /** Whether login was skipped */
+    loginSkipped: boolean;
+    /** Error from auth provider (login failure details) */
+    authProviderError: Error | null;
+    /** True when there are no users in the system — first-user bootstrap mode */
+    needsSetup: boolean;
+    /** Whether new user registration is enabled (always true during setup) */
+    registrationEnabled: boolean;
+    /** Request password reset email */
+    forgotPassword: (email: string) => Promise<void>;
+    /** Reset password using token from email */
+    resetPassword: (token: string, password: string) => Promise<void>;
+    /** Change password for authenticated user */
+    changePassword: (oldPassword: string, newPassword: string) => Promise<void>;
+    /** Update user profile */
+    updateProfile: (displayName?: string, photoURL?: string) => Promise<User>;
+    /** Fetch active sessions */
+    fetchSessions: () => Promise<DeviceSession[]>;
+    /** Revoke a session */
+    revokeSession: (sessionId: string) => Promise<void>;
+    /** Revoke all active sessions */
+    revokeAllSessions: () => Promise<void>;
+    /** Get internal API URL */
+    getApiUrl?: () => string | undefined;
+    /** Clear the current auth provider error */
+    clearError: () => void;
+    /** Set or clear the auth provider error */
+    setAuthProviderError: (error: Error | null) => void;
+}
+
+/**
+ * Structural type for the subset of `client.auth` (from `@rebasepro/client`)
+ * that the React hook delegates to. Avoids a hard dependency on
+ * `@rebasepro/client` while remaining fully type-safe.
+ */
+export interface ClientAuth {
+    getSession(): RebaseSession | null;
+    onAuthStateChange(callback: (event: AuthChangeEvent, session: RebaseSession | null) => void): () => void;
+    isInitialized(): Promise<void>;
+    getAuthConfig(): Promise<AuthConfigResponse>;
+    signInWithEmail(email: string, password: string): Promise<unknown>;
+    signOut(): Promise<void>;
+    refreshSession(): Promise<RebaseSession>;
+    signUp(email: string, password: string, displayName?: string): Promise<unknown>;
+    signInWithGoogle(payload: { idToken: string } | { accessToken: string } | { code: string; redirectUri: string }): Promise<unknown>;
+    signInWithOAuth(providerId: string, payload: Record<string, unknown>): Promise<unknown>;
+    resetPasswordForEmail(email: string): Promise<unknown>;
+    resetPassword(token: string, password: string): Promise<unknown>;
+    changePassword(oldPassword: string, newPassword: string): Promise<unknown>;
+    updateUser(updates: { displayName?: string; photoURL?: string }): Promise<User>;
+    getSessions(): Promise<DeviceSession[]>;
+    revokeSession(sessionId: string): Promise<unknown>;
+    revokeAllSessions(): Promise<unknown>;
+}
+
+/**
+ * Props for useRebaseAuthController hook
+ */
+export interface RebaseAuthControllerProps {
+    /** The Rebase Client instance */
+    client?: {
+        baseUrl?: string;
+        resolveToken?: () => Promise<string | null>;
+        setAuthTokenGetter?: (getter: () => Promise<string | null>) => void;
+        setOnUnauthorized?: (handler: () => Promise<boolean>) => void;
+        ws?: { setAuthTokenGetter: (getter: () => Promise<string | null>) => void };
+        auth?: ClientAuth;
+    };
+    /** Google OAuth client ID (optional, enables Google login) */
+    googleClientId?: string;
+    /** Callback when user signs out */
+    onSignOut?: () => void;
+    /** Define roles for a user after login */
+    defineRolesFor?: (user: User) => Promise<string[] | undefined> | string[] | undefined;
+}
+
+/**
+ * Auth response from backend login/register endpoints
+ */
+export interface AuthResponse {
+    user: User;
+    tokens: AuthTokens;
+}
+
+/**
+ * Response from token refresh endpoint
+ */
+export interface RefreshResponse {
+    tokens: AuthTokens;
+}

package/src/auth/useRebaseAuthController.ts

@@ -0,0 +1,328 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { User, AuthChangeEvent, RebaseSession } from "@rebasepro/types";
+import type { AuthConfigResponse } from "./api";
+import { RebaseAuthController, RebaseAuthControllerProps } from "./types";
+
+/**
+ * Auth controller hook for JWT-based authentication.
+ *
+ * This is a thin React binding over the headless SDK `client.auth`.
+ * It synchronizes React state with the SDK's internal state and delegates
+ * all operations to the SDK to ensure a single source of truth for
+ * authentication sessions across the entire application.
+ *
+ * @param props Configuration options
+ * @returns RebaseAuthController instance
+ */
+export function useRebaseAuthController(
+    props: RebaseAuthControllerProps = {}
+): RebaseAuthController {
+    const { client, onSignOut, defineRolesFor } = props;
+    const auth = client?.auth;
+
+    const [user, setUser] = useState<User | null>(null);
+    const [authLoading, setAuthLoading] = useState(false);
+    const [initialLoading, setInitialLoading] = useState(true);
+    const [authError, setAuthError] = useState<Error | null>(null);
+    const [authProviderError, setAuthProviderError] = useState<Error | null>(null);
+    const [loginSkipped, setLoginSkipped] = useState(false);
+    const [extra, setExtra] = useState<unknown>(null);
+    const [authConfig, setAuthConfig] = useState<AuthConfigResponse | null>(null);
+
+    const isMountedRef = useRef(true);
+    // Keep a stable ref to onSignOut so the listener never goes stale.
+    const onSignOutRef = useRef(onSignOut);
+    onSignOutRef.current = onSignOut;
+    // Keep a stable ref to defineRolesFor too, so an inline (non-memoized)
+    // function from the consumer does not re-run the sync effect on every
+    // render — which would re-subscribe to auth events and re-fetch the
+    // (uncached) auth config each time.
+    const defineRolesForRef = useRef(defineRolesFor);
+    defineRolesForRef.current = defineRolesFor;
+
+    const clearError = useCallback(() => {
+        setAuthProviderError(null);
+    }, []);
+
+    // Sync state with client.auth
+    useEffect(() => {
+        if (!auth) {
+            setInitialLoading(false);
+            return;
+        }
+
+        isMountedRef.current = true;
+
+        const updateState = async (session: RebaseSession | null) => {
+            if (!isMountedRef.current) return;
+
+            let userToSet = session?.user ?? null;
+            const defineRolesFor = defineRolesForRef.current;
+            if (userToSet && defineRolesFor) {
+                try {
+                    const roles = await defineRolesFor(userToSet);
+                    if (roles && isMountedRef.current) {
+                        userToSet = { ...userToSet, roles };
+                    }
+                } catch (e) {
+                    console.error("Error defining roles:", e);
+                }
+            }
+
+            if (isMountedRef.current) {
+                setUser(userToSet);
+            }
+        };
+
+        const syncState = async (event: AuthChangeEvent, session: RebaseSession | null) => {
+            await updateState(session);
+            if (event === "SIGNED_OUT") {
+                if (isMountedRef.current) {
+                    setLoginSkipped(false);
+                }
+                onSignOutRef.current?.();
+            }
+        };
+
+        // Initial sync with whatever is currently in the SDK
+        updateState(auth.getSession());
+
+        // Wait for SDK initialization (restoring session from storage or silent refresh)
+        auth.isInitialized().then(() => {
+            if (isMountedRef.current) {
+                updateState(auth.getSession());
+                setInitialLoading(false);
+            }
+        }).catch(() => {
+            if (isMountedRef.current) setInitialLoading(false);
+        });
+
+        // Fetch backend auth configuration
+        auth.getAuthConfig().then((config: AuthConfigResponse) => {
+            if (isMountedRef.current) setAuthConfig(config);
+        }).catch(() => {});
+
+        const unsubscribe = auth.onAuthStateChange(syncState);
+
+        return () => {
+            isMountedRef.current = false;
+            unsubscribe();
+        };
+    }, [auth]);
+
+    const getAuthToken = useCallback(async (): Promise<string> => {
+        if (!auth) throw new Error("Rebase client with auth is required");
+        const session = auth.getSession();
+
+        // If we have a valid token, return it
+        if (session?.accessToken && session.expiresAt > Date.now() + 10000) {
+            return session.accessToken;
+        }
+
+        // Otherwise, refresh
+        const newSession = await auth.refreshSession();
+        return newSession.accessToken;
+    }, [auth]);
+
+    const signOut = useCallback(async () => {
+        if (!auth) return;
+        setAuthLoading(true);
+        try {
+            await auth.signOut();
+            // signOut emits SIGNED_OUT → syncState calls onSignOutRef.current
+        } catch (error: unknown) {
+            const err = error instanceof Error ? error : new Error(String(error));
+            setAuthProviderError(err);
+        } finally {
+            setAuthLoading(false);
+        }
+    }, [auth]);
+
+    const emailPasswordLogin = useCallback(async (email: string, password: string) => {
+        if (!auth) throw new Error("Rebase client with auth is required");
+        setAuthLoading(true);
+        setAuthProviderError(null);
+        try {
+            await auth.signInWithEmail(email, password);
+        } catch (error: unknown) {
+            const err = error instanceof Error ? error : new Error(String(error));
+            setAuthProviderError(err);
+            throw error;
+        } finally {
+            setAuthLoading(false);
+        }
+    }, [auth]);
+
+    const register = useCallback(async (email: string, password: string, displayName?: string) => {
+        if (!auth) throw new Error("Rebase client with auth is required");
+        setAuthLoading(true);
+        setAuthProviderError(null);
+        try {
+            await auth.signUp(email, password, displayName);
+        } catch (error: unknown) {
+            const err = error instanceof Error ? error : new Error(String(error));
+            setAuthProviderError(err);
+            throw error;
+        } finally {
+            setAuthLoading(false);
+        }
+    }, [auth]);
+
+    const googleLogin = useCallback(async (
+        payload: { idToken: string } | { accessToken: string } | { code: string; redirectUri: string }
+    ) => {
+        if (!auth) throw new Error("Rebase client with auth is required");
+        setAuthLoading(true);
+        setAuthProviderError(null);
+        try {
+            await auth.signInWithGoogle(payload);
+        } catch (error: unknown) {
+            const err = error instanceof Error ? error : new Error(String(error));
+            setAuthProviderError(err);
+            throw error;
+        } finally {
+            setAuthLoading(false);
+        }
+    }, [auth]);
+
+    const oauthLogin = useCallback(async (providerId: string, payload: Record<string, unknown>) => {
+        if (!auth) throw new Error("Rebase client with auth is required");
+        setAuthLoading(true);
+        setAuthProviderError(null);
+        try {
+            await auth.signInWithOAuth(providerId, payload);
+        } catch (error: unknown) {
+            const err = error instanceof Error ? error : new Error(String(error));
+            setAuthProviderError(err);
+            throw error;
+        } finally {
+            setAuthLoading(false);
+        }
+    }, [auth]);
+
+    const skipLogin = useCallback(() => {
+        setLoginSkipped(true);
+        setUser(null);
+    }, []);
+
+    const forgotPassword = useCallback(async (email: string) => {
+        if (!auth) throw new Error("Rebase client with auth is required");
+        setAuthLoading(true);
+        setAuthProviderError(null);
+        try {
+            await auth.resetPasswordForEmail(email);
+        } catch (error: unknown) {
+            const err = error instanceof Error ? error : new Error(String(error));
+            setAuthProviderError(err);
+            throw error;
+        } finally {
+            setAuthLoading(false);
+        }
+    }, [auth]);
+
+    const resetPassword = useCallback(async (token: string, password: string) => {
+        if (!auth) throw new Error("Rebase client with auth is required");
+        setAuthLoading(true);
+        setAuthProviderError(null);
+        try {
+            await auth.resetPassword(token, password);
+        } catch (error: unknown) {
+            const err = error instanceof Error ? error : new Error(String(error));
+            setAuthProviderError(err);
+            throw error;
+        } finally {
+            setAuthLoading(false);
+        }
+    }, [auth]);
+
+    const changePassword = useCallback(async (oldPassword: string, newPassword: string) => {
+        if (!auth) throw new Error("Rebase client with auth is required");
+        setAuthLoading(true);
+        setAuthProviderError(null);
+        try {
+            await auth.changePassword(oldPassword, newPassword);
+            // Sign out after password change as sessions are usually invalidated
+            await auth.signOut();
+        } catch (error: unknown) {
+            const err = error instanceof Error ? error : new Error(String(error));
+            setAuthProviderError(err);
+            throw error;
+        } finally {
+            setAuthLoading(false);
+        }
+    }, [auth]);
+
+    const updateProfile = useCallback(async (displayName?: string, photoURL?: string) => {
+        if (!auth) throw new Error("Rebase client with auth is required");
+        setAuthLoading(true);
+        setAuthProviderError(null);
+        try {
+            const updatedUser = await auth.updateUser({ displayName, photoURL });
+            return updatedUser;
+        } catch (error: unknown) {
+            const err = error instanceof Error ? error : new Error(String(error));
+            setAuthProviderError(err);
+            throw error;
+        } finally {
+            setAuthLoading(false);
+        }
+    }, [auth]);
+
+    const fetchSessions = useCallback(async () => {
+        if (!auth) throw new Error("Rebase client with auth is required");
+        return await auth.getSessions();
+    }, [auth]);
+
+    const revokeSession = useCallback(async (sessionId: string) => {
+        if (!auth) throw new Error("Rebase client with auth is required");
+        await auth.revokeSession(sessionId);
+    }, [auth]);
+
+    const revokeAllSessions = useCallback(async () => {
+        if (!auth) throw new Error("Rebase client with auth is required");
+        await auth.revokeAllSessions();
+    }, [auth]);
+
+    return {
+        user,
+        authLoading,
+        initialLoading,
+        authError,
+        authProviderError,
+        loginSkipped,
+        needsSetup: authConfig?.needsSetup ?? false,
+        registrationEnabled: authConfig?.registrationEnabled ?? false,
+        getAuthToken,
+        getApiUrl: () => client?.baseUrl,
+        signOut,
+        emailPasswordLogin,
+        register,
+        googleLogin,
+        oauthLogin,
+        skipLogin,
+        forgotPassword,
+        resetPassword,
+        changePassword,
+        updateProfile,
+        fetchSessions,
+        revokeSession,
+        revokeAllSessions,
+        clearError,
+        setAuthProviderError,
+        extra,
+        setExtra,
+        capabilities: {
+            emailPasswordLogin: true,
+            googleLogin: !!(props.googleClientId),
+            registration: authConfig?.registrationEnabled ?? false,
+            passwordReset: authConfig?.passwordReset ?? false,
+            // Defaults to true so backends predating this field keep showing the
+            // action. Adapters that don't support it report `false` explicitly.
+            adminPasswordReset: authConfig?.adminPasswordReset ?? true,
+            sessionManagement: true,
+            profileUpdate: true,
+            emailVerification: authConfig?.emailVerification ?? false,
+            enabledProviders: authConfig?.enabledProviders ?? []
+        }
+    };
+}

package/src/components/AIIcon.tsx

@@ -0,0 +1,47 @@
+import { Wand2Icon } from "@rebasepro/ui";
+import React from "react";
+
+export interface AIIconProps {
+    size?: "smallest" | "small" | "medium" | "large";
+    className?: string;
+}
+
+/**
+ * AI-styled AutoAwesome icon with gradient coloring.
+ * Used consistently across AI features for visual identification.
+ */
+export function AIIcon({ size = "small", className }: AIIconProps) {
+    const sizeMap: Record<string, number> = {
+        smallest: 16,
+        small: 20,
+        medium: 24,
+        large: 28
+    };
+    const numericSize = typeof size === "string" ? sizeMap[size] || 20 : size;
+
+    return (
+        <Wand2Icon
+            size={numericSize}
+            className={className}
+            style={{
+                background: "linear-gradient(to right, var(--color-primary), var(--color-secondary))",
+                WebkitBackgroundClip: "text",
+                WebkitTextFillColor: "transparent",
+                backgroundClip: "text"
+            }}
+        />
+    );
+}
+
+/**
+ * Small animated dot indicator for AI-modified elements.
+ * Shows a pulsing gradient dot.
+ */
+export function AIModifiedIndicator({ className }: { className?: string }) {
+    return (
+        <div
+            className={`w-2 h-2 rounded-full bg-gradient-to-r from-primary to-secondary animate-pulse ${className ?? ""}`}
+            title="AI modified"
+        />
+    );
+}