azirid-react 0.10.0 → 0.10.2

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}
@@ -717,6 +718,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 +929,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
@@ -1297,6 +1300,7 @@ function createAccessClient(
 | `autoBootstrap`    | `boolean`                 | `true`  | Auto-restore session on mount                                                    |
 | `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 +1315,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

@@ -604,6 +604,7 @@ function useAuthMutations(deps) {
       updateAccessToken(normalizeToken(data));
       saveSessionTokens(data);
       setError(null);
+      props.onAuthStateChange?.();
       props.onLoginSuccess?.(data);
     },
     onError: (err) => {
@@ -621,6 +622,7 @@ function useAuthMutations(deps) {
       updateAccessToken(normalizeToken(data));
       saveSessionTokens(data);
       setError(null);
+      props.onAuthStateChange?.();
       props.onSignupSuccess?.(data);
     },
     onError: (err) => {
@@ -634,6 +636,7 @@ function useAuthMutations(deps) {
       clearSession();
       setError(null);
       queryClient.clear();
+      props.onAuthStateChange?.();
       props.onLogoutSuccess?.();
     }
   });
@@ -3008,6 +3011,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");
@@ -3090,12 +3094,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);
@@ -3529,16 +3533,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..." }),
@@ -4040,6 +4045,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");
@@ -4081,11 +4087,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);
@@ -4343,7 +4349,7 @@ function usePasswordToggle() {
 }
 
 // src/index.ts
-var SDK_VERSION = "0.10.0";
+var SDK_VERSION = "0.10.2";
 
 exports.AuthForm = AuthForm;
 exports.AziridProvider = AziridProvider;