@bounc.ing/next 0.2.1 → 0.3.0

package/dist/client/passkey.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface PasskeyButtonProps {
+    mode: 'register' | 'login';
+    className?: string;
+    children?: React.ReactNode;
+}
+export declare function PasskeyButton({ mode, className, children }: PasskeyButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/client/passkey.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRegisterPasskey, useLoginWithPasskey } from './use-passkey.js';
+export function PasskeyButton({ mode, className, children }) {
+    if (mode === 'register') {
+        return _jsx(RegisterPasskeyButton, { className: className, children: children });
+    }
+    return _jsx(LoginPasskeyButton, { className: className, children: children });
+}
+function RegisterPasskeyButton({ className, children }) {
+    const { register, isRegistering, error, registered } = useRegisterPasskey();
+    if (registered)
+        return _jsx("span", { className: className, children: "Passkey added \u2713" });
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: className, onClick: () => register(), disabled: isRegistering, children: children ?? (isRegistering ? 'Adding...' : 'Add a passkey') }), error && _jsx("p", { style: { color: 'red', fontSize: '0.85em' }, children: error.message })] }));
+}
+function LoginPasskeyButton({ className, children }) {
+    const { login, isLoggingIn, error } = useLoginWithPasskey();
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: className, onClick: () => login(), disabled: isLoggingIn, children: children ?? (isLoggingIn ? 'Signing in...' : 'Sign in with a passkey') }), error && _jsx("p", { style: { color: 'red', fontSize: '0.85em' }, children: error.message })] }));
+}

package/dist/client/sign-in.js

@@ -2,16 +2,21 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useState, useEffect } from 'react';
 import { useBouncingContext } from './provider.js';
+import { PasskeyButton } from './passkey.js';
 export function SignIn({ className }) {
     const { domain } = useBouncingContext();
     const [providers, setProviders] = useState([]);
+    const [passkeysEnabled, setPasskeysEnabled] = useState(false);
     useEffect(() => {
         fetch(`https://${domain}/auth/providers`)
             .then((res) => res.json())
-            .then((data) => setProviders(data.providers))
+            .then((data) => {
+            setProviders(data.providers);
+            setPasskeysEnabled(!!data.passkeys);
+        })
             .catch(() => { });
     }, [domain]);
-    if (providers.length === 0)
+    if (providers.length === 0 && !passkeysEnabled)
         return null;
-    return (_jsx("div", { className: className, children: providers.map((provider) => (_jsxs("a", { href: `https://${domain}/auth/oauth/${provider}`, style: { display: 'inline-block', margin: '0.25rem' }, children: ["Sign in with ", provider.charAt(0).toUpperCase() + provider.slice(1)] }, provider))) }));
+    return (_jsxs("div", { className: className, children: [providers.map((provider) => (_jsxs("a", { href: `https://${domain}/auth/oauth/${provider}`, style: { display: 'inline-block', margin: '0.25rem' }, children: ["Sign in with ", provider.charAt(0).toUpperCase() + provider.slice(1)] }, provider))), passkeysEnabled && (_jsx("div", { style: { margin: '0.25rem' }, children: _jsx(PasskeyButton, { mode: "login" }) }))] }));
 }

package/dist/client/use-passkey.d.ts

@@ -0,0 +1,14 @@
+interface RegisterResult {
+    register: (deviceName?: string) => Promise<void>;
+    isRegistering: boolean;
+    error: Error | null;
+    registered: boolean;
+}
+export declare function useRegisterPasskey(): RegisterResult;
+interface LoginResult {
+    login: () => Promise<void>;
+    isLoggingIn: boolean;
+    error: Error | null;
+}
+export declare function useLoginWithPasskey(): LoginResult;
+export {};

package/dist/client/use-passkey.js

@@ -0,0 +1,76 @@
+'use client';
+import { useState, useCallback } from 'react';
+import { startRegistration, startAuthentication } from '@simplewebauthn/browser';
+import { useBouncingContext } from './provider.js';
+export function useRegisterPasskey() {
+    const { domain } = useBouncingContext();
+    const [isRegistering, setIsRegistering] = useState(false);
+    const [error, setError] = useState(null);
+    const [registered, setRegistered] = useState(false);
+    const register = useCallback(async (deviceName) => {
+        setIsRegistering(true);
+        setError(null);
+        try {
+            const beginRes = await fetch(`https://${domain}/auth/webauthn/register/begin`, {
+                method: 'POST',
+                credentials: 'include',
+            });
+            if (!beginRes.ok)
+                throw new Error(`begin failed: ${beginRes.status}`);
+            const options = await beginRes.json();
+            const response = await startRegistration({ optionsJSON: options });
+            const finishRes = await fetch(`https://${domain}/auth/webauthn/register/finish`, {
+                method: 'POST',
+                credentials: 'include',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ response, deviceName }),
+            });
+            if (!finishRes.ok)
+                throw new Error(`finish failed: ${finishRes.status}`);
+            setRegistered(true);
+        }
+        catch (e) {
+            setError(e instanceof Error ? e : new Error(String(e)));
+        }
+        finally {
+            setIsRegistering(false);
+        }
+    }, [domain]);
+    return { register, isRegistering, error, registered };
+}
+export function useLoginWithPasskey() {
+    const { domain } = useBouncingContext();
+    const [isLoggingIn, setIsLoggingIn] = useState(false);
+    const [error, setError] = useState(null);
+    const login = useCallback(async () => {
+        setIsLoggingIn(true);
+        setError(null);
+        try {
+            const beginRes = await fetch(`https://${domain}/auth/webauthn/login/begin`, {
+                method: 'POST',
+                credentials: 'include',
+            });
+            if (!beginRes.ok)
+                throw new Error(`begin failed: ${beginRes.status}`);
+            const options = await beginRes.json();
+            const response = await startAuthentication({ optionsJSON: options });
+            const finishRes = await fetch(`https://${domain}/auth/webauthn/login/finish`, {
+                method: 'POST',
+                credentials: 'include',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ response }),
+            });
+            if (!finishRes.ok)
+                throw new Error(`finish failed: ${finishRes.status}`);
+            // Reload to pick up new auth cookies
+            window.location.reload();
+        }
+        catch (e) {
+            setError(e instanceof Error ? e : new Error(String(e)));
+        }
+        finally {
+            setIsLoggingIn(false);
+        }
+    }, [domain]);
+    return { login, isLoggingIn, error };
+}

package/dist/client.d.ts

@@ -2,3 +2,5 @@ export { BouncingProvider } from './client/provider.js';
 export { useUser } from './client/use-user.js';
 export { SignIn } from './client/sign-in.js';
 export { UserButton } from './client/user-button.js';
+export { PasskeyButton } from './client/passkey.js';
+export { useRegisterPasskey, useLoginWithPasskey } from './client/use-passkey.js';

package/dist/client.js

@@ -2,3 +2,5 @@ export { BouncingProvider } from './client/provider.js';
 export { useUser } from './client/use-user.js';
 export { SignIn } from './client/sign-in.js';
 export { UserButton } from './client/user-button.js';
+export { PasskeyButton } from './client/passkey.js';
+export { useRegisterPasskey, useLoginWithPasskey } from './client/use-passkey.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bounc.ing/next",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Bouncing auth SDK for Next.js — auth for your app in 3 minutes",
   "type": "module",
   "exports": {
@@ -28,16 +28,19 @@
     "react-dom": ">=19.0.0"
   },
   "dependencies": {
+    "@simplewebauthn/browser": "^13.3.0",
     "jose": "^6.0.0"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",
-    "react": "^19.0.0",
     "next": "^15.0.0",
+    "react": "^19.0.0",
     "typescript": "^6.0.0",
     "vitest": "^4.1.0"
   },
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "license": "Apache-2.0",
   "repository": {
     "type": "git",