@delmaredigital/payload-better-auth 0.5.2 → 0.5.3

package/README.md

@@ -12,6 +12,8 @@ Better Auth adapter and plugins for Payload CMS. Enables seamless integration be
   <a href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fdelmaredigital%2Fdd-starter&project-name=my-payload-site&build-command=pnpm%20run%20ci&env=PAYLOAD_SECRET,BETTER_AUTH_SECRET&stores=%5B%7B%22type%22%3A%22integration%22%2C%22protocol%22%3A%22storage%22%2C%22productSlug%22%3A%22neon%22%2C%22integrationSlug%22%3A%22neon%22%7D%2C%7B%22type%22%3A%22blob%22%7D%5D"><img src="https://vercel.com/button" alt="Deploy with Vercel" height="32"></a>
 </p>
 
+> **Upgrading to 0.5?** This release requires Better Auth 1.5 and includes breaking changes to client plugins, API key imports, and auth instance types. See the [CHANGELOG](./CHANGELOG.md#053---2026-03-01) for migration instructions.
+
 ---
 
 ## Documentation

package/dist/components/LoginView.d.ts

@@ -1,7 +1,6 @@
-import { type PayloadAuthClient } from '../exports/client.js';
 export type LoginViewProps = {
     /** Optional pre-configured auth client */
-    authClient?: PayloadAuthClient;
+    authClient?: any;
     /** Custom logo element */
     logo?: React.ReactNode;
     /** Login page title. Default: 'Login' */

package/dist/components/LoginView.js

@@ -1,8 +1,9 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useRouter } from 'next/navigation.js';
-import { createPayloadAuthClient } from '../exports/client.js';
+import { createAuthClient } from 'better-auth/react';
+import { twoFactorClient } from 'better-auth/client/plugins';
 import { hasAnyRole, hasAllRoles } from '../utils/access.js';
 /**
  * Check if user has the required role(s)
@@ -42,12 +43,25 @@ export function LoginView({ authClient: providedClient, logo, title = 'Login', a
     // Two-factor authentication state
     const [totpCode, setTotpCode] = useState('');
     const [totpLoading, setTotpLoading] = useState(false);
-    const getClient = ()=>providedClient ?? createPayloadAuthClient();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const clientRef = useRef(null);
+    const getClient = async ()=>{
+        if (providedClient) return providedClient;
+        if (clientRef.current) return clientRef.current;
+        const { passkeyClient } = await import('@better-auth/passkey/client');
+        clientRef.current = createAuthClient({
+            plugins: [
+                twoFactorClient(),
+                passkeyClient()
+            ]
+        });
+        return clientRef.current;
+    };
     // Check if user is already logged in on mount
     useEffect(()=>{
         async function checkSession() {
             try {
-                const client = getClient();
+                const client = await getClient();
                 const result = await client.getSession();
                 if (result.data?.user) {
                     const user = result.data.user;
@@ -140,7 +154,7 @@ export function LoginView({ authClient: providedClient, logo, title = 'Login', a
         setSuccessMessage(null);
         setAccessDenied(false);
         try {
-            const client = getClient();
+            const client = await getClient();
             const result = await client.signIn.email({
                 email,
                 password
@@ -190,7 +204,7 @@ export function LoginView({ authClient: providedClient, logo, title = 'Login', a
             return;
         }
         try {
-            const client = getClient();
+            const client = await getClient();
             const result = await client.signUp.email({
                 email,
                 password,
@@ -237,7 +251,7 @@ export function LoginView({ authClient: providedClient, logo, title = 'Login', a
         setError(null);
         setSuccessMessage(null);
         try {
-            const client = getClient();
+            const client = await getClient();
             const result = await client.requestPasswordReset({
                 email,
                 redirectTo: resetPasswordUrl ?? `${window.location.origin}/admin/reset-password`
@@ -260,7 +274,7 @@ export function LoginView({ authClient: providedClient, logo, title = 'Login', a
         setTotpLoading(true);
         setError(null);
         try {
-            const client = getClient();
+            const client = await getClient();
             const result = await client.twoFactor.verifyTotp({
                 code: totpCode
             });
@@ -313,7 +327,7 @@ export function LoginView({ authClient: providedClient, logo, title = 'Login', a
         setError(null);
         setAccessDenied(false);
         try {
-            const client = getClient();
+            const client = await getClient();
             const result = await client.signIn.passkey();
             if (result.error) {
                 setError(result.error.message ?? 'Passkey authentication failed');
@@ -348,7 +362,7 @@ export function LoginView({ authClient: providedClient, logo, title = 'Login', a
         }
     }
     async function handleSignOut() {
-        const client = getClient();
+        const client = await getClient();
         await client.signOut();
         setAccessDenied(false);
         router.refresh();

package/dist/components/PasskeyRegisterButton.d.ts

@@ -1,8 +1,7 @@
 import { type ButtonHTMLAttributes } from 'react';
-import { type PayloadAuthClient } from '../exports/client.js';
 export type PasskeyRegisterButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> & {
     /** Optional pre-configured auth client */
-    authClient?: PayloadAuthClient;
+    authClient?: any;
     /** Optional name for the passkey */
     passkeyName?: string;
     /** Callback when registration succeeds */

package/dist/components/PasskeyRegisterButton.js

@@ -1,7 +1,8 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import { createPayloadAuthClient } from '../exports/client.js';
+import { useState, useRef } from 'react';
+import { createAuthClient } from 'better-auth/react';
+import { twoFactorClient } from 'better-auth/client/plugins';
 /**
  * Standalone passkey registration button component.
  * Handles the WebAuthn registration flow with Better Auth.
@@ -27,10 +28,24 @@ import { createPayloadAuthClient } from '../exports/client.js';
  * ```
  */ export function PasskeyRegisterButton({ authClient: providedClient, passkeyName, onSuccess, onError, label = 'Add Passkey', loadingLabel = 'Registering...', disabled, children, ...buttonProps }) {
     const [loading, setLoading] = useState(false);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const clientRef = useRef(null);
+    async function getClient() {
+        if (providedClient) return providedClient;
+        if (clientRef.current) return clientRef.current;
+        const { passkeyClient } = await import('@better-auth/passkey/client');
+        clientRef.current = createAuthClient({
+            plugins: [
+                twoFactorClient(),
+                passkeyClient()
+            ]
+        });
+        return clientRef.current;
+    }
     async function handleClick() {
         setLoading(true);
         try {
-            const client = providedClient ?? createPayloadAuthClient();
+            const client = await getClient();
             const result = await client.passkey.addPasskey({
                 name: passkeyName
             });

package/dist/components/PasskeySignInButton.d.ts

@@ -1,8 +1,7 @@
 import { type ButtonHTMLAttributes } from 'react';
-import { type PayloadAuthClient } from '../exports/client.js';
 export type PasskeySignInButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> & {
     /** Optional pre-configured auth client */
-    authClient?: PayloadAuthClient;
+    authClient?: any;
     /** Callback when sign-in succeeds */
     onSuccess?: (user: {
         id: string;

package/dist/components/PasskeySignInButton.js

@@ -1,7 +1,8 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import { createPayloadAuthClient } from '../exports/client.js';
+import { useState, useRef } from 'react';
+import { createAuthClient } from 'better-auth/react';
+import { twoFactorClient } from 'better-auth/client/plugins';
 /**
  * Standalone passkey sign-in button component.
  * Handles the WebAuthn authentication flow with Better Auth.
@@ -25,10 +26,24 @@ import { createPayloadAuthClient } from '../exports/client.js';
  * ```
  */ export function PasskeySignInButton({ authClient: providedClient, onSuccess, onError, label = 'Sign in with Passkey', loadingLabel = 'Authenticating...', disabled, children, ...buttonProps }) {
     const [loading, setLoading] = useState(false);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const clientRef = useRef(null);
+    async function getClient() {
+        if (providedClient) return providedClient;
+        if (clientRef.current) return clientRef.current;
+        const { passkeyClient } = await import('@better-auth/passkey/client');
+        clientRef.current = createAuthClient({
+            plugins: [
+                twoFactorClient(),
+                passkeyClient()
+            ]
+        });
+        return clientRef.current;
+    }
     async function handleClick() {
         setLoading(true);
         try {
-            const client = providedClient ?? createPayloadAuthClient();
+            const client = await getClient();
             const result = await client.signIn.passkey();
             if (result.error) {
                 onError?.(result.error.message ?? 'Passkey authentication failed');

package/dist/components/management/ApiKeysManagementClient.js

@@ -2,7 +2,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useMemo, useRef } from 'react';
 import { createAuthClient } from 'better-auth/react';
-import { apiKeyClient } from '@better-auth/api-key/client';
 /**
  * Group scopes by collection for the UI.
  * Scopes like "posts:read", "posts:write" get grouped under "Posts"
@@ -90,11 +89,19 @@ import { apiKeyClient } from '@better-auth/api-key/client';
     }, [
         scopeGroups
     ]);
-    const getClient = ()=>providedClient ?? createAuthClient({
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const clientRef = useRef(null);
+    const getClient = async ()=>{
+        if (providedClient) return providedClient;
+        if (clientRef.current) return clientRef.current;
+        const { apiKeyClient } = await import('@better-auth/api-key/client');
+        clientRef.current = createAuthClient({
             plugins: [
                 apiKeyClient()
             ]
         });
+        return clientRef.current;
+    };
     // Toggle a scope selection
     function toggleScope(scopeId) {
         setSelectedScopes((prev)=>prev.includes(scopeId) ? prev.filter((s)=>s !== scopeId) : [
@@ -198,7 +205,7 @@ import { apiKeyClient } from '@better-auth/api-key/client';
         setLoading(true);
         setError(null);
         try {
-            const client = getClient();
+            const client = await getClient();
             const result = await client.apiKey.list();
             if (result.error) {
                 setError(result.error.message ?? 'Failed to load API keys');
@@ -218,7 +225,7 @@ import { apiKeyClient } from '@better-auth/api-key/client';
         setError(null);
         setNewlyCreatedKey(null);
         try {
-            const client = getClient();
+            const client = await getClient();
             // Send scopes to server - server will convert to permissions
             const createOptions = {
                 name: newKeyName
@@ -254,7 +261,7 @@ import { apiKeyClient } from '@better-auth/api-key/client';
         setDeleting(keyId);
         setError(null);
         try {
-            const client = getClient();
+            const client = await getClient();
             const result = await client.apiKey.delete({
                 keyId
             });

package/dist/components/management/PasskeysManagementClient.d.ts

@@ -1,7 +1,6 @@
-import { type PayloadAuthClient } from '../../exports/client.js';
 export type PasskeysManagementClientProps = {
     /** Optional pre-configured auth client */
-    authClient?: PayloadAuthClient;
+    authClient?: any;
     /** Page title. Default: 'Passkeys' */
     title?: string;
 };

package/dist/components/management/PasskeysManagementClient.js

@@ -1,10 +1,11 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { Button, Banner } from '@payloadcms/ui';
 import { PlusIcon } from '@payloadcms/ui/icons/Plus';
 import { XIcon } from '@payloadcms/ui/icons/X';
-import { createPayloadAuthClient } from '../../exports/client.js';
+import { createAuthClient } from 'better-auth/react';
+import { twoFactorClient } from 'better-auth/client/plugins';
 /**
  * Client component for passkey management.
  * Lists, registers, and deletes passkeys.
@@ -17,7 +18,20 @@ import { createPayloadAuthClient } from '../../exports/client.js';
     const [deleting, setDeleting] = useState(null);
     const [showRegisterForm, setShowRegisterForm] = useState(false);
     const [passkeyName, setPasskeyName] = useState('');
-    const getClient = ()=>providedClient ?? createPayloadAuthClient();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const clientRef = useRef(null);
+    const getClient = async ()=>{
+        if (providedClient) return providedClient;
+        if (clientRef.current) return clientRef.current;
+        const { passkeyClient } = await import('@better-auth/passkey/client');
+        clientRef.current = createAuthClient({
+            plugins: [
+                twoFactorClient(),
+                passkeyClient()
+            ]
+        });
+        return clientRef.current;
+    };
     useEffect(()=>{
         fetchPasskeys();
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -26,7 +40,7 @@ import { createPayloadAuthClient } from '../../exports/client.js';
         setLoading(true);
         setError(null);
         try {
-            const client = getClient();
+            const client = await getClient();
             const result = await client.passkey.listUserPasskeys();
             if (result.error) {
                 setError(result.error.message ?? 'Failed to load passkeys');
@@ -44,7 +58,7 @@ import { createPayloadAuthClient } from '../../exports/client.js';
         setError(null);
         setSuccess(null);
         try {
-            const client = getClient();
+            const client = await getClient();
             const result = await client.passkey.addPasskey({
                 name: passkeyName || undefined
             });
@@ -76,7 +90,7 @@ import { createPayloadAuthClient } from '../../exports/client.js';
         setError(null);
         setSuccess(null);
         try {
-            const client = getClient();
+            const client = await getClient();
             const result = await client.passkey.deletePasskey({
                 id: passkeyId
             });

package/dist/components/management/TwoFactorManagementClient.d.ts

@@ -1,7 +1,6 @@
-import { type PayloadAuthClient } from '../../exports/client.js';
 export type TwoFactorManagementClientProps = {
     /** Optional pre-configured auth client */
-    authClient?: PayloadAuthClient;
+    authClient?: any;
     /** Page title. Default: 'Two-Factor Authentication' */
     title?: string;
     /** Called after 2FA is enabled or disabled. Use to refresh form state. */