azirid-react 0.13.1 → 0.14.0

package/README.md

@@ -23,71 +23,19 @@ npm install react react-dom @tanstack/react-query
 
 ---
 
-## Architecture: Proxy vs Direct Mode
+## Quick Start — Next.js
 
-`azirid-react` supports two connection modes to the Azirid API. Choose the one that fits your stack:
-
-|                  | Proxy mode                                    | Direct mode                   |
-| ---------------- | --------------------------------------------- | ----------------------------- |
-| **Best for**     | Next.js (App Router)                          | React SPA (Vite, CRA, Remix)  |
-| **Security**     | First-party cookies, no CORS                  | Requires CORS on API          |
-| **Setup**        | Route handler + Provider                      | Provider only                 |
-| **How it works** | Browser → your app `/api/auth/*` → Azirid API | Browser → Azirid API directly |
-
-### Proxy mode (recommended for Next.js)
-
-Requests go to your Next.js app's `/api/auth/*` route handler, which securely proxies them to the Azirid API. Cookies are first-party (same domain), so no CORS configuration is needed.
-
-```tsx
-// No apiUrl prop → proxy mode is activated automatically
-<AziridProvider publishableKey="pk_live_...">
-```
-
-### Direct mode (for React SPA / Vite)
-
-Requests go directly to the Azirid API. Requires CORS to be configured on the API server.
-
-```tsx
-// apiUrl prop → direct mode
-<AziridProvider apiUrl="https://api.azirid.com" publishableKey="pk_live_...">
-```
-
----
-
-## Quick Start — Next.js (Proxy Mode)
-
-### 1. Create the route handler
-
-```ts
-// app/api/auth/[...path]/route.ts
-export { GET, POST, PUT, PATCH, DELETE } from 'azirid-react/next/handlers'
-```
-
-That's it. The SDK handles proxy logic, cookie fixing, and header forwarding internally. Works with Next.js 14, 15, and 16+ automatically — including `output: 'standalone'` builds.
-
-### 2. Set the API URL (optional)
-
-```env
-# .env (server-side only — never exposed to the browser)
-# Default: https://api.azirid.com
-# For local development with the API running locally:
-AZIRID_API_URL=http://localhost:3000
-```
-
-### 3. Wrap your app with `<AziridProvider>`
+### 1. Wrap your app with `<AziridProvider>`
 
 ```tsx
 // app/layout.tsx
 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!}
-      onAuthStateChange={() => router.refresh()}
-      onSessionExpired={() => (window.location.href = '/login')}
+      apiUrl={process.env.NEXT_PUBLIC_AZIRID_API_URL}
     >
       {children}
     </AziridProvider>
@@ -95,7 +43,25 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 }
 ```
 
-### 4. Add the login page
+### 2. Add route protection (optional)
+
+```ts
+// proxy.ts (Next.js 16+)
+import { createAziridProxy } from 'azirid-react/next/proxy'
+
+export const proxy = createAziridProxy({
+  protectedRoutes: ['/dashboard'],
+  loginUrl: '/login',
+})
+
+export const config = {
+  matcher: ['/((?!_next|favicon.ico|api/).*)'],
+}
+```
+
+The middleware validates JWTs using JWKS and protects routes automatically.
+
+### 3. Add the login page
 
 ```tsx
 // app/login/page.tsx
@@ -106,21 +72,30 @@ export default function LoginPage() {
 }
 ```
 
+### 4. Configure your environment
+
+```env
+# .env
+NEXT_PUBLIC_AZIRID_API_URL=https://api.azirid.com
+NEXT_PUBLIC_AZIRID_PK=pk_live_...
+# Server-side only (used by middleware for JWKS validation)
+AZIRID_API_URL=https://api.azirid.com
+```
+
 ---
 
-## Quick Start — React SPA (Direct Mode)
+## Quick Start — React SPA (Vite)
 
 ### 1. Wrap your app with `<AziridProvider>`
 
 ```tsx
-// main.tsx (Vite / CRA)
+// main.tsx
 import { AziridProvider } from 'azirid-react'
 
 createRoot(document.getElementById('root')!).render(
   <AziridProvider
     apiUrl={import.meta.env.VITE_AZIRID_API_URL || 'https://api.azirid.com'}
     publishableKey={import.meta.env.VITE_AZIRID_PK}
-    onLoginSuccess={(data) => console.log('Logged in:', data.user)}
   >
     <App />
   </AziridProvider>,
@@ -130,7 +105,6 @@ createRoot(document.getElementById('root')!).render(
 ### 2. Configure your environment
 
 ```env
-# .env
 VITE_AZIRID_API_URL=https://api.azirid.com
 VITE_AZIRID_PK=pk_live_...
 ```
@@ -145,8 +119,6 @@ export default function LoginPage() {
 }
 ```
 
-No route handler or proxy needed — requests go directly to the API.
-
 ---
 
 ## Components
@@ -1293,14 +1265,13 @@ The badge renders automatically below each built-in form component (`LoginForm`,
 Under the hood `AziridProvider` creates an `AccessClient` via `createAccessClient`. You can also create a client directly to make raw API calls.
 
 ```ts
-import { createAccessClient, BASE_PATHS } from 'azirid-react'
+import { createAccessClient, AUTH_BASE_PATH } from 'azirid-react'
 import type { AccessClientConfig } from 'azirid-react'
 
-// Direct mode — point to the API
 const client = createAccessClient(
   {
     baseUrl: 'https://api.azirid.com',
-    basePath: BASE_PATHS.direct, // '/v1/users/auth'
+    basePath: AUTH_BASE_PATH, // '/v1/users/auth'
   },
   { publishableKey: 'pk_live_...' },
 )
@@ -1335,14 +1306,13 @@ function createAccessClient(
 | Prop               | Type                      | Default | Description                                                                      |
 | ------------------ | ------------------------- | ------- | -------------------------------------------------------------------------------- |
 | `children`         | `ReactNode`               | —       | **Required.** Your app tree                                                      |
-| `apiUrl`           | `string`                  | —       | API URL for direct mode. Omit for proxy mode (recommended in Next.js)            |
+| `apiUrl`           | `string`                  | `https://api.azirid.com` | Azirid API URL. Set for local dev or custom deployments    |
 | `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. 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 |
+| `onAuthStateChange`| `() => void`              | —       | Called after login, signup, or logout                                            |
 | `onLoginSuccess`   | `(data) => void`          | —       | Called after successful login                                                    |
 | `onSignupSuccess`  | `(data) => void`          | —       | Called after successful signup                                                   |
 | `onLogoutSuccess`  | `() => void`              | —       | Called after logout                                                              |
@@ -1454,78 +1424,14 @@ export function Providers({ children }: { children: React.ReactNode }) {
 
 > **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:
-
-```ts
-// app/api/auth/[...path]/route.ts
-export { GET, POST, PUT, PATCH, DELETE } from 'azirid-react/next/handlers'
-```
+### Middleware — Route Protection & JWT Validation
 
-That's it. The SDK handles all the proxy logic, cookie fixing, and header forwarding internally.
-It works with Next.js 14, 15, and 16+ automatically — including `output: 'standalone'` builds.
-
-### Custom API URL or debug logging
-
-```ts
-// app/api/auth/[...path]/route.ts
-import { createAziridRouteHandlers } from 'azirid-react/next/handlers'
-
-export const { GET, POST, PUT, PATCH, DELETE } = createAziridRouteHandlers({
-  apiUrl: 'https://my-custom-api.com',
-  debug: true, // logs proxy requests to console
-})
-```
-
-### Environment variable
-
-The proxy reads `AZIRID_API_URL` (server-side only) to know where to forward requests:
-
-```env
-# .env
-# Default: https://api.azirid.com
-# For local development:
-AZIRID_API_URL=http://localhost:3000
-```
-
-> **Important:** Use `AZIRID_API_URL` (without `NEXT_PUBLIC_` prefix) — the API URL should never be exposed to the browser. The proxy runs server-side only.
-
-### Next.js Config
-
-#### Next.js 16+ (`next.config.ts`)
-
-Turbopack is the default bundler — `transpilePackages` is no longer needed:
-
-```ts
-// next.config.ts
-import type { NextConfig } from 'next'
-
-const nextConfig: NextConfig = {}
-
-export default nextConfig
-```
-
-#### Next.js 14/15 (`next.config.js`)
-
-```js
-// next.config.js
-const { withAziridProxy } = require('azirid-react/next')
-
-/** @type {import('next').NextConfig} */
-module.exports = withAziridProxy()({
-  transpilePackages: ['azirid-react'],
-})
-```
-
-### Route Protection (optional)
-
-> **Not required for basic usage.** Only add this if you need to protect specific routes from unauthenticated users.
+The middleware validates `__session` JWT cookies using JWKS (RS256) and protects routes.
 
 #### Next.js 16+ (`proxy.ts`)
 
 ```ts
-// proxy.ts — only needed if you want route protection
+// proxy.ts
 import { createAziridProxy } from 'azirid-react/next/proxy'
 
 export const proxy = createAziridProxy({
@@ -1539,28 +1445,25 @@ export const config = {
 }
 ```
 
-#### Next.js 14/15 (`middleware.ts`)
+| Option             | Type       | Default       | Description                                      |
+| ------------------ | ---------- | ------------- | ------------------------------------------------ |
+| `cookieName`       | `string`   | `"__session"` | Cookie carrying the access token JWT             |
+| `protectedRoutes`  | `string[]` | —             | Routes that require authentication               |
+| `loginUrl`         | `string`   | `"/login"`    | Redirect target for unauthenticated users        |
+| `publicRoutes`     | `string[]` | login/signup  | Always-accessible routes                         |
+| `jwksUrl`          | `string`   | auto          | Override JWKS endpoint URL                       |
 
-```ts
-// middleware.ts — only needed if you want route protection
-import { createAziridMiddleware } from 'azirid-react/next/proxy'
+Environment: set `AZIRID_API_URL` (server-side only) so the middleware knows where to fetch JWKS from.
 
-export default createAziridMiddleware({
-  protectedRoutes: ['/dashboard', '/settings'],
-  loginUrl: '/login',
-  publicRoutes: ['/login', '/signup', '/forgot-password'],
-})
-
-export const config = {
-  matcher: ['/((?!_next|favicon.ico|api/).*)'],
-}
+```env
+AZIRID_API_URL=http://localhost:3000
 ```
 
 ---
 
 ## Server-side (Next.js App Router)
 
-For **Server Components**, **Server Actions**, and **Route Handlers**, use the `azirid-react/server` entry point to read the session token from the httpOnly `__session` cookie.
+For **Server Components**, **Server Actions**, and **Route Handlers**, use the `azirid-react/server` entry point to read the session token from the `__session` cookie.
 
 ### Setup
 
@@ -1615,36 +1518,9 @@ export default async function DashboardPage() {
 
 ### Options
 
-| Option       | Type     | Default       | Description                                |
-| ------------ | -------- | ------------- | ------------------------------------------ |
-| `cookieName` | `string` | `"__session"` | Name of the httpOnly cookie with the token |
-
-### `createSessionSyncHandler`
-
-Creates a route handler that syncs the access token to a local httpOnly cookie. Useful for cross-origin development setups where the API is on a different domain.
-
-```ts
-// app/api/auth/session/route.ts
-import { createSessionSyncHandler } from 'azirid-react/server'
-
-export const { POST, DELETE } = createSessionSyncHandler()
-```
-
-With custom options:
-
-```ts
-export const { POST, DELETE } = createSessionSyncHandler({
-  cookieName: '__session', // default
-  secure: true, // set Secure flag on cookie
-  maxAge: 3600, // cookie max age in seconds (default: 1h)
-})
-```
-
-| Option       | Type      | Default       | Description                         |
-| ------------ | --------- | ------------- | ----------------------------------- |
-| `cookieName` | `string`  | `"__session"` | Name of the httpOnly cookie         |
-| `secure`     | `boolean` | `false`       | Set the `Secure` flag on the cookie |
-| `maxAge`     | `number`  | `3600`        | Cookie max age in seconds           |
+| Option       | Type     | Default       | Description                          |
+| ------------ | -------- | ------------- | ------------------------------------ |
+| `cookieName` | `string` | `"__session"` | Name of the cookie with the token    |
 
 ---
 
@@ -1741,13 +1617,12 @@ const { mutate, isPending } = useUpdateProfile({
 })
 ```
 
-### `BASE_PATHS` and `buildPaths`
+### `AUTH_BASE_PATH` and `buildPaths`
 
 ```tsx
-import { BASE_PATHS, buildPaths } from 'azirid-react'
+import { AUTH_BASE_PATH, buildPaths } from 'azirid-react'
 
-BASE_PATHS.proxy // '/api/auth'
-BASE_PATHS.direct // '/v1/users/auth'
+AUTH_BASE_PATH // '/v1/users/auth'
 
 // Build custom path map from a base path
 const paths = buildPaths('/custom/auth')

package/dist/index.cjs

@@ -131,19 +131,14 @@ var SUFFIXES = {
   branches: "branches",
   paymentMethods: "payment-methods"
 };
-var BASE_PATHS = {
-  /** Proxy mode (Next.js): requests go to the same origin via route handler */
-  proxy: "/api/auth",
-  /** Direct mode: requests go straight to the Azirid API */
-  direct: "/v1/users/auth"
-};
+var AUTH_BASE_PATH = "/v1/users/auth";
 function buildPaths(basePath) {
   const bp = basePath.replace(/\/$/, "");
   return Object.fromEntries(
     Object.entries(SUFFIXES).map(([key, suffix]) => [key, `${bp}/${suffix}`])
   );
 }
-var PATHS = buildPaths(BASE_PATHS.direct);
+var PATHS = buildPaths(AUTH_BASE_PATH);
 function createAccessClient(config, appContext) {
   const baseUrl = config.baseUrl.replace(/\/$/, "");
   const paths = config.basePath ? buildPaths(config.basePath) : PATHS;
@@ -210,6 +205,13 @@ function createAccessClient(config, appContext) {
   }
   function setAccessToken(token) {
     accessToken = token;
+    if (typeof document !== "undefined") {
+      if (token) {
+        document.cookie = `__session=${token}; Path=/; SameSite=Lax; Max-Age=900`;
+      } else {
+        document.cookie = "__session=; Path=/; SameSite=Lax; Max-Age=0";
+      }
+    }
   }
   function getAccessToken() {
     return accessToken;
@@ -776,40 +778,12 @@ function AziridProviderInner({
     [props.locale, props.messages]
   );
   const brandingValue = react.useMemo(() => ({ branding, messages }), [branding, messages]);
-  const isProxyMode = !props.apiUrl;
-  const syncUrl = react.useMemo(() => {
-    if (props.sessionSyncUrl === false) return null;
-    if (props.sessionSyncUrl) return props.sessionSyncUrl;
-    if (isProxyMode) return null;
-    if (client.appContext?.publishableKey?.startsWith("pk_dev")) {
-      return "/api/auth/session";
-    }
-    return null;
-  }, [props.sessionSyncUrl, client.appContext?.publishableKey, isProxyMode]);
-  const syncSession = react.useCallback(
-    (token) => {
-      if (!syncUrl) return;
-      if (token) {
-        fetch(syncUrl, {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ token })
-        }).catch(() => {
-        });
-      } else {
-        fetch(syncUrl, { method: "DELETE" }).catch(() => {
-        });
-      }
-    },
-    [syncUrl]
-  );
   const updateAccessToken = react.useCallback(
     (token) => {
       setAccessToken(token);
       client.setAccessToken(token);
-      syncSession(token);
     },
-    [client, syncSession]
+    [client]
   );
   const saveSessionTokens = react.useCallback(
     (data) => {
@@ -1013,11 +987,9 @@ function AziridProvider(props) {
       publishableKey: props.publishableKey,
       tenantId: props.tenantId
     } : void 0;
-    const isProxy = !props.apiUrl;
-    const baseUrl = isProxy ? "" : props.apiUrl.replace(/\/$/, "");
-    const basePath = isProxy ? BASE_PATHS.proxy : BASE_PATHS.direct;
+    const baseUrl = (props.apiUrl ?? "https://api.azirid.com").replace(/\/$/, "");
     return createAccessClient(
-      { baseUrl, basePath, headers: props.fetchOptions },
+      { baseUrl, basePath: AUTH_BASE_PATH, headers: props.fetchOptions },
       appContext
     );
   }, [props.publishableKey, props.tenantId, props.fetchOptions, props.apiUrl]);
@@ -4029,29 +4001,8 @@ function HandoffCallback({
       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);
+    performHandoff(apiUrl, code).then((user) => {
+      onSuccess?.(user);
     }).catch((err) => {
       setStatus("error");
       const error = err instanceof Error ? err : new Error("Handoff exchange failed");
@@ -4064,6 +4015,33 @@ function HandoffCallback({
   }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { style: wrapperStyle, children: /* @__PURE__ */ jsxRuntime.jsx("p", { style: messageStyle2, children: loadingText }) });
 }
+async function performHandoff(apiUrl, code) {
+  const exchangeUrl = `${apiUrl.replace(/\/+$/, "")}/users/auth/handoff/exchange`;
+  const res = await fetch(exchangeUrl, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    credentials: "include",
+    body: JSON.stringify({ code })
+  });
+  if (!res.ok) {
+    const body = await res.json().catch(() => null);
+    throw new Error(body?.error?.message ?? body?.message ?? "Handoff exchange failed");
+  }
+  const raw = await res.json();
+  const json = raw && typeof raw === "object" && "data" in raw && "meta" in raw ? raw.data : raw;
+  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 {
+  }
+  const at = json.at ?? json.accessToken;
+  if (at) {
+    document.cookie = `__session=${at}; Path=/; SameSite=Lax; Max-Age=900`;
+  }
+  return json.user;
+}
 var wrapperStyle = {
   display: "flex",
   flexDirection: "column",
@@ -4875,11 +4853,11 @@ function usePasswordToggle() {
 }
 
 // src/index.ts
-var SDK_VERSION = "0.13.1";
+var SDK_VERSION = "0.14.0";
 
+exports.AUTH_BASE_PATH = AUTH_BASE_PATH;
 exports.AuthForm = AuthForm;
 exports.AziridProvider = AziridProvider;
-exports.BASE_PATHS = BASE_PATHS;
 exports.CheckoutButton = CheckoutButton;
 exports.ForgotPasswordForm = ForgotPasswordForm;
 exports.HandoffCallback = HandoffCallback;