azirid-react 0.10.1 → 0.10.3

package/README.md

@@ -81,11 +81,12 @@ AZIRID_API_URL=http://localhost:3000
 import { AziridProvider } from 'azirid-react'
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
+  const router = useRouter()
+
   return (
     <AziridProvider
       publishableKey={process.env.NEXT_PUBLIC_AZIRID_PK!}
-      onLoginSuccess={(data) => console.log('Logged in:', data.user)}
-      onLogoutSuccess={() => console.log('Logged out')}
+      onAuthStateChange={() => router.refresh()}
       onSessionExpired={() => (window.location.href = '/login')}
     >
       {children}
@@ -375,6 +376,8 @@ import { useBootstrap } from 'azirid-react'
 const { bootstrap, isBootstrapping } = useBootstrap()
 ```
 
+> **Note:** The automatic bootstrap on mount runs exactly once, even in React 18 Strict Mode (which double-mounts components in development). Hooks like `usePayphoneCheckout` and `<PayphoneCallback>` wait for bootstrap to complete before making authenticated requests.
+
 ### `useRefresh`
 
 Manually refresh the access token.
@@ -717,6 +720,8 @@ The hook handles both phases automatically:
 
 > **Important:** The redirect URL after payment is configured in the **Payphone Developer dashboard** (not passed via code). Make sure your Response URL points to the page where `usePayphoneCheckout` or `<PayphoneCallback>` is rendered.
 
+> **Session safety:** The confirmation request waits for the session bootstrap to complete before firing. This prevents 401 errors when Payphone redirects back and the page reloads — the SDK restores the session first, then confirms the payment.
+
 ### `usePayButton`
 
 Hook that returns **renderable components** and **state** for a complete payment flow. Supports all providers (Stripe, PayPal, Payphone, Manual Transfer, Nuvei). You control the layout.
@@ -926,7 +931,7 @@ import { InvoiceList } from 'azirid-react'
 
 #### `PayphoneCallback`
 
-Page component for handling Payphone payment callbacks. Reads `id` and `clientTransactionId` from URL query params automatically. Deploy this page at the **Response URL** configured in your Payphone Developer dashboard.
+Page component for handling Payphone payment callbacks. Reads `id` and `clientTransactionId` from URL query params automatically. Deploy this page at the **Response URL** configured in your Payphone Developer dashboard. The component waits for the session bootstrap to complete before confirming, preventing 401 errors on page reload.
 
 ```tsx
 // app/payphone/callback/page.tsx
@@ -1294,9 +1299,10 @@ function createAccessClient(
 | `publishableKey`   | `string`                  | —       | Publishable key (e.g. `pk_live_...`)                                             |
 | `tenantId`         | `string`                  | —       | Tenant ID for multi-tenant apps                                                  |
 | `fetchOptions`     | `Record<string, string>`  | —       | Extra headers to send with every request                                         |
-| `autoBootstrap`    | `boolean`                 | `true`  | Auto-restore session on mount                                                    |
+| `autoBootstrap`    | `boolean`                 | `true`  | Auto-restore session on mount. Runs once (safe in React 18 Strict Mode)          |
 | `refreshInterval`  | `number`                  | `50000` | Token refresh interval in ms. `0` to disable                                     |
 | `sessionSyncUrl`   | `string \| false`         | auto    | URL for session cookie sync. Auto-activates in dev mode. Pass `false` to disable |
+| `onAuthStateChange`| `() => void`              | —       | Called after login, signup, or logout. **In Next.js, pass `router.refresh()`** to sync server actions with updated cookies |
 | `onLoginSuccess`   | `(data) => void`          | —       | Called after successful login                                                    |
 | `onSignupSuccess`  | `(data) => void`          | —       | Called after successful signup                                                   |
 | `onLogoutSuccess`  | `() => void`              | —       | Called after logout                                                              |
@@ -1311,6 +1317,33 @@ function createAccessClient(
 
 `azirid-react` supports **Next.js 14, 15, and 16+** with full compatibility for each version's API conventions.
 
+### Server Actions & `onAuthStateChange`
+
+If you use **server actions** or **server components** that read the session token (via `createServerAccess`), you **must** pass `onAuthStateChange` to keep server-side cookies in sync:
+
+```tsx
+'use client'
+import { useRouter } from 'next/navigation'
+import { AziridProvider } from 'azirid-react'
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  const router = useRouter()
+
+  return (
+    <AziridProvider
+      publishableKey={process.env.NEXT_PUBLIC_AZIRID_PK!}
+      onAuthStateChange={() => router.refresh()}
+    >
+      {children}
+    </AziridProvider>
+  )
+}
+```
+
+**Why?** After login/signup/logout, azirid-react updates the `__session` cookie in the browser. But Next.js server actions keep using the old cookies until `router.refresh()` forces a new server request. Without this, server actions may return 401 after login.
+
+> **Not using server actions?** (e.g. pure client-side SPA with Vite) — you can skip `onAuthStateChange`.
+
 ### Proxy Route Handler (all versions)
 
 Create the file `app/api/auth/[...path]/route.ts` — one line is all you need:

package/dist/index.cjs

@@ -768,9 +768,15 @@ function AziridProviderInner({
     },
     [client]
   );
+  const bootstrapCalled = react.useRef(false);
   react.useEffect(() => {
     const autoBootstrap = props.autoBootstrap ?? true;
     if (!autoBootstrap) return;
+    if (bootstrapCalled.current) {
+      setIsBootstrapping(false);
+      return;
+    }
+    bootstrapCalled.current = true;
     let cancelled = false;
     async function bootstrap() {
       setIsBootstrapping(true);
@@ -3011,6 +3017,7 @@ function usePayButton({
   const [payphoneConfig, setPayphoneConfig] = react.useState(null);
   const [currentError, setCurrentError] = react.useState(null);
   const payphoneConfirmTriggered = react.useRef(false);
+  const { isBootstrapping } = useAzirid();
   const params = typeof window !== "undefined" ? new URLSearchParams(window.location.search) : new URLSearchParams();
   const callbackId = params.get("id");
   const callbackClientTxId = params.get("clientTransactionId");
@@ -3093,12 +3100,12 @@ function usePayButton({
     }
   });
   react.useEffect(() => {
-    if (!isPayphoneCallback || payphoneConfirmTriggered.current) return;
+    if (!isPayphoneCallback || payphoneConfirmTriggered.current || isBootstrapping) return;
     payphoneConfirmTriggered.current = true;
     setSelectedProvider("PAYPHONE");
     setStatus("processing");
     confirmPayphone({ id: Number(callbackId), clientTransactionId: callbackClientTxId });
-  }, [isPayphoneCallback, callbackId, callbackClientTxId, confirmPayphone]);
+  }, [isPayphoneCallback, isBootstrapping, callbackId, callbackClientTxId, confirmPayphone]);
   const handleSdkError = react.useCallback(
     (err) => {
       setCurrentError(err);
@@ -3532,16 +3539,17 @@ function PayphoneCallback({ onSuccess, onError, className, style }) {
     onSuccess,
     onError
   });
+  const { isBootstrapping } = useAzirid();
   const called = react.useRef(false);
   react.useEffect(() => {
-    if (called.current) return;
+    if (called.current || isBootstrapping) return;
     called.current = true;
     const params = new URLSearchParams(window.location.search);
     const id = params.get("id");
     const clientTransactionId = params.get("clientTransactionId");
     if (!id || !clientTransactionId) return;
     mutate({ id: Number(id), clientTransactionId });
-  }, [mutate]);
+  }, [mutate, isBootstrapping]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: { textAlign: "center", padding: "32px", ...style }, children: [
     isPending && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
       /* @__PURE__ */ jsxRuntime.jsx("p", { style: textStyle, children: "Confirming your payment..." }),
@@ -4043,6 +4051,7 @@ function usePayphoneCheckout({
   const [currentError, setCurrentError] = react.useState(null);
   const checkoutTriggered = react.useRef(false);
   const confirmTriggered = react.useRef(false);
+  const { isBootstrapping } = useAzirid();
   const params = typeof window !== "undefined" ? new URLSearchParams(window.location.search) : new URLSearchParams();
   const callbackId = params.get("id");
   const callbackClientTxId = params.get("clientTransactionId");
@@ -4084,11 +4093,11 @@ function usePayphoneCheckout({
     }
   });
   react.useEffect(() => {
-    if (!isCallback || confirmTriggered.current) return;
+    if (!isCallback || confirmTriggered.current || isBootstrapping) return;
     confirmTriggered.current = true;
     setStatus("confirming");
     confirm({ id: Number(callbackId), clientTransactionId: callbackClientTxId });
-  }, [isCallback, callbackId, callbackClientTxId, confirm]);
+  }, [isCallback, isBootstrapping, callbackId, callbackClientTxId, confirm]);
   const handleSdkError = react.useCallback(
     (err) => {
       setCurrentError(err);
@@ -4346,7 +4355,7 @@ function usePasswordToggle() {
 }
 
 // src/index.ts
-var SDK_VERSION = "0.10.1";
+var SDK_VERSION = "0.10.3";
 
 exports.AuthForm = AuthForm;
 exports.AziridProvider = AziridProvider;