@choiceform/shared-auth 0.1.0

package/README.md

@@ -0,0 +1,452 @@
+# @choiceform/shared-auth
+
+共享认证包 - 用于 Choiceform 项目的统一认证解决方案
+
+## 功能特性
+
+- ✅ Better Auth 集成
+- ✅ Legend State 状态管理
+- ✅ GitHub OAuth 支持
+- ✅ Token 自动管理和持久化
+- ✅ 路由保护组件
+- ✅ 登录页面组件（可定制）
+- ✅ 完整的 TypeScript 类型支持
+- ✅ 预配置的 API 客户端（自动添加认证头）
+- ✅ 用户管理器工具
+- ✅ 响应式状态管理（基于 Legend State）
+
+## 安装
+
+```bash
+pnpm add @choiceform/shared-auth
+```
+
+## 环境变量配置
+
+在使用认证功能前，需要在项目根目录配置环境变量：
+
+```bash
+# .env
+VITE_AUTH_API_URL=http://localhost:4320
+```
+
+**注意：** 如果你的项目仍在使用 `VITE_CORE_AI_API_URL`，代码会自动向后兼容，但建议迁移到新的 `VITE_AUTH_API_URL`。
+
+## 快速开始
+
+### 1. 初始化认证系统
+
+```typescript
+import { initAuth } from "@choiceform/shared-auth"
+import { adminClient, organizationClient } from "better-auth/client/plugins"
+
+export const auth = initAuth({
+  baseURL: import.meta.env.VITE_AUTH_API_URL || "http://localhost:4320",
+  tokenStorageKey: "auth-token",
+  defaultRedirectAfterLogin: "/explore",
+  signInPath: "/sign-in",
+  plugins: [adminClient(), organizationClient({ teams: { enabled: true } })],
+})
+```
+
+### 2. 在应用中使用
+
+```typescript
+import { AuthSync, ProtectedRoute, useAuthInit } from "@choiceform/shared-auth"
+import { auth } from "./lib/auth"
+
+function App() {
+  useAuthInit(auth)
+
+  return (
+    <>
+      <AuthSync auth={auth} />
+      <Router>
+        <Route path="/sign-in" element={<SignInPage />} />
+        <Route
+          path="/*"
+          element={
+            <ProtectedRoute auth={auth} signInPath="/sign-in">
+              <YourApp />
+            </ProtectedRoute>
+          }
+        />
+      </Router>
+    </>
+  )
+}
+```
+
+### 3. 使用登录页面组件
+
+```typescript
+import { SignInPage } from "@choiceform/shared-auth"
+import { auth } from "./lib/auth"
+
+function LoginPage() {
+  return (
+    <SignInPage
+      auth={auth}
+      logo={<YourLogo />}
+      title="Your App Title"
+      description="Your app description"
+      provider="github"
+      redirectAfterLogin="/dashboard"
+    />
+  )
+}
+```
+
+## API 文档
+
+### `initAuth(config)`
+
+快速初始化认证系统（使用默认配置）。
+
+**参数：**
+
+- `baseURL`: Better Auth API 基础 URL（必需）
+- `tokenStorageKey?`: Token 存储的 localStorage key（默认: `'auth-token'`）
+- `defaultRedirectAfterLogin?`: 登录后默认跳转地址（默认: `'/explore'`）
+- `signInPath?`: 登录页面路径（默认: `'/sign-in'`）
+- `plugins?`: Better Auth 插件列表（默认包含 `adminClient()` 和 `organizationClient()`）
+
+**返回：** `AuthInstance`
+
+### `createAuth(config)`
+
+创建认证系统实例（更灵活的配置选项）。
+
+**参数：**
+
+- `baseURL`: Better Auth API 基础 URL（必需）
+- `tokenStorageKey?`: Token 存储的 localStorage key（默认: `'auth-token'`）
+- `defaultRedirectAfterLogin?`: 登录后默认跳转地址（默认: `'/explore'`）
+- `signInPath?`: 登录页面路径（默认: `'/sign-in'`）
+- `plugins?`: Better Auth 插件列表
+- `callbackURLBuilder?`: 自定义回调 URL 构建函数
+- `getSessionEndpoint?`: 获取 session 的端点路径（默认: `'/v1/auth/get-session'`）
+
+**返回：** `AuthInstance`
+
+### `AuthInstance`
+
+认证实例包含以下属性和方法：
+
+**核心属性：**
+
+- `authStore`: Legend State store（响应式状态）
+- `authActions`: 认证操作（signIn, signOut, initialize 等）
+- `authComputed`: 计算属性（isInitializing 等）
+- `authClient`: Better Auth 客户端
+- `tokenStorage`: Token 存储工具
+
+**工具方法（已绑定到实例）：**
+
+- `getCurrentUser()`: 获取当前用户
+- `getCurrentUserId()`: 获取当前用户ID
+- `getCurrentUserIdSafe()`: 安全获取当前用户ID
+- `isAuthenticated()`: 检查是否已认证
+- `isLoading()`: 检查是否正在加载
+- `isLoaded()`: 检查是否已加载
+- `waitForAuth()`: 等待认证完成
+- `getAuthToken()`: 获取认证 Token
+- `getAuthHeaders()`: 获取认证 Headers
+- `apiClient`: 预配置的 API 客户端（包含 get/post/put/delete 方法）
+- `userManager`: 用户管理器（包含 getUser/getUserId 方法）
+
+### `ProtectedRoute`
+
+路由保护组件。
+
+**Props：**
+
+- `auth`: AuthInstance
+- `children`: React.ReactNode
+- `signInPath?`: 登录页面路径（默认: `'/sign-in'`）
+- `loadingComponent?`: 加载中组件
+- `loadingMessage?`: 加载中消息（默认: `'Checking authentication...'`）
+
+### `SignInPage`
+
+登录页面组件。
+
+**Props：**
+
+- `auth`: AuthInstance
+- `className?`: 自定义样式类名
+- `logo?`: Logo 组件
+- `title?`: 标题
+- `description?`: 描述
+- `provider?`: OAuth 提供商（默认: `'github'`）
+- `redirectAfterLogin?`: 登录后跳转地址（默认: `'/explore'`）
+- `signInButtonText?`: 登录按钮文本（默认: `'Sign in with GitHub'`）
+- `signingInButtonText?`: 登录中按钮文本（默认: `'Redirecting to GitHub...'`）
+- `signInButtonIcon?`: 登录按钮图标
+
+## 工具函数
+
+### 使用已绑定的工具方法（推荐）
+
+认证实例已包含所有工具方法，可以直接使用：
+
+```typescript
+import { auth } from "./lib/auth"
+
+// 获取当前用户
+const user = auth.getCurrentUser()
+
+// 获取当前用户ID
+const userId = auth.getCurrentUserId()
+const userIdSafe = auth.getCurrentUserIdSafe()
+
+// 检查认证状态
+const authenticated = auth.isAuthenticated()
+const loading = auth.isLoading()
+const loaded = auth.isLoaded()
+
+// 等待认证完成
+await auth.waitForAuth()
+
+// 获取认证 Token
+const token = await auth.getAuthToken()
+
+// 获取认证 Headers
+const headers = await auth.getAuthHeaders()
+
+// 使用预配置的 API 客户端
+const response = await auth.apiClient.get("/api/users")
+const data = await auth.apiClient.post("/api/data", { name: "test" })
+
+// 使用用户管理器
+const user = auth.userManager.getUser()
+const userId = auth.userManager.getUserId()
+```
+
+### 使用独立的工具函数
+
+如果需要独立的工具函数（需要手动传入参数），可以从包中导入：
+
+```typescript
+import {
+  getCurrentUser,
+  getCurrentUserId,
+  isAuthenticated,
+  getAuthToken,
+  getAuthHeaders,
+  createApiClient,
+  createUserManager,
+} from "@choiceform/shared-auth"
+
+// 使用独立的工具函数（需要传入 authStore 等参数）
+const user = getCurrentUser(auth.authStore)
+const userId = getCurrentUserId(auth.authStore)
+const authenticated = isAuthenticated(auth.authStore)
+
+// 创建 API 客户端
+const apiClient = createApiClient(
+  auth.authStore,
+  auth.tokenStorage,
+  auth.authActions,
+  auth.authClient
+)
+
+// 创建用户管理器
+const userManager = createUserManager(auth.authStore)
+```
+
+## 类型定义
+
+```typescript
+import type {
+  SessionUser,
+  Session,
+  AuthState,
+  AuthConfig,
+  AuthInstance,
+  AuthActions,
+  TokenStorage,
+} from "@choiceform/shared-auth"
+```
+
+### 类型说明
+
+- `SessionUser`: 用户信息类型
+- `Session`: 会话信息类型
+- `AuthState`: 认证状态类型（包含 user, isAuthenticated, loading 等）
+- `AuthConfig`: 认证配置类型
+- `AuthInstance`: 认证实例类型（`initAuth` 或 `createAuth` 的返回值）
+- `AuthActions`: 认证操作类型
+- `TokenStorage`: Token 存储工具类型
+
+## 环境变量
+
+### 必需的环境变量
+
+- `VITE_AUTH_API_URL`: Better Auth API 基础 URL
+
+### 示例配置
+
+参考项目根目录的 `.env.example` 文件：
+
+```bash
+# .env
+VITE_AUTH_API_URL=http://localhost:4320
+```
+
+### 向后兼容
+
+如果你的项目仍在使用 `VITE_CORE_AI_API_URL`，代码会自动向后兼容：
+
+```typescript
+baseURL: import.meta.env.VITE_AUTH_API_URL || import.meta.env.VITE_CORE_AI_API_URL || "http://localhost:4320"
+```
+
+但建议迁移到新的 `VITE_AUTH_API_URL`。
+
+## 响应式状态使用
+
+由于认证状态使用 Legend State 管理，你可以在 React 组件中使用 `use$` hook 来响应式地访问状态：
+
+```typescript
+import { use$ } from "@legendapp/state/react"
+import { auth } from "./lib/auth"
+
+function UserProfile() {
+  // 响应式获取用户信息
+  const user = use$(auth.authStore.user)
+  const isAuthenticated = use$(auth.authStore.isAuthenticated)
+  const loading = use$(auth.authStore.loading)
+
+  if (loading) {
+    return <div>Loading...</div>
+  }
+
+  if (!isAuthenticated) {
+    return <div>Please sign in</div>
+  }
+
+  return (
+    <div>
+      <h1>Welcome, {user?.name}</h1>
+      <p>Email: {user?.email}</p>
+    </div>
+  )
+}
+```
+
+### 使用计算属性
+
+```typescript
+import { use$ } from "@legendapp/state/react"
+import { auth } from "./lib/auth"
+
+function AuthStatus() {
+  // 使用计算属性检查初始化状态
+  const isInitializing = use$(auth.authComputed.isInitializing)
+
+  if (isInitializing) {
+    return <div>Initializing...</div>
+  }
+
+  return <div>Ready</div>
+}
+```
+
+## 最佳实践
+
+### 1. 在组件中使用响应式状态
+
+优先使用 `use$` hook 来访问响应式状态，而不是直接调用 `getCurrentUser()` 等方法：
+
+```typescript
+// ✅ 推荐：响应式更新
+const user = use$(auth.authStore.user)
+
+// ❌ 不推荐：非响应式
+const user = auth.getCurrentUser()
+```
+
+### 2. 使用 API 客户端进行 API 调用
+
+使用预配置的 `apiClient` 可以自动处理认证头和处理 401 响应：
+
+```typescript
+// ✅ 推荐：使用 apiClient
+const response = await auth.apiClient.get("/api/users")
+const data = await response.json()
+
+// ❌ 不推荐：手动添加认证头
+const headers = await auth.getAuthHeaders()
+const response = await fetch("/api/users", { headers })
+```
+
+### 3. 等待认证完成
+
+在进行需要认证的操作前，使用 `waitForAuth()` 确保认证已初始化：
+
+```typescript
+// ✅ 推荐：等待认证完成
+await auth.waitForAuth()
+if (auth.isAuthenticated()) {
+  // 执行需要认证的操作
+}
+
+// ❌ 不推荐：直接检查状态（可能尚未初始化）
+if (auth.isAuthenticated()) {
+  // 可能不准确
+}
+```
+
+### 4. 错误处理
+
+认证操作可能会失败，确保适当处理错误：
+
+```typescript
+try {
+  await auth.authActions.signIn("github", redirectUrl)
+} catch (error) {
+  console.error("Sign in failed:", error)
+  // 显示错误提示给用户
+}
+```
+
+### 5. 退出登录
+
+退出登录时使用 `signOut` 方法：
+
+```typescript
+async function handleSignOut() {
+  try {
+    await auth.authActions.signOut()
+    // 用户将被重定向到登录页面
+  } catch (error) {
+    console.error("Sign out failed:", error)
+  }
+}
+```
+
+## 常见问题
+
+### Q: 如何在非 React 环境中使用？
+
+A: 可以使用独立的工具函数，它们不依赖 React：
+
+```typescript
+import { getCurrentUser, isAuthenticated } from "@choiceform/shared-auth"
+
+const user = getCurrentUser(auth.authStore)
+const authenticated = isAuthenticated(auth.authStore)
+```
+
+### Q: 如何处理 Token 过期？
+
+A: `apiClient` 会自动处理 401 响应，当检测到未授权时会调用 `handleUnauthorized`，通常会清除认证状态并重定向到登录页面。
+
+### Q: 如何自定义认证流程？
+
+A: 可以使用 `createAuth` 替代 `initAuth`，它提供更多配置选项，包括自定义回调 URL 构建函数等。
+
+## 许可证
+
+MIT

package/dist/components/auth-sync.d.ts

@@ -0,0 +1,9 @@
+import type { AuthInstance } from "../core";
+/**
+ * Better Auth 认证状态同步组件
+ * 使用官方的 useSession hook 同步认证状态
+ */
+export declare function AuthSync({ auth }: {
+    auth: AuthInstance;
+}): null;
+//# sourceMappingURL=auth-sync.d.ts.map

package/dist/components/auth-sync.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth-sync.d.ts","sourceRoot":"","sources":["../../src/components/auth-sync.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AA8C3C;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,YAAY,CAAA;CAAE,QA8BxD"}

package/dist/components/auth-sync.js

@@ -0,0 +1,60 @@
+import { useEffect } from "react";
+/**
+ * 将日期转换为 ISO 字符串
+ */
+function toISOString(date) {
+    if (!date)
+        return undefined;
+    return typeof date === "string" ? date : new Date(date).toISOString();
+}
+/**
+ * 将 Better Auth session 用户数据映射为 SessionUser
+ */
+function mapSessionUserToSessionUser(sessionUser, sessionCreatedAt) {
+    return {
+        banExpires: sessionUser.banExpires,
+        banReason: sessionUser.banReason,
+        banned: sessionUser.banned,
+        createdAt: toISOString(sessionUser.createdAt) ?? "",
+        email: sessionUser.email,
+        emailVerified: sessionUser.emailVerified,
+        id: sessionUser.id,
+        image: sessionUser.image || undefined,
+        lastLoginAt: toISOString(sessionCreatedAt),
+        name: sessionUser.name,
+        role: sessionUser.role,
+        updatedAt: toISOString(sessionUser.updatedAt) ?? "",
+    };
+}
+/**
+ * Better Auth 认证状态同步组件
+ * 使用官方的 useSession hook 同步认证状态
+ */
+export function AuthSync({ auth }) {
+    const { authClient, authActions } = auth;
+    const { data: session, isPending, error } = authClient.useSession();
+    useEffect(() => {
+        // 根据 session 状态更新 store
+        if (isPending) {
+            authActions.setLoading(true);
+        }
+        else {
+            authActions.setLoading(false);
+            if (error) {
+                authActions.setError(error.message || "Authentication error");
+                authActions.initialize(null, true);
+            }
+            else if (session) {
+                // 映射用户数据：使用 session 的创建时间作为最后登录时间
+                const user = mapSessionUserToSessionUser(session.user, session.session?.createdAt);
+                authActions.initialize(user, true);
+            }
+            else {
+                // 没有 session，清空用户信息
+                authActions.initialize(null, true);
+            }
+        }
+    }, [session, isPending, error, authActions]);
+    // 这是一个隐形组件，不渲染任何内容
+    return null;
+}

package/dist/components/protected-route.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import type { AuthInstance } from "../core";
+interface ProtectedRouteProps {
+    auth: AuthInstance;
+    children: React.ReactNode;
+    loadingComponent?: React.ComponentType<{
+        message?: string;
+    }>;
+    loadingMessage?: string;
+    signInPath?: string;
+}
+/**
+ * 路由保护组件
+ * 等待认证初始化完成，根据认证状态进行路由保护
+ */
+export declare const ProtectedRoute: React.FC<ProtectedRouteProps>;
+export default ProtectedRoute;
+//# sourceMappingURL=protected-route.d.ts.map

package/dist/components/protected-route.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"protected-route.d.ts","sourceRoot":"","sources":["../../src/components/protected-route.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAE3C,UAAU,mBAAmB;IAC3B,IAAI,EAAE,YAAY,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,gBAAgB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IAC5D,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA8BxD,CAAA;AAED,eAAe,cAAc,CAAA"}

package/dist/components/protected-route.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { observer } from "@legendapp/state/react";
+import { Navigate } from "react-router";
+/**
+ * 路由保护组件
+ * 等待认证初始化完成，根据认证状态进行路由保护
+ */
+export const ProtectedRoute = observer(({ children, auth, signInPath = "/sign-in", loadingComponent, loadingMessage }) => {
+    const { authStore, authComputed } = auth;
+    // 检查各种状态
+    const isInitializing = authComputed.isInitializing.get();
+    const isAuthenticated = authStore.isAuthenticated.get();
+    // 检查初始化状态
+    if (isInitializing) {
+        if (loadingComponent) {
+            const LoadingComponent = loadingComponent;
+            return _jsx(LoadingComponent, { message: loadingMessage });
+        }
+        return _jsx("div", { children: loadingMessage || "Checking authentication..." });
+    }
+    // 检查认证状态
+    if (!isAuthenticated) {
+        return (_jsx(Navigate, { to: signInPath, replace: true }));
+    }
+    // 所有检查通过，渲染子组件
+    return _jsx(_Fragment, { children: children });
+});
+export default ProtectedRoute;

package/dist/components/sign-in-page.d.ts

@@ -0,0 +1,49 @@
+import React from "react";
+import type { AuthInstance } from "../core";
+interface SignInPageProps {
+    auth: AuthInstance;
+    /**
+     * 自定义样式类名
+     */
+    className?: string;
+    /**
+     * 描述
+     */
+    description?: string;
+    /**
+     * 自定义 Logo 组件
+     */
+    logo?: React.ReactNode;
+    /**
+     * OAuth 提供商
+     * @default 'github'
+     */
+    provider?: string;
+    /**
+     * 登录成功后的重定向路径
+     * @default '/explore'
+     */
+    redirectAfterLogin?: string;
+    /**
+     * 登录按钮图标
+     */
+    signInButtonIcon?: React.ReactNode;
+    /**
+     * 登录按钮文本
+     */
+    signInButtonText?: string;
+    /**
+     * 登录中按钮文本
+     */
+    signingInButtonText?: string;
+    /**
+     * 标题
+     */
+    title?: string;
+}
+/**
+ * 登录页面组件
+ */
+export declare function SignInPage({ auth, redirectAfterLogin, provider, logo, title, description, signInButtonText, signingInButtonText, signInButtonIcon, className, }: SignInPageProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=sign-in-page.d.ts.map

package/dist/components/sign-in-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sign-in-page.d.ts","sourceRoot":"","sources":["../../src/components/sign-in-page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAIlD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAE3C,UAAU,eAAe;IACvB,IAAI,EAAE,YAAY,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,kBAA+B,EAC/B,QAAmB,EACnB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,gBAAwC,EACxC,mBAAgD,EAChD,gBAAgB,EAChB,SAAS,GACV,EAAE,eAAe,2CAyDjB"}

package/dist/components/sign-in-page.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router";
+import { use$ } from "@legendapp/state/react";
+import { Button } from "@choiceform/design-system";
+/**
+ * 登录页面组件
+ */
+export function SignInPage({ auth, redirectAfterLogin = "/explore", provider = "github", logo, title, description, signInButtonText = "Sign in with GitHub", signingInButtonText = "Redirecting to GitHub...", signInButtonIcon, className, }) {
+    const navigate = useNavigate();
+    const { authStore, authActions } = auth;
+    const { isAuthenticated, error } = use$(authStore);
+    const [isSigningIn, setIsSigningIn] = useState(false);
+    useEffect(() => {
+        if (isAuthenticated) {
+            navigate(redirectAfterLogin);
+        }
+    }, [isAuthenticated, navigate, redirectAfterLogin]);
+    const handleSignIn = async () => {
+        // 设置本地 loading 状态
+        setIsSigningIn(true);
+        try {
+            await authActions.signIn(provider, `${window.location.origin}${redirectAfterLogin}`);
+            // OAuth 会重定向，所以这里的代码可能不会执行
+            // loading 状态会在页面刷新后重置
+        }
+        catch (error) {
+            // 如果出错，重置 loading 状态
+            setIsSigningIn(false);
+        }
+    };
+    return (_jsx("div", { className: className || "flex min-h-screen items-center justify-center bg-gray-50 dark:bg-gray-900", children: _jsxs("div", { className: "w-full max-w-md space-y-8", children: [logo && (_jsxs("div", { className: "mb-8", children: [_jsx("div", { className: "flex items-center gap-2", children: logo }), title && (_jsxs("div", { className: "p-4", children: [title && _jsx("p", { className: "text-heading-large mt-2", children: title }), description && (_jsx("p", { className: "text-secondary-foreground text-body-large mt-2", children: description }))] }))] })), _jsxs("div", { className: "flex flex-col items-start justify-start gap-2 p-4", children: [_jsxs(Button, { onClick: handleSignIn, disabled: isSigningIn, loading: isSigningIn, size: "large", children: [signInButtonIcon && _jsx("span", { className: "flex items-center", children: signInButtonIcon }), _jsx("span", { children: isSigningIn ? signingInButtonText : signInButtonText })] }), error && _jsx("p", { className: "text-danger-foreground", children: error })] })] }) }));
+}