@insforge/nextjs 1.1.6-dev.0 → 1.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useEffect } from "react";
|
|
3
4
|
import {
|
|
4
5
|
InsforgeProviderCore,
|
|
5
6
|
useInsforge as useReactInsforge,
|
|
@@ -7,6 +8,25 @@ import {
|
|
|
7
8
|
StyleProvider
|
|
8
9
|
} from "@insforge/react";
|
|
9
10
|
import { NavigationAdapter } from "../navigation";
|
|
11
|
+
function cleanAuthParamsFromUrl() {
|
|
12
|
+
const params = new URLSearchParams(window.location.search);
|
|
13
|
+
const authParams = ["access_token", "user_id", "email", "name", "csrf_token", "error"];
|
|
14
|
+
const hasAuthParams = authParams.some((p) => params.has(p));
|
|
15
|
+
if (hasAuthParams) {
|
|
16
|
+
const url = new URL(window.location.href);
|
|
17
|
+
authParams.forEach((p) => url.searchParams.delete(p));
|
|
18
|
+
window.history.replaceState({}, document.title, url.toString());
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
function AuthParamsCleaner() {
|
|
22
|
+
const { isLoaded } = useReactInsforge();
|
|
23
|
+
useEffect(() => {
|
|
24
|
+
if (isLoaded) {
|
|
25
|
+
cleanAuthParamsFromUrl();
|
|
26
|
+
}
|
|
27
|
+
}, [isLoaded]);
|
|
28
|
+
return null;
|
|
29
|
+
}
|
|
10
30
|
async function syncToCookie(token, user) {
|
|
11
31
|
try {
|
|
12
32
|
const response = await fetch("/api/auth", {
|
|
@@ -57,7 +77,10 @@ function InsforgeBrowserProvider({
|
|
|
57
77
|
onRefresh: handleRefresh,
|
|
58
78
|
initialState
|
|
59
79
|
};
|
|
60
|
-
return /* @__PURE__ */ jsx(StyleProvider, { children: /* @__PURE__ */ jsx(NavigationProvider, { adapter: NavigationAdapter, children: /* @__PURE__ */
|
|
80
|
+
return /* @__PURE__ */ jsx(StyleProvider, { children: /* @__PURE__ */ jsx(NavigationProvider, { adapter: NavigationAdapter, children: /* @__PURE__ */ jsxs(InsforgeProviderCore, { ...providerProps, children: [
|
|
81
|
+
/* @__PURE__ */ jsx(AuthParamsCleaner, {}),
|
|
82
|
+
children
|
|
83
|
+
] }) }) });
|
|
61
84
|
}
|
|
62
85
|
const ClientInsforgeProvider = InsforgeBrowserProvider;
|
|
63
86
|
const useInsforge = useReactInsforge;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/client/provider.tsx"],"sourcesContent":["'use client';\r\n\r\nimport {\r\n InsforgeProviderCore,\r\n type InsforgeProviderProps,\r\n type InitialAuthState,\r\n useInsforge as useReactInsforge,\r\n NavigationProvider,\r\n StyleProvider,\r\n InsforgeUser,\r\n} from '@insforge/react';\r\nimport { NavigationAdapter } from '../navigation';\r\n\r\n/**\r\n * Props for InsforgeBrowserProvider\r\n */\r\nexport type InsforgeBrowserProviderProps = InsforgeProviderProps;\r\n\r\n// Sync to server-side cookie using Authorization header\r\nasync function syncToCookie(token: string, user: InsforgeUser): Promise<void> {\r\n try {\r\n const response = await fetch('/api/auth', {\r\n method: 'POST',\r\n headers: {\r\n Authorization: `Bearer ${token}`,\r\n 'Content-Type': 'application/json',\r\n },\r\n body: JSON.stringify({\r\n action: 'sync-token',\r\n user: user,\r\n }),\r\n });\r\n\r\n if (!response.ok) {\r\n const errorText = await response.text();\r\n console.error('[InsforgeBrowserProvider] sync-token failed:', errorText);\r\n }\r\n } catch (err) {\r\n console.error('[InsforgeBrowserProvider] Failed to sync token to cookie:', err);\r\n }\r\n}\r\n\r\n// Sync token to server-side cookie on sign in\r\nasync function handleSignIn(token: string, user: InsforgeUser): Promise<void> {\r\n await syncToCookie(token, user);\r\n}\r\n\r\n// Sync token to server-side cookie on refresh (page load/refresh)\r\nasync function handleRefresh(token: string, user: InsforgeUser): Promise<void> {\r\n await syncToCookie(token, user);\r\n}\r\n\r\n// Clear HTTP-only cookie on sign out\r\nasync function handleSignOut(): Promise<void> {\r\n try {\r\n await fetch('/api/auth', { method: 'DELETE' });\r\n } catch {\r\n // API route doesn't exist - ignore\r\n }\r\n}\r\n\r\n/**\r\n * Browser-side Insforge Provider for Next.js\r\n *\r\n * This provider manages authentication state on the client side and automatically\r\n * syncs tokens to HTTP-only cookies via `/api/auth` route for server-side access.\r\n *\r\n * **Key Features:**\r\n * - Uses YOUR SDK client instance (shared with database/storage operations)\r\n * - Automatic token sync to HTTP-only cookies\r\n * - SSR hydration support via `initialState`\r\n * - Works with Next.js App Router\r\n *\r\n * ---\r\n *\r\n * ## Setup Guide\r\n *\r\n * ### Step 1: Create your SDK client\r\n *\r\n * @example\r\n * ```tsx\r\n * // lib/insforge.ts\r\n * import { createClient } from '@insforge/sdk';\r\n *\r\n * export const insforge = createClient({\r\n * baseUrl: process.env.NEXT_PUBLIC_INSFORGE_URL!,\r\n * anonKey: process.env.NEXT_PUBLIC_INSFORGE_ANON_KEY!,\r\n * });\r\n * ```\r\n *\r\n * ### Step 2: Create your Providers component\r\n *\r\n * @example\r\n * ```tsx\r\n * // app/providers.tsx\r\n * 'use client';\r\n * import { InsforgeBrowserProvider, type InitialAuthState } from '@insforge/nextjs';\r\n * import { insforge } from '@/lib/insforge';\r\n *\r\n * export function Providers({\r\n * children,\r\n * }: {\r\n * children: React.ReactNode;\r\n * }) {\r\n * return (\r\n * <InsforgeBrowserProvider\r\n * client={insforge}\r\n * afterSignInUrl=\"/dashboard\"\r\n * >\r\n * {children}\r\n * </InsforgeBrowserProvider>\r\n * );\r\n * }\r\n * ```\r\n *\r\n * ### Step 3: Use in your root layout\r\n *\r\n * @example\r\n * ```tsx\r\n * // app/layout.tsx\r\n * import { getAuthFromCookies } from '@insforge/nextjs';\r\n * import { Providers } from './providers';\r\n *\r\n * export default async function RootLayout({\r\n * children,\r\n * }: {\r\n * children: React.ReactNode;\r\n * }) {\r\n * const initialState = await getAuthFromCookies();\r\n *\r\n * return (\r\n * <html>\r\n * <body>\r\n * <Providers initialState={initialState}>\r\n * {children}\r\n * </Providers>\r\n * </body>\r\n * </html>\r\n * );\r\n * }\r\n * ```\r\n *\r\n * ### Step 4: Use auth components and hooks\r\n *\r\n * @example\r\n * ```tsx\r\n * // app/page.tsx\r\n * 'use client';\r\n * import { SignIn, UserButton, useInsforge } from '@insforge/nextjs';\r\n *\r\n * export default function Page() {\r\n * const { isSignedIn, user } = useInsforge();\r\n *\r\n * if (!isSignedIn) return <SignIn />;\r\n *\r\n * return (\r\n * <div>\r\n * <UserButton />\r\n * <p>Welcome {user?.email}</p>\r\n * </div>\r\n * );\r\n * }\r\n * ```\r\n *\r\n * ---\r\n *\r\n * ## Why pass your own client?\r\n *\r\n * Authentication tokens are stored in the SDK client instance's memory.\r\n * If auth components use a different client than your app, they won't share\r\n * tokens, causing authentication to fail for database/storage operations.\r\n *\r\n * By passing YOUR client to the provider, all operations use the same\r\n * authenticated session.\r\n */\r\nexport function InsforgeBrowserProvider({\r\n children,\r\n client,\r\n afterSignInUrl = '/',\r\n onAuthChange,\r\n initialState = { user: null, userId: null },\r\n}: InsforgeBrowserProviderProps) {\r\n const providerProps: InsforgeProviderProps = {\r\n children,\r\n client,\r\n afterSignInUrl,\r\n onAuthChange,\r\n onSignIn: handleSignIn,\r\n onSignOut: handleSignOut,\r\n onRefresh: handleRefresh,\r\n initialState,\r\n };\r\n\r\n return (\r\n <StyleProvider>\r\n <NavigationProvider adapter={NavigationAdapter}>\r\n <InsforgeProviderCore {...providerProps}
|
|
1
|
+
{"version":3,"sources":["../../../src/client/provider.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useEffect } from 'react';\r\nimport {\r\n InsforgeProviderCore,\r\n type InsforgeProviderProps,\r\n type InitialAuthState,\r\n useInsforge as useReactInsforge,\r\n NavigationProvider,\r\n StyleProvider,\r\n InsforgeUser,\r\n} from '@insforge/react';\r\nimport { NavigationAdapter } from '../navigation';\r\n\r\n/**\r\n * Props for InsforgeBrowserProvider\r\n */\r\nexport type InsforgeBrowserProviderProps = InsforgeProviderProps;\r\n\r\n/**\r\n * Clean up sensitive auth parameters from URL\r\n * This is needed in Next.js because SDK's detectAuthCallback may not run\r\n * when the SDK client is created at module level (before hydration)\r\n */\r\nfunction cleanAuthParamsFromUrl(): void {\r\n const params = new URLSearchParams(window.location.search);\r\n const authParams = ['access_token', 'user_id', 'email', 'name', 'csrf_token', 'error'];\r\n const hasAuthParams = authParams.some((p) => params.has(p));\r\n\r\n if (hasAuthParams) {\r\n const url = new URL(window.location.href);\r\n authParams.forEach((p) => url.searchParams.delete(p));\r\n window.history.replaceState({}, document.title, url.toString());\r\n }\r\n}\r\n\r\n/**\r\n * Internal component that cleans up URL params after auth is loaded\r\n * Must be inside the provider to access useInsforge\r\n */\r\nfunction AuthParamsCleaner() {\r\n const { isLoaded } = useReactInsforge();\r\n\r\n useEffect(() => {\r\n // Only clean up after SDK has finished loading auth state\r\n // This ensures URL params are processed by SDK first\r\n if (isLoaded) {\r\n cleanAuthParamsFromUrl();\r\n }\r\n }, [isLoaded]);\r\n\r\n return null;\r\n}\r\n\r\n// Sync to server-side cookie using Authorization header\r\nasync function syncToCookie(token: string, user: InsforgeUser): Promise<void> {\r\n try {\r\n const response = await fetch('/api/auth', {\r\n method: 'POST',\r\n headers: {\r\n Authorization: `Bearer ${token}`,\r\n 'Content-Type': 'application/json',\r\n },\r\n body: JSON.stringify({\r\n action: 'sync-token',\r\n user: user,\r\n }),\r\n });\r\n\r\n if (!response.ok) {\r\n const errorText = await response.text();\r\n console.error('[InsforgeBrowserProvider] sync-token failed:', errorText);\r\n }\r\n } catch (err) {\r\n console.error('[InsforgeBrowserProvider] Failed to sync token to cookie:', err);\r\n }\r\n}\r\n\r\n// Sync token to server-side cookie on sign in\r\nasync function handleSignIn(token: string, user: InsforgeUser): Promise<void> {\r\n await syncToCookie(token, user);\r\n}\r\n\r\n// Sync token to server-side cookie on refresh (page load/refresh)\r\nasync function handleRefresh(token: string, user: InsforgeUser): Promise<void> {\r\n await syncToCookie(token, user);\r\n}\r\n\r\n// Clear HTTP-only cookie on sign out\r\nasync function handleSignOut(): Promise<void> {\r\n try {\r\n await fetch('/api/auth', { method: 'DELETE' });\r\n } catch {\r\n // API route doesn't exist - ignore\r\n }\r\n}\r\n\r\n/**\r\n * Browser-side Insforge Provider for Next.js\r\n *\r\n * This provider manages authentication state on the client side and automatically\r\n * syncs tokens to HTTP-only cookies via `/api/auth` route for server-side access.\r\n *\r\n * **Key Features:**\r\n * - Uses YOUR SDK client instance (shared with database/storage operations)\r\n * - Automatic token sync to HTTP-only cookies\r\n * - SSR hydration support via `initialState`\r\n * - Works with Next.js App Router\r\n *\r\n * ---\r\n *\r\n * ## Setup Guide\r\n *\r\n * ### Step 1: Create your SDK client\r\n *\r\n * @example\r\n * ```tsx\r\n * // lib/insforge.ts\r\n * import { createClient } from '@insforge/sdk';\r\n *\r\n * export const insforge = createClient({\r\n * baseUrl: process.env.NEXT_PUBLIC_INSFORGE_URL!,\r\n * anonKey: process.env.NEXT_PUBLIC_INSFORGE_ANON_KEY!,\r\n * });\r\n * ```\r\n *\r\n * ### Step 2: Create your Providers component\r\n *\r\n * @example\r\n * ```tsx\r\n * // app/providers.tsx\r\n * 'use client';\r\n * import { InsforgeBrowserProvider, type InitialAuthState } from '@insforge/nextjs';\r\n * import { insforge } from '@/lib/insforge';\r\n *\r\n * export function Providers({\r\n * children,\r\n * }: {\r\n * children: React.ReactNode;\r\n * }) {\r\n * return (\r\n * <InsforgeBrowserProvider\r\n * client={insforge}\r\n * afterSignInUrl=\"/dashboard\"\r\n * >\r\n * {children}\r\n * </InsforgeBrowserProvider>\r\n * );\r\n * }\r\n * ```\r\n *\r\n * ### Step 3: Use in your root layout\r\n *\r\n * @example\r\n * ```tsx\r\n * // app/layout.tsx\r\n * import { getAuthFromCookies } from '@insforge/nextjs';\r\n * import { Providers } from './providers';\r\n *\r\n * export default async function RootLayout({\r\n * children,\r\n * }: {\r\n * children: React.ReactNode;\r\n * }) {\r\n * const initialState = await getAuthFromCookies();\r\n *\r\n * return (\r\n * <html>\r\n * <body>\r\n * <Providers initialState={initialState}>\r\n * {children}\r\n * </Providers>\r\n * </body>\r\n * </html>\r\n * );\r\n * }\r\n * ```\r\n *\r\n * ### Step 4: Use auth components and hooks\r\n *\r\n * @example\r\n * ```tsx\r\n * // app/page.tsx\r\n * 'use client';\r\n * import { SignIn, UserButton, useInsforge } from '@insforge/nextjs';\r\n *\r\n * export default function Page() {\r\n * const { isSignedIn, user } = useInsforge();\r\n *\r\n * if (!isSignedIn) return <SignIn />;\r\n *\r\n * return (\r\n * <div>\r\n * <UserButton />\r\n * <p>Welcome {user?.email}</p>\r\n * </div>\r\n * );\r\n * }\r\n * ```\r\n *\r\n * ---\r\n *\r\n * ## Why pass your own client?\r\n *\r\n * Authentication tokens are stored in the SDK client instance's memory.\r\n * If auth components use a different client than your app, they won't share\r\n * tokens, causing authentication to fail for database/storage operations.\r\n *\r\n * By passing YOUR client to the provider, all operations use the same\r\n * authenticated session.\r\n */\r\nexport function InsforgeBrowserProvider({\r\n children,\r\n client,\r\n afterSignInUrl = '/',\r\n onAuthChange,\r\n initialState = { user: null, userId: null },\r\n}: InsforgeBrowserProviderProps) {\r\n const providerProps: InsforgeProviderProps = {\r\n children,\r\n client,\r\n afterSignInUrl,\r\n onAuthChange,\r\n onSignIn: handleSignIn,\r\n onSignOut: handleSignOut,\r\n onRefresh: handleRefresh,\r\n initialState,\r\n };\r\n\r\n return (\r\n <StyleProvider>\r\n <NavigationProvider adapter={NavigationAdapter}>\r\n <InsforgeProviderCore {...providerProps}>\r\n {/* Clean up auth params from URL after SDK loads auth state */}\r\n <AuthParamsCleaner />\r\n {children}\r\n </InsforgeProviderCore>\r\n </NavigationProvider>\r\n </StyleProvider>\r\n );\r\n}\r\n\r\n/**\r\n * @deprecated Use `InsforgeBrowserProvider` instead.\r\n *\r\n * This alias is kept for backward compatibility and will be removed in a future version.\r\n *\r\n * Migration:\r\n * ```tsx\r\n * // Before\r\n * import { ClientInsforgeProvider } from '@insforge/nextjs';\r\n *\r\n * // After\r\n * import { InsforgeBrowserProvider } from '@insforge/nextjs';\r\n * ```\r\n */\r\nexport const ClientInsforgeProvider = InsforgeBrowserProvider;\r\n\r\n/**\r\n * Hook to access Insforge context\r\n *\r\n * Re-exports the hook from @insforge/react for convenience.\r\n *\r\n * @example\r\n * ```tsx\r\n * function MyComponent() {\r\n * const { user, isSignedIn, signOut } = useInsforge();\r\n *\r\n * if (!isSignedIn) return <SignIn />;\r\n *\r\n * return (\r\n * <div>\r\n * <p>Welcome {user.email}</p>\r\n * <button onClick={signOut}>Sign Out</button>\r\n * </div>\r\n * );\r\n * }\r\n * ```\r\n */\r\nexport const useInsforge = useReactInsforge;\r\n\r\n// Re-export types\r\nexport type { InitialAuthState };\r\n"],"mappings":";AAwOQ,SAEE,KAFF;AAtOR,SAAS,iBAAiB;AAC1B;AAAA,EACE;AAAA,EAGA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,OAEK;AACP,SAAS,yBAAyB;AAYlC,SAAS,yBAA+B;AACtC,QAAM,SAAS,IAAI,gBAAgB,OAAO,SAAS,MAAM;AACzD,QAAM,aAAa,CAAC,gBAAgB,WAAW,SAAS,QAAQ,cAAc,OAAO;AACrF,QAAM,gBAAgB,WAAW,KAAK,CAAC,MAAM,OAAO,IAAI,CAAC,CAAC;AAE1D,MAAI,eAAe;AACjB,UAAM,MAAM,IAAI,IAAI,OAAO,SAAS,IAAI;AACxC,eAAW,QAAQ,CAAC,MAAM,IAAI,aAAa,OAAO,CAAC,CAAC;AACpD,WAAO,QAAQ,aAAa,CAAC,GAAG,SAAS,OAAO,IAAI,SAAS,CAAC;AAAA,EAChE;AACF;AAMA,SAAS,oBAAoB;AAC3B,QAAM,EAAE,SAAS,IAAI,iBAAiB;AAEtC,YAAU,MAAM;AAGd,QAAI,UAAU;AACZ,6BAAuB;AAAA,IACzB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SAAO;AACT;AAGA,eAAe,aAAa,OAAe,MAAmC;AAC5E,MAAI;AACF,UAAM,WAAW,MAAM,MAAM,aAAa;AAAA,MACxC,QAAQ;AAAA,MACR,SAAS;AAAA,QACP,eAAe,UAAU,KAAK;AAAA,QAC9B,gBAAgB;AAAA,MAClB;AAAA,MACA,MAAM,KAAK,UAAU;AAAA,QACnB,QAAQ;AAAA,QACR;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAED,QAAI,CAAC,SAAS,IAAI;AAChB,YAAM,YAAY,MAAM,SAAS,KAAK;AACtC,cAAQ,MAAM,gDAAgD,SAAS;AAAA,IACzE;AAAA,EACF,SAAS,KAAK;AACZ,YAAQ,MAAM,6DAA6D,GAAG;AAAA,EAChF;AACF;AAGA,eAAe,aAAa,OAAe,MAAmC;AAC5E,QAAM,aAAa,OAAO,IAAI;AAChC;AAGA,eAAe,cAAc,OAAe,MAAmC;AAC7E,QAAM,aAAa,OAAO,IAAI;AAChC;AAGA,eAAe,gBAA+B;AAC5C,MAAI;AACF,UAAM,MAAM,aAAa,EAAE,QAAQ,SAAS,CAAC;AAAA,EAC/C,QAAQ;AAAA,EAER;AACF;AAoHO,SAAS,wBAAwB;AAAA,EACtC;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA,eAAe,EAAE,MAAM,MAAM,QAAQ,KAAK;AAC5C,GAAiC;AAC/B,QAAM,gBAAuC;AAAA,IAC3C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,WAAW;AAAA,IACX,WAAW;AAAA,IACX;AAAA,EACF;AAEA,SACE,oBAAC,iBACC,8BAAC,sBAAmB,SAAS,mBAC3B,+BAAC,wBAAsB,GAAG,eAExB;AAAA,wBAAC,qBAAkB;AAAA,IAClB;AAAA,KACH,GACF,GACF;AAEJ;AAgBO,MAAM,yBAAyB;AAuB/B,MAAM,cAAc;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@insforge/nextjs",
|
|
3
|
-
"version": "1.1.6
|
|
3
|
+
"version": "1.1.6",
|
|
4
4
|
"description": "Pre-built authentication UI components for Next.js with Insforge backend - zero configuration required",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"author": "Insforge",
|
|
46
46
|
"license": "MIT",
|
|
47
47
|
"dependencies": {
|
|
48
|
-
"@insforge/react": "1.1.7
|
|
48
|
+
"@insforge/react": "^1.1.7",
|
|
49
49
|
"@insforge/sdk": "^1.1.3",
|
|
50
50
|
"@insforge/shared": "^1.1.5",
|
|
51
51
|
"@insforge/shared-schemas": "^1.1.43"
|