azirid-react 0.13.0 → 0.13.1

package/README.md

@@ -1381,29 +1381,31 @@ The Azirid dashboard lets admins click "Sign in as user" to impersonate any end
 
 **How it works:**
 1. Admin clicks "Sign in as user" in the Azirid dashboard
-2. Dashboard generates a one-time code (valid for 60 seconds) and redirects to your app at `/auth/handoff?code=<code>`
-3. Your app renders `<HandoffCallback>`, which calls `client.exchangeHandoff(code)` to exchange the code for session tokens
-4. The user is signed in as the impersonated user — access token, refresh token, and CSRF token are all stored as normal
+2. Dashboard generates a one-time handoff code (valid for 5 minutes) and redirects to your app at `/auth/handoff?code=<code>&api=<apiUrl>`
+3. Your app renders `<HandoffCallback>`, which exchanges the code for session tokens directly with the API
+4. Tokens are stored in `sessionStorage` — on redirect to `/`, `AziridProvider` picks them up automatically
+
+> **`<HandoffCallback>` is fully standalone** — it does NOT depend on `AziridProvider`. It works even when the provider wraps the entire layout and its bootstrap would redirect to `/login`. No special route groups or layout changes needed.
 
 **Setup — create the handoff page:**
 
 ```tsx
 // app/auth/handoff/page.tsx
 'use client'
-import { useRouter } from 'next/navigation'
 import { HandoffCallback } from 'azirid-react'
 
 export default function HandoffPage() {
-  const router = useRouter()
   return (
     <HandoffCallback
-      onSuccess={() => router.push('/')}
-      onError={() => router.push('/login')}
+      onSuccess={() => window.location.href = '/'}
+      onError={() => window.location.href = '/login'}
     />
   )
 }
 ```
 
+> **Important:** Use `window.location.href` (not `router.push()`) for redirects. This triggers a full page reload so `AziridProvider` re-bootstraps with the new tokens.
+
 **Props:**
 
 | Prop | Type | Default | Description |
@@ -1413,10 +1415,10 @@ export default function HandoffPage() {
 | `loadingText` | `string` | `"Signing you in..."` | Text shown while the exchange is in progress |
 | `errorText` | `string` | `"Failed to complete sign-in. The link may have expired."` | Fallback error text |
 
-You can also call `client.exchangeHandoff(code)` directly if you prefer a headless approach:
+You can also call `client.exchangeHandoff(code, apiUrl)` directly if you prefer a headless approach:
 
 ```ts
-const { user } = await client.exchangeHandoff(code)
+const { user } = await client.exchangeHandoff(code, 'https://api.azirid.com/v1')
 ```
 
 ---

package/dist/index.cjs

@@ -386,7 +386,8 @@ function createAccessClient(config, appContext) {
     }
     return json;
   }
-  async function exchangeHandoff(code) {
+  async function exchangeHandoff(code, apiUrl) {
+    const exchangeBase = apiUrl?.replace(/\/+$/, "") ?? baseUrl;
     const headers = {
       "Content-Type": "application/json",
       ...config.headers
@@ -396,7 +397,7 @@ function createAccessClient(config, appContext) {
     }
     const devId = getOrCreateDeviceId();
     if (devId) headers["X-Device-Id"] = devId;
-    const res = await fetch(`${baseUrl}/v1/users/auth/handoff/exchange`, {
+    const res = await fetch(`${exchangeBase}/users/auth/handoff/exchange`, {
       method: "POST",
       headers,
       credentials: "include",
@@ -4007,7 +4008,6 @@ function HandoffCallback({
   loadingText = "Signing you in...",
   errorText = "Failed to complete sign-in. The link may have expired."
 }) {
-  const client = useAccessClient();
   const [status, setStatus] = react.useState("loading");
   const [errorMessage, setErrorMessage] = react.useState(null);
   const attempted = react.useRef(false);
@@ -4016,21 +4016,49 @@ function HandoffCallback({
     attempted.current = true;
     const params = new URLSearchParams(window.location.search);
     const code = params.get("code");
+    const apiUrl = params.get("api");
     if (!code) {
       setStatus("error");
       setErrorMessage("No handoff code provided");
       onError?.(new Error("No handoff code provided"));
       return;
     }
-    client.exchangeHandoff(code).then((result) => {
-      onSuccess?.(result.user);
+    if (!apiUrl) {
+      setStatus("error");
+      setErrorMessage("No API URL provided");
+      onError?.(new Error("No API URL in handoff link"));
+      return;
+    }
+    const exchangeUrl = `${apiUrl.replace(/\/+$/, "")}/users/auth/handoff/exchange`;
+    fetch(exchangeUrl, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      credentials: "include",
+      body: JSON.stringify({ code })
+    }).then(async (res) => {
+      if (!res.ok) {
+        const body = await res.json().catch(() => null);
+        throw new Error(body?.error?.message ?? body?.message ?? "Handoff exchange failed");
+      }
+      return res.json();
+    }).then((raw) => {
+      const json = raw && typeof raw === "object" && "data" in raw && "meta" in raw ? raw.data : raw;
+      json.at ?? json.accessToken;
+      const refreshToken = json.rt ?? json.refreshToken;
+      const csrfToken = json.xc ?? json.csrfToken;
+      try {
+        if (refreshToken) sessionStorage.setItem("__azrt", refreshToken);
+        if (csrfToken) sessionStorage.setItem("__azxc", csrfToken);
+      } catch {
+      }
+      onSuccess?.(json.user);
     }).catch((err) => {
       setStatus("error");
       const error = err instanceof Error ? err : new Error("Handoff exchange failed");
       setErrorMessage(error.message);
       onError?.(error);
     });
-  }, [client, onSuccess, onError]);
+  }, [onSuccess, onError]);
   if (status === "error") {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { style: wrapperStyle, children: /* @__PURE__ */ jsxRuntime.jsx("p", { style: { ...messageStyle2, color: "#ef4444" }, children: errorMessage || errorText }) });
   }
@@ -4847,7 +4875,7 @@ function usePasswordToggle() {
 }
 
 // src/index.ts
-var SDK_VERSION = "0.13.0";
+var SDK_VERSION = "0.13.1";
 
 exports.AuthForm = AuthForm;
 exports.AziridProvider = AziridProvider;