@cfast/auth 0.1.0 → 0.2.0

package/README.md

@@ -138,12 +138,12 @@ function Header() {
 
 ### Login Page
 
-The consumer creates their own login route and renders `<LoginPage>`. The component accepts an `authClient` prop and a `components` prop for UI slot overrides. Default slots render plain HTML — use `@cfast/ui/joy` for Joy UI styling.
+The consumer creates their own login route and renders `<LoginPage>`. The component accepts an `authClient` prop and a `components` prop for UI slot overrides. Default slots render plain HTML — use `@cfast/joy` for Joy UI styling.
 
 ```typescript
 // routes/login.tsx
 import { LoginPage } from "@cfast/auth/client";
-import { joyLoginComponents } from "@cfast/ui/joy";
+import { joyLoginComponents } from "@cfast/joy";
 import { authClient } from "~/auth.client";
 
 export default function Login() {
@@ -196,7 +196,7 @@ export default function Login() {
 }
 ```
 
-For Joy UI, use the pre-built `joyLoginComponents` from `@cfast/ui/joy` instead of writing custom slots.
+For Joy UI, use the pre-built `joyLoginComponents` from `@cfast/joy` instead of writing custom slots.
 
 ### Redirect Flow
 

package/dist/client.d.ts

@@ -72,9 +72,15 @@ type LoginComponents = {
     ErrorMessage?: ComponentType<{
         error: string;
     }>;
+    PasskeySignUpButton?: ComponentType<{
+        onClick: () => void;
+        loading: boolean;
+    }>;
 };
 type LoginPageProps = {
-    authClient: {
+    /** Pass `undefined` during SSR (e.g. from a `.client.ts` module). The
+     *  component renders a static shell and hydrates with full interactivity. */
+    authClient?: {
         signIn: {
             magicLink: (opts: {
                 email: string;
@@ -89,6 +95,24 @@ type LoginPageProps = {
                 } | null;
             } | undefined>;
         };
+        signUp?: {
+            email: (opts: {
+                email: string;
+                password: string;
+                name: string;
+            }) => Promise<{
+                error?: {
+                    message?: string;
+                } | null;
+            }>;
+        };
+        passkey?: {
+            addPasskey: () => Promise<{
+                error?: {
+                    message?: string;
+                } | null;
+            } | undefined>;
+        };
     };
     components?: LoginComponents;
     title?: string;

package/dist/client.js

@@ -133,6 +133,21 @@ function DefaultPasskeyButton({
     }
   );
 }
+function DefaultPasskeySignUpButton({
+  onClick,
+  loading
+}) {
+  return /* @__PURE__ */ jsx4(
+    "button",
+    {
+      type: "button",
+      onClick,
+      disabled: loading,
+      style: { width: "100%", padding: 8 },
+      children: loading ? "Creating account..." : "Sign up with Passkey"
+    }
+  );
+}
 function DefaultSuccessMessage({ email }) {
   return /* @__PURE__ */ jsxs("div", { role: "status", children: [
     "Check your email (",
@@ -154,6 +169,7 @@ function LoginPage({
   const EmailInput = components.EmailInput ?? DefaultEmailInput;
   const MagicLinkBtn = components.MagicLinkButton ?? DefaultMagicLinkButton;
   const PasskeyBtn = components.PasskeyButton ?? DefaultPasskeyButton;
+  const PasskeySignUpBtn = components.PasskeySignUpButton ?? DefaultPasskeySignUpButton;
   const SuccessMsg = components.SuccessMessage ?? DefaultSuccessMessage;
   const ErrorMsg = components.ErrorMessage ?? DefaultErrorMessage;
   const [email, setEmail] = useState("");
@@ -161,11 +177,14 @@ function LoginPage({
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
   const [passkeyLoading, setPasskeyLoading] = useState(false);
+  const [passkeySignUpLoading, setPasskeySignUpLoading] = useState(false);
+  const canPasskeySignUp = !!(authClient?.signUp?.email && authClient?.passkey?.addPasskey);
   async function handleMagicLink() {
     if (!email.trim()) {
       setError("Please enter your email address.");
       return;
     }
+    if (!authClient) return;
     setLoading(true);
     setError(null);
     try {
@@ -183,6 +202,7 @@ function LoginPage({
     }
   }
   async function handlePasskey() {
+    if (!authClient) return;
     setPasskeyLoading(true);
     setError(null);
     try {
@@ -198,6 +218,36 @@ function LoginPage({
       setPasskeyLoading(false);
     }
   }
+  async function handlePasskeySignUp() {
+    if (!email.trim()) {
+      setError("Please enter your email address.");
+      return;
+    }
+    if (!authClient) return;
+    setPasskeySignUpLoading(true);
+    setError(null);
+    try {
+      const signUpResult = await authClient.signUp.email({
+        email,
+        password: crypto.randomUUID(),
+        name: ""
+      });
+      if (signUpResult.error) {
+        setError(signUpResult.error.message ?? "Sign-up failed.");
+        return;
+      }
+      const passkeyResult = await authClient.passkey.addPasskey();
+      if (passkeyResult?.error) {
+        setError(passkeyResult.error.message ?? "Passkey registration failed.");
+        return;
+      }
+      onSuccess?.();
+    } catch {
+      setError("Passkey sign-up failed. Please try again.");
+    } finally {
+      setPasskeySignUpLoading(false);
+    }
+  }
   return /* @__PURE__ */ jsxs(Layout, { children: [
     /* @__PURE__ */ jsx4("h2", { children: title }),
     subtitle && /* @__PURE__ */ jsx4("p", { children: subtitle }),
@@ -205,7 +255,14 @@ function LoginPage({
     sent ? /* @__PURE__ */ jsx4(SuccessMsg, { email }) : /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx4(EmailInput, { value: email, onChange: setEmail }),
       /* @__PURE__ */ jsx4("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ jsx4(MagicLinkBtn, { onClick: handleMagicLink, loading }) }),
-      authClient?.signIn?.passkey && /* @__PURE__ */ jsx4("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ jsx4(PasskeyBtn, { onClick: handlePasskey, loading: passkeyLoading }) })
+      authClient?.signIn?.passkey && /* @__PURE__ */ jsx4("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ jsx4(PasskeyBtn, { onClick: handlePasskey, loading: passkeyLoading }) }),
+      canPasskeySignUp && /* @__PURE__ */ jsx4("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ jsx4(
+        PasskeySignUpBtn,
+        {
+          onClick: handlePasskeySignUp,
+          loading: passkeySignUpLoading
+        }
+      ) })
     ] })
   ] });
 }
@@ -213,6 +270,7 @@ function LoginPage({
 // src/client/create-auth-client.ts
 import { createAuthClient } from "better-auth/react";
 import { magicLinkClient } from "better-auth/client/plugins";
+import { passkeyClient } from "@better-auth/passkey/client";
 export {
   AuthClientProvider,
   AuthGuard,

package/dist/index.js

@@ -2,6 +2,7 @@
 import { betterAuth } from "better-auth";
 import { drizzleAdapter } from "better-auth/adapters/drizzle";
 import { magicLink } from "better-auth/plugins/magic-link";
+import { passkey } from "@better-auth/passkey";
 import { drizzle } from "drizzle-orm/d1";
 import { resolveGrants } from "@cfast/permissions";
 
@@ -127,6 +128,15 @@ function createAuth(config) {
         magicLink({ sendMagicLink: config.magicLink.sendMagicLink })
       );
     }
+    if (config.passkeys) {
+      plugins.push(
+        passkey({
+          rpName: config.passkeys.rpName,
+          rpID: config.passkeys.rpId,
+          origin: env.appUrl
+        })
+      );
+    }
     const expiresIn = config.session?.expiresIn ? parseExpiresIn(config.session.expiresIn) : void 0;
     const auth = betterAuth({
       baseURL: env.appUrl,

package/llms.txt

@@ -110,17 +110,45 @@ useAuth(): UseAuthReturn                       // { signOut, registerPasskey, de
 // Login
 <LoginPage authClient={authClient} components? title? subtitle? />
 createAuthClient(): AuthClientInstance
+magicLinkClient(): plugin                          // re-exported from better-auth
+passkeyClient(): plugin                            // re-exported from @better-auth/passkey
 ```
 
 ### LoginComponents slots
 
 ```typescript
 type LoginComponents = {
-  Layout?, EmailInput?, PasskeyButton?, MagicLinkButton?,
-  SuccessMessage?, ErrorMessage?,
+  Layout?, EmailInput?, PasskeyButton?, PasskeySignUpButton?,
+  MagicLinkButton?, SuccessMessage?, ErrorMessage?,
 };
 ```
 
+### Passkey sign-up
+
+When the `authClient` passed to `<LoginPage>` has both `signUp.email` and `passkey.addPasskey` (i.e., the client was created with `passkeyClient()`), a "Sign up with Passkey" button appears automatically. The flow:
+
+1. User enters email, clicks "Sign up with Passkey"
+2. Account is created via `signUp.email` with a random password
+3. Browser's WebAuthn registration prompt fires immediately via `addPasskey()`
+4. User is signed up with a passkey — no magic link email needed
+
+To enable passkey sign-up, configure both server and client:
+
+```typescript
+// Server: createAuth config
+const initAuth = createAuth({
+  permissions,
+  passkeys: { rpName: "My App", rpId: "myapp.com" },
+  magicLink: { sendMagicLink: ... },
+});
+
+// Client: auth client
+import { createAuthClient, magicLinkClient, passkeyClient } from "@cfast/auth/client";
+const authClient = createAuthClient({
+  plugins: [magicLinkClient(), passkeyClient()],
+});
+```
+
 ### Route plugin (`@cfast/auth/plugin`)
 
 ```typescript
@@ -178,7 +206,7 @@ await auth.removeRole(userId, "editor");
 
 - **@cfast/permissions** -- `createAuth({ permissions })` takes the permissions config. Roles defined in permissions are the same roles assigned to users. `auth.requireUser()` returns `grants` resolved from the user's roles.
 - **@cfast/db** -- Pass `{ user, grants }` from `auth.requireUser()` directly to `createDb()`. Role changes via `auth.setRole()` take effect on the next request.
-- **@cfast/ui/joy** -- Provides `joyLoginComponents` for Joy UI styled login page slots.
+- **@cfast/joy** -- Provides `joyLoginComponents` for Joy UI styled login page slots.
 
 ## Common Mistakes
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cfast/auth",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Authentication for Cloudflare Workers: magic email, passkeys, roles, and impersonation",
   "keywords": [
     "cfast",
@@ -52,6 +52,7 @@
     "lint": "eslint src/"
   },
   "peerDependencies": {
+    "@better-auth/passkey": ">=1",
     "better-auth": ">=1",
     "drizzle-orm": ">=0.35",
     "react": ">=18"