@insforge/react 0.4.0 → 0.4.5

package/dist/router.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/router/getInsforgeRoutes.tsx"],"names":["useEffect","jsx"],"mappings":";;;;;AAyCA,SAAS,cAAA,CAAe,EAAE,OAAA,EAAS,IAAA,EAAK,EAAsC;AAC5E,EAAAA,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,WAAA,GAAc,CAAA,EAAG,MAAA,CAAO,QAAA,CAAS,MAAM,CAAA,cAAA,CAAA;AAC7C,IAAA,MAAM,OAAA,GAAU,IAAI,GAAA,CAAI,IAAA,EAAM,OAAO,CAAA;AACrC,IAAA,OAAA,CAAQ,YAAA,CAAa,GAAA,CAAI,UAAA,EAAY,WAAW,CAAA;AAChD,IAAA,MAAA,CAAO,QAAA,CAAS,OAAA,CAAQ,OAAA,CAAQ,QAAA,EAAU,CAAA;AAAA,EAC5C,CAAA,EAAG,CAAC,OAAA,EAAS,IAAI,CAAC,CAAA;AAElB,EAAA,OAAO,IAAA;AACT;AAwDO,SAAS,kBAAkB,MAAA,EAAgD;AAChF,EAAA,MAAM,EAAE,OAAA,EAAS,WAAA,GAAc,MAAM,KAAA,GAAQ,IAAG,GAAI,MAAA;AAEpD,EAAA,MAAM;AAAA,IACJ,MAAA,GAAS,UAAA;AAAA,IACT,MAAA,GAAS,UAAA;AAAA,IACT,WAAA,GAAc,eAAA;AAAA,IACd,cAAA,GAAiB,kBAAA;AAAA,IACjB,aAAA,GAAgB;AAAA,GAClB,GAAI,KAAA;AAEJ,EAAA,MAAM,SAAwB,EAAC;AAG/B,EAAA,IAAI,WAAA,EAAa;AACf,IAAA,MAAA,CAAO,IAAA;AAAA,MACL;AAAA,QACE,IAAA,EAAM,MAAA;AAAA,QACN,OAAA,kBAASC,cAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAkB,MAAK,eAAA,EAAgB;AAAA,OAClE;AAAA,MACA;AAAA,QACE,IAAA,EAAM,MAAA;AAAA,QACN,OAAA,kBAASA,cAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAkB,MAAK,eAAA,EAAgB;AAAA,OAClE;AAAA,MACA;AAAA,QACE,IAAA,EAAM,WAAA;AAAA,QACN,OAAA,kBAASA,cAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAkB,MAAK,oBAAA,EAAqB;AAAA,OACvE;AAAA,MACA;AAAA,QACE,IAAA,EAAM,cAAA;AAAA,QACN,OAAA,kBAASA,cAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAkB,MAAK,uBAAA,EAAwB;AAAA,OAC1E;AAAA,MACA;AAAA,QACE,IAAA,EAAM,aAAA;AAAA,QACN,OAAA,kBAASA,cAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAkB,MAAK,sBAAA,EAAuB;AAAA;AACzE,KACF;AAAA,EACF;AAEA,EAAA,OAAO,MAAA;AACT","file":"router.cjs","sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\nimport type { RouteObject } from 'react-router-dom';\n\ninterface GetInsforgeRoutesConfig {\n  /**\n   * Base URL of your Insforge backend\n   */\n  baseUrl: string;\n\n  /**\n   * Whether to use built-in auth (deployed Insforge Auth)\n   * When true: redirects to baseUrl/auth/* pages\n   * When false: no redirect routes are added (use your own components)\n   * @default true\n   */\n  builtInAuth?: boolean;\n\n  /**\n   * Custom paths for auth redirect routes\n   * @default {\n   *   signIn: '/sign-in',\n   *   signUp: '/sign-up',\n   *   verifyEmail: '/verify-email',\n   *   forgotPassword: '/forgot-password',\n   *   resetPassword: '/reset-password'\n   * }\n   */\n  paths?: {\n    signIn?: string;\n    signUp?: string;\n    verifyEmail?: string;\n    forgotPassword?: string;\n    resetPassword?: string;\n  };\n}\n\n/**\n * Helper component for redirecting to external auth\n */\nfunction RedirectToAuth({ baseUrl, path }: { baseUrl: string; path: string }) {\n  useEffect(() => {\n    const callbackUrl = `${window.location.origin}/auth/callback`;\n    const authUrl = new URL(path, baseUrl);\n    authUrl.searchParams.set('redirect', callbackUrl);\n    window.location.replace(authUrl.toString());\n  }, [baseUrl, path]);\n\n  return null;\n}\n\n/**\n * Generates Insforge authentication redirect routes for React Router.\n *\n * Returns redirect routes for sign-in, sign-up, etc. that redirect to your deployed Insforge auth pages.\n *\n * ⚠️ **Important**: You must manually create the `/auth/callback` route in your router\n * to handle authentication callbacks. See documentation for details.\n *\n * @param config - Configuration for Insforge routes\n * @returns Array of RouteObject for React Router (redirect routes only)\n *\n * @example\n * ```tsx\n * import { createBrowserRouter } from 'react-router-dom';\n * import { getInsforgeRoutes } from '@insforge/react/router';\n * import { InsforgeCallback } from '@insforge/react';\n *\n * const router = createBrowserRouter([\n *   {\n *     path: '/',\n *     element: <Layout />,\n *     children: [\n *       { index: true, element: <Home /> },\n *       // ✅ Required: Manually create callback route\n *       { path: 'auth/callback', element: <AuthCallback /> },\n *       { path: 'dashboard', element: <Dashboard /> }\n *     ]\n *   },\n *   // Add redirect routes (sign-in, sign-up, etc.)\n *   ...getInsforgeRoutes({\n *     baseUrl: 'https://your-backend.com',\n *     builtInAuth: true\n *   })\n * ]);\n *\n * // src/pages/AuthCallback.tsx\n * function AuthCallback() {\n *   return <InsforgeCallback redirectTo=\"/dashboard\" />;\n * }\n * ```\n *\n * @example\n * ```tsx\n * // Custom paths for redirect routes\n * ...getInsforgeRoutes({\n *   baseUrl: 'https://your-backend.com',\n *   builtInAuth: true,\n *   paths: {\n *     signIn: '/login',\n *     signUp: '/register'\n *   }\n * })\n * ```\n */\nexport function getInsforgeRoutes(config: GetInsforgeRoutesConfig): RouteObject[] {\n  const { baseUrl, builtInAuth = true, paths = {} } = config;\n\n  const {\n    signIn = '/sign-in',\n    signUp = '/sign-up',\n    verifyEmail = '/verify-email',\n    forgotPassword = '/forgot-password',\n    resetPassword = '/reset-password',\n  } = paths;\n\n  const routes: RouteObject[] = [];\n\n  // Only add redirect routes if using built-in auth\n  if (builtInAuth) {\n    routes.push(\n      {\n        path: signIn,\n        element: <RedirectToAuth baseUrl={baseUrl} path=\"/auth/sign-in\" />,\n      },\n      {\n        path: signUp,\n        element: <RedirectToAuth baseUrl={baseUrl} path=\"/auth/sign-up\" />,\n      },\n      {\n        path: verifyEmail,\n        element: <RedirectToAuth baseUrl={baseUrl} path=\"/auth/verify-email\" />,\n      },\n      {\n        path: forgotPassword,\n        element: <RedirectToAuth baseUrl={baseUrl} path=\"/auth/forgot-password\" />,\n      },\n      {\n        path: resetPassword,\n        element: <RedirectToAuth baseUrl={baseUrl} path=\"/auth/reset-password\" />,\n      }\n    );\n  }\n\n  return routes;\n}\n"]}
+{"version":3,"sources":["../src/router/getInsforgeRoutes.tsx"],"names":["useEffect","jsx"],"mappings":";;;;;AAyCA,SAAS,cAAA,CAAe,EAAE,OAAA,EAAS,IAAA,EAAK,EAAsC;AAC5E,EAAAA,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,WAAA,GAAc,CAAA,EAAG,MAAA,CAAO,QAAA,CAAS,MAAM,CAAA,cAAA,CAAA;AAC7C,IAAA,MAAM,OAAA,GAAU,IAAI,GAAA,CAAI,IAAA,EAAM,OAAO,CAAA;AACrC,IAAA,OAAA,CAAQ,YAAA,CAAa,GAAA,CAAI,UAAA,EAAY,WAAW,CAAA;AAChD,IAAA,MAAA,CAAO,QAAA,CAAS,OAAA,CAAQ,OAAA,CAAQ,QAAA,EAAU,CAAA;AAAA,EAC5C,CAAA,EAAG,CAAC,OAAA,EAAS,IAAI,CAAC,CAAA;AAElB,EAAA,OAAO,IAAA;AACT;AA6CO,SAAS,kBAAkB,MAAA,EAAgD;AAChF,EAAA,MAAM,EAAE,OAAA,EAAS,WAAA,GAAc,MAAM,KAAA,GAAQ,IAAG,GAAI,MAAA;AAEpD,EAAA,MAAM;AAAA,IACJ,MAAA,GAAS,UAAA;AAAA,IACT,MAAA,GAAS,UAAA;AAAA,IACT,WAAA,GAAc,eAAA;AAAA,IACd,cAAA,GAAiB,kBAAA;AAAA,IACjB,aAAA,GAAgB;AAAA,GAClB,GAAI,KAAA;AAEJ,EAAA,MAAM,SAAwB,EAAC;AAG/B,EAAA,IAAI,WAAA,EAAa;AACf,IAAA,MAAA,CAAO,IAAA;AAAA,MACL;AAAA,QACE,IAAA,EAAM,MAAA;AAAA,QACN,OAAA,kBAASC,cAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAkB,MAAK,eAAA,EAAgB;AAAA,OAClE;AAAA,MACA;AAAA,QACE,IAAA,EAAM,MAAA;AAAA,QACN,OAAA,kBAASA,cAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAkB,MAAK,eAAA,EAAgB;AAAA,OAClE;AAAA,MACA;AAAA,QACE,IAAA,EAAM,WAAA;AAAA,QACN,OAAA,kBAASA,cAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAkB,MAAK,oBAAA,EAAqB;AAAA,OACvE;AAAA,MACA;AAAA,QACE,IAAA,EAAM,cAAA;AAAA,QACN,OAAA,kBAASA,cAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAkB,MAAK,uBAAA,EAAwB;AAAA,OAC1E;AAAA,MACA;AAAA,QACE,IAAA,EAAM,aAAA;AAAA,QACN,OAAA,kBAASA,cAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAkB,MAAK,sBAAA,EAAuB;AAAA;AACzE,KACF;AAAA,EACF;AAEA,EAAA,OAAO,MAAA;AACT","file":"router.cjs","sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\nimport type { RouteObject } from 'react-router-dom';\n\ninterface GetInsforgeRoutesConfig {\n  /**\n   * Base URL of your Insforge backend\n   */\n  baseUrl: string;\n\n  /**\n   * Whether to use built-in auth (deployed Insforge Auth)\n   * When true: redirects to baseUrl/auth/* pages\n   * When false: no redirect routes are added (use your own components)\n   * @default true\n   */\n  builtInAuth?: boolean;\n\n  /**\n   * Custom paths for auth redirect routes\n   * @default {\n   *   signIn: '/sign-in',\n   *   signUp: '/sign-up',\n   *   verifyEmail: '/verify-email',\n   *   forgotPassword: '/forgot-password',\n   *   resetPassword: '/reset-password'\n   * }\n   */\n  paths?: {\n    signIn?: string;\n    signUp?: string;\n    verifyEmail?: string;\n    forgotPassword?: string;\n    resetPassword?: string;\n  };\n}\n\n/**\n * Helper component for redirecting to external auth\n */\nfunction RedirectToAuth({ baseUrl, path }: { baseUrl: string; path: string }) {\n  useEffect(() => {\n    const callbackUrl = `${window.location.origin}/auth/callback`;\n    const authUrl = new URL(path, baseUrl);\n    authUrl.searchParams.set('redirect', callbackUrl);\n    window.location.replace(authUrl.toString());\n  }, [baseUrl, path]);\n\n  return null;\n}\n\n/**\n * Generates Insforge authentication redirect routes for React Router.\n *\n * Returns redirect routes for sign-in, sign-up, etc. that redirect to your deployed Insforge auth pages.\n *\n * @param config - Configuration for Insforge routes\n * @returns Array of RouteObject for React Router (redirect routes only)\n *\n * @example\n * ```tsx\n * import { createBrowserRouter } from 'react-router-dom';\n * import { getInsforgeRoutes } from '@insforge/react/router';\n *\n * const router = createBrowserRouter([\n *   {\n *     path: '/',\n *     element: <Layout />,\n *     children: [\n *       { index: true, element: <Home /> },\n *       { path: 'dashboard', element: <Dashboard /> }\n *     ]\n *   },\n *   // Add redirect routes (sign-in, sign-up, etc.)\n *   ...getInsforgeRoutes({\n *     baseUrl: 'https://your-backend.com',\n *     builtInAuth: true\n *   })\n * ]);\n * ```\n *\n * @example\n * ```tsx\n * // Custom paths for redirect routes\n * ...getInsforgeRoutes({\n *   baseUrl: 'https://your-backend.com',\n *   builtInAuth: true,\n *   paths: {\n *     signIn: '/login',\n *     signUp: '/register'\n *   }\n * })\n * ```\n */\nexport function getInsforgeRoutes(config: GetInsforgeRoutesConfig): RouteObject[] {\n  const { baseUrl, builtInAuth = true, paths = {} } = config;\n\n  const {\n    signIn = '/sign-in',\n    signUp = '/sign-up',\n    verifyEmail = '/verify-email',\n    forgotPassword = '/forgot-password',\n    resetPassword = '/reset-password',\n  } = paths;\n\n  const routes: RouteObject[] = [];\n\n  // Only add redirect routes if using built-in auth\n  if (builtInAuth) {\n    routes.push(\n      {\n        path: signIn,\n        element: <RedirectToAuth baseUrl={baseUrl} path=\"/auth/sign-in\" />,\n      },\n      {\n        path: signUp,\n        element: <RedirectToAuth baseUrl={baseUrl} path=\"/auth/sign-up\" />,\n      },\n      {\n        path: verifyEmail,\n        element: <RedirectToAuth baseUrl={baseUrl} path=\"/auth/verify-email\" />,\n      },\n      {\n        path: forgotPassword,\n        element: <RedirectToAuth baseUrl={baseUrl} path=\"/auth/forgot-password\" />,\n      },\n      {\n        path: resetPassword,\n        element: <RedirectToAuth baseUrl={baseUrl} path=\"/auth/reset-password\" />,\n      }\n    );\n  }\n\n  return routes;\n}\n"]}

package/dist/router.d.cts

@@ -35,9 +35,6 @@ interface GetInsforgeRoutesConfig {
  *
  * Returns redirect routes for sign-in, sign-up, etc. that redirect to your deployed Insforge auth pages.
  *
- * ⚠️ **Important**: You must manually create the `/auth/callback` route in your router
- * to handle authentication callbacks. See documentation for details.
- *
  * @param config - Configuration for Insforge routes
  * @returns Array of RouteObject for React Router (redirect routes only)
  *
@@ -45,7 +42,6 @@ interface GetInsforgeRoutesConfig {
  * ```tsx
  * import { createBrowserRouter } from 'react-router-dom';
  * import { getInsforgeRoutes } from '@insforge/react/router';
- * import { InsforgeCallback } from '@insforge/react';
  *
  * const router = createBrowserRouter([
  *   {
@@ -53,8 +49,6 @@ interface GetInsforgeRoutesConfig {
  *     element: <Layout />,
  *     children: [
  *       { index: true, element: <Home /> },
- *       // ✅ Required: Manually create callback route
- *       { path: 'auth/callback', element: <AuthCallback /> },
  *       { path: 'dashboard', element: <Dashboard /> }
  *     ]
  *   },
@@ -64,11 +58,6 @@ interface GetInsforgeRoutesConfig {
  *     builtInAuth: true
  *   })
  * ]);
- *
- * // src/pages/AuthCallback.tsx
- * function AuthCallback() {
- *   return <InsforgeCallback redirectTo="/dashboard" />;
- * }
  * ```
  *
  * @example

package/dist/router.d.ts

@@ -35,9 +35,6 @@ interface GetInsforgeRoutesConfig {
  *
  * Returns redirect routes for sign-in, sign-up, etc. that redirect to your deployed Insforge auth pages.
  *
- * ⚠️ **Important**: You must manually create the `/auth/callback` route in your router
- * to handle authentication callbacks. See documentation for details.
- *
  * @param config - Configuration for Insforge routes
  * @returns Array of RouteObject for React Router (redirect routes only)
  *
@@ -45,7 +42,6 @@ interface GetInsforgeRoutesConfig {
  * ```tsx
  * import { createBrowserRouter } from 'react-router-dom';
  * import { getInsforgeRoutes } from '@insforge/react/router';
- * import { InsforgeCallback } from '@insforge/react';
  *
  * const router = createBrowserRouter([
  *   {
@@ -53,8 +49,6 @@ interface GetInsforgeRoutesConfig {
  *     element: <Layout />,
  *     children: [
  *       { index: true, element: <Home /> },
- *       // ✅ Required: Manually create callback route
- *       { path: 'auth/callback', element: <AuthCallback /> },
  *       { path: 'dashboard', element: <Dashboard /> }
  *     ]
  *   },
@@ -64,11 +58,6 @@ interface GetInsforgeRoutesConfig {
  *     builtInAuth: true
  *   })
  * ]);
- *
- * // src/pages/AuthCallback.tsx
- * function AuthCallback() {
- *   return <InsforgeCallback redirectTo="/dashboard" />;
- * }
  * ```
  *
  * @example

package/dist/router.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/router/getInsforgeRoutes.tsx"],"names":[],"mappings":";;;AAyCA,SAAS,cAAA,CAAe,EAAE,OAAA,EAAS,IAAA,EAAK,EAAsC;AAC5E,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,WAAA,GAAc,CAAA,EAAG,MAAA,CAAO,QAAA,CAAS,MAAM,CAAA,cAAA,CAAA;AAC7C,IAAA,MAAM,OAAA,GAAU,IAAI,GAAA,CAAI,IAAA,EAAM,OAAO,CAAA;AACrC,IAAA,OAAA,CAAQ,YAAA,CAAa,GAAA,CAAI,UAAA,EAAY,WAAW,CAAA;AAChD,IAAA,MAAA,CAAO,QAAA,CAAS,OAAA,CAAQ,OAAA,CAAQ,QAAA,EAAU,CAAA;AAAA,EAC5C,CAAA,EAAG,CAAC,OAAA,EAAS,IAAI,CAAC,CAAA;AAElB,EAAA,OAAO,IAAA;AACT;AAwDO,SAAS,kBAAkB,MAAA,EAAgD;AAChF,EAAA,MAAM,EAAE,OAAA,EAAS,WAAA,GAAc,MAAM,KAAA,GAAQ,IAAG,GAAI,MAAA;AAEpD,EAAA,MAAM;AAAA,IACJ,MAAA,GAAS,UAAA;AAAA,IACT,MAAA,GAAS,UAAA;AAAA,IACT,WAAA,GAAc,eAAA;AAAA,IACd,cAAA,GAAiB,kBAAA;AAAA,IACjB,aAAA,GAAgB;AAAA,GAClB,GAAI,KAAA;AAEJ,EAAA,MAAM,SAAwB,EAAC;AAG/B,EAAA,IAAI,WAAA,EAAa;AACf,IAAA,MAAA,CAAO,IAAA;AAAA,MACL;AAAA,QACE,IAAA,EAAM,MAAA;AAAA,QACN,OAAA,kBAAS,GAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAkB,MAAK,eAAA,EAAgB;AAAA,OAClE;AAAA,MACA;AAAA,QACE,IAAA,EAAM,MAAA;AAAA,QACN,OAAA,kBAAS,GAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAkB,MAAK,eAAA,EAAgB;AAAA,OAClE;AAAA,MACA;AAAA,QACE,IAAA,EAAM,WAAA;AAAA,QACN,OAAA,kBAAS,GAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAkB,MAAK,oBAAA,EAAqB;AAAA,OACvE;AAAA,MACA;AAAA,QACE,IAAA,EAAM,cAAA;AAAA,QACN,OAAA,kBAAS,GAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAkB,MAAK,uBAAA,EAAwB;AAAA,OAC1E;AAAA,MACA;AAAA,QACE,IAAA,EAAM,aAAA;AAAA,QACN,OAAA,kBAAS,GAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAkB,MAAK,sBAAA,EAAuB;AAAA;AACzE,KACF;AAAA,EACF;AAEA,EAAA,OAAO,MAAA;AACT","file":"router.js","sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\nimport type { RouteObject } from 'react-router-dom';\n\ninterface GetInsforgeRoutesConfig {\n  /**\n   * Base URL of your Insforge backend\n   */\n  baseUrl: string;\n\n  /**\n   * Whether to use built-in auth (deployed Insforge Auth)\n   * When true: redirects to baseUrl/auth/* pages\n   * When false: no redirect routes are added (use your own components)\n   * @default true\n   */\n  builtInAuth?: boolean;\n\n  /**\n   * Custom paths for auth redirect routes\n   * @default {\n   *   signIn: '/sign-in',\n   *   signUp: '/sign-up',\n   *   verifyEmail: '/verify-email',\n   *   forgotPassword: '/forgot-password',\n   *   resetPassword: '/reset-password'\n   * }\n   */\n  paths?: {\n    signIn?: string;\n    signUp?: string;\n    verifyEmail?: string;\n    forgotPassword?: string;\n    resetPassword?: string;\n  };\n}\n\n/**\n * Helper component for redirecting to external auth\n */\nfunction RedirectToAuth({ baseUrl, path }: { baseUrl: string; path: string }) {\n  useEffect(() => {\n    const callbackUrl = `${window.location.origin}/auth/callback`;\n    const authUrl = new URL(path, baseUrl);\n    authUrl.searchParams.set('redirect', callbackUrl);\n    window.location.replace(authUrl.toString());\n  }, [baseUrl, path]);\n\n  return null;\n}\n\n/**\n * Generates Insforge authentication redirect routes for React Router.\n *\n * Returns redirect routes for sign-in, sign-up, etc. that redirect to your deployed Insforge auth pages.\n *\n * ⚠️ **Important**: You must manually create the `/auth/callback` route in your router\n * to handle authentication callbacks. See documentation for details.\n *\n * @param config - Configuration for Insforge routes\n * @returns Array of RouteObject for React Router (redirect routes only)\n *\n * @example\n * ```tsx\n * import { createBrowserRouter } from 'react-router-dom';\n * import { getInsforgeRoutes } from '@insforge/react/router';\n * import { InsforgeCallback } from '@insforge/react';\n *\n * const router = createBrowserRouter([\n *   {\n *     path: '/',\n *     element: <Layout />,\n *     children: [\n *       { index: true, element: <Home /> },\n *       // ✅ Required: Manually create callback route\n *       { path: 'auth/callback', element: <AuthCallback /> },\n *       { path: 'dashboard', element: <Dashboard /> }\n *     ]\n *   },\n *   // Add redirect routes (sign-in, sign-up, etc.)\n *   ...getInsforgeRoutes({\n *     baseUrl: 'https://your-backend.com',\n *     builtInAuth: true\n *   })\n * ]);\n *\n * // src/pages/AuthCallback.tsx\n * function AuthCallback() {\n *   return <InsforgeCallback redirectTo=\"/dashboard\" />;\n * }\n * ```\n *\n * @example\n * ```tsx\n * // Custom paths for redirect routes\n * ...getInsforgeRoutes({\n *   baseUrl: 'https://your-backend.com',\n *   builtInAuth: true,\n *   paths: {\n *     signIn: '/login',\n *     signUp: '/register'\n *   }\n * })\n * ```\n */\nexport function getInsforgeRoutes(config: GetInsforgeRoutesConfig): RouteObject[] {\n  const { baseUrl, builtInAuth = true, paths = {} } = config;\n\n  const {\n    signIn = '/sign-in',\n    signUp = '/sign-up',\n    verifyEmail = '/verify-email',\n    forgotPassword = '/forgot-password',\n    resetPassword = '/reset-password',\n  } = paths;\n\n  const routes: RouteObject[] = [];\n\n  // Only add redirect routes if using built-in auth\n  if (builtInAuth) {\n    routes.push(\n      {\n        path: signIn,\n        element: <RedirectToAuth baseUrl={baseUrl} path=\"/auth/sign-in\" />,\n      },\n      {\n        path: signUp,\n        element: <RedirectToAuth baseUrl={baseUrl} path=\"/auth/sign-up\" />,\n      },\n      {\n        path: verifyEmail,\n        element: <RedirectToAuth baseUrl={baseUrl} path=\"/auth/verify-email\" />,\n      },\n      {\n        path: forgotPassword,\n        element: <RedirectToAuth baseUrl={baseUrl} path=\"/auth/forgot-password\" />,\n      },\n      {\n        path: resetPassword,\n        element: <RedirectToAuth baseUrl={baseUrl} path=\"/auth/reset-password\" />,\n      }\n    );\n  }\n\n  return routes;\n}\n"]}
+{"version":3,"sources":["../src/router/getInsforgeRoutes.tsx"],"names":[],"mappings":";;;AAyCA,SAAS,cAAA,CAAe,EAAE,OAAA,EAAS,IAAA,EAAK,EAAsC;AAC5E,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,WAAA,GAAc,CAAA,EAAG,MAAA,CAAO,QAAA,CAAS,MAAM,CAAA,cAAA,CAAA;AAC7C,IAAA,MAAM,OAAA,GAAU,IAAI,GAAA,CAAI,IAAA,EAAM,OAAO,CAAA;AACrC,IAAA,OAAA,CAAQ,YAAA,CAAa,GAAA,CAAI,UAAA,EAAY,WAAW,CAAA;AAChD,IAAA,MAAA,CAAO,QAAA,CAAS,OAAA,CAAQ,OAAA,CAAQ,QAAA,EAAU,CAAA;AAAA,EAC5C,CAAA,EAAG,CAAC,OAAA,EAAS,IAAI,CAAC,CAAA;AAElB,EAAA,OAAO,IAAA;AACT;AA6CO,SAAS,kBAAkB,MAAA,EAAgD;AAChF,EAAA,MAAM,EAAE,OAAA,EAAS,WAAA,GAAc,MAAM,KAAA,GAAQ,IAAG,GAAI,MAAA;AAEpD,EAAA,MAAM;AAAA,IACJ,MAAA,GAAS,UAAA;AAAA,IACT,MAAA,GAAS,UAAA;AAAA,IACT,WAAA,GAAc,eAAA;AAAA,IACd,cAAA,GAAiB,kBAAA;AAAA,IACjB,aAAA,GAAgB;AAAA,GAClB,GAAI,KAAA;AAEJ,EAAA,MAAM,SAAwB,EAAC;AAG/B,EAAA,IAAI,WAAA,EAAa;AACf,IAAA,MAAA,CAAO,IAAA;AAAA,MACL;AAAA,QACE,IAAA,EAAM,MAAA;AAAA,QACN,OAAA,kBAAS,GAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAkB,MAAK,eAAA,EAAgB;AAAA,OAClE;AAAA,MACA;AAAA,QACE,IAAA,EAAM,MAAA;AAAA,QACN,OAAA,kBAAS,GAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAkB,MAAK,eAAA,EAAgB;AAAA,OAClE;AAAA,MACA;AAAA,QACE,IAAA,EAAM,WAAA;AAAA,QACN,OAAA,kBAAS,GAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAkB,MAAK,oBAAA,EAAqB;AAAA,OACvE;AAAA,MACA;AAAA,QACE,IAAA,EAAM,cAAA;AAAA,QACN,OAAA,kBAAS,GAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAkB,MAAK,uBAAA,EAAwB;AAAA,OAC1E;AAAA,MACA;AAAA,QACE,IAAA,EAAM,aAAA;AAAA,QACN,OAAA,kBAAS,GAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAkB,MAAK,sBAAA,EAAuB;AAAA;AACzE,KACF;AAAA,EACF;AAEA,EAAA,OAAO,MAAA;AACT","file":"router.js","sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\nimport type { RouteObject } from 'react-router-dom';\n\ninterface GetInsforgeRoutesConfig {\n  /**\n   * Base URL of your Insforge backend\n   */\n  baseUrl: string;\n\n  /**\n   * Whether to use built-in auth (deployed Insforge Auth)\n   * When true: redirects to baseUrl/auth/* pages\n   * When false: no redirect routes are added (use your own components)\n   * @default true\n   */\n  builtInAuth?: boolean;\n\n  /**\n   * Custom paths for auth redirect routes\n   * @default {\n   *   signIn: '/sign-in',\n   *   signUp: '/sign-up',\n   *   verifyEmail: '/verify-email',\n   *   forgotPassword: '/forgot-password',\n   *   resetPassword: '/reset-password'\n   * }\n   */\n  paths?: {\n    signIn?: string;\n    signUp?: string;\n    verifyEmail?: string;\n    forgotPassword?: string;\n    resetPassword?: string;\n  };\n}\n\n/**\n * Helper component for redirecting to external auth\n */\nfunction RedirectToAuth({ baseUrl, path }: { baseUrl: string; path: string }) {\n  useEffect(() => {\n    const callbackUrl = `${window.location.origin}/auth/callback`;\n    const authUrl = new URL(path, baseUrl);\n    authUrl.searchParams.set('redirect', callbackUrl);\n    window.location.replace(authUrl.toString());\n  }, [baseUrl, path]);\n\n  return null;\n}\n\n/**\n * Generates Insforge authentication redirect routes for React Router.\n *\n * Returns redirect routes for sign-in, sign-up, etc. that redirect to your deployed Insforge auth pages.\n *\n * @param config - Configuration for Insforge routes\n * @returns Array of RouteObject for React Router (redirect routes only)\n *\n * @example\n * ```tsx\n * import { createBrowserRouter } from 'react-router-dom';\n * import { getInsforgeRoutes } from '@insforge/react/router';\n *\n * const router = createBrowserRouter([\n *   {\n *     path: '/',\n *     element: <Layout />,\n *     children: [\n *       { index: true, element: <Home /> },\n *       { path: 'dashboard', element: <Dashboard /> }\n *     ]\n *   },\n *   // Add redirect routes (sign-in, sign-up, etc.)\n *   ...getInsforgeRoutes({\n *     baseUrl: 'https://your-backend.com',\n *     builtInAuth: true\n *   })\n * ]);\n * ```\n *\n * @example\n * ```tsx\n * // Custom paths for redirect routes\n * ...getInsforgeRoutes({\n *   baseUrl: 'https://your-backend.com',\n *   builtInAuth: true,\n *   paths: {\n *     signIn: '/login',\n *     signUp: '/register'\n *   }\n * })\n * ```\n */\nexport function getInsforgeRoutes(config: GetInsforgeRoutesConfig): RouteObject[] {\n  const { baseUrl, builtInAuth = true, paths = {} } = config;\n\n  const {\n    signIn = '/sign-in',\n    signUp = '/sign-up',\n    verifyEmail = '/verify-email',\n    forgotPassword = '/forgot-password',\n    resetPassword = '/reset-password',\n  } = paths;\n\n  const routes: RouteObject[] = [];\n\n  // Only add redirect routes if using built-in auth\n  if (builtInAuth) {\n    routes.push(\n      {\n        path: signIn,\n        element: <RedirectToAuth baseUrl={baseUrl} path=\"/auth/sign-in\" />,\n      },\n      {\n        path: signUp,\n        element: <RedirectToAuth baseUrl={baseUrl} path=\"/auth/sign-up\" />,\n      },\n      {\n        path: verifyEmail,\n        element: <RedirectToAuth baseUrl={baseUrl} path=\"/auth/verify-email\" />,\n      },\n      {\n        path: forgotPassword,\n        element: <RedirectToAuth baseUrl={baseUrl} path=\"/auth/forgot-password\" />,\n      },\n      {\n        path: resetPassword,\n        element: <RedirectToAuth baseUrl={baseUrl} path=\"/auth/reset-password\" />,\n      }\n    );\n  }\n\n  return routes;\n}\n"]}

package/dist/styles.css

@@ -424,6 +424,19 @@
   border: 1px solid var(--if-color-error);
 }
 
+.if-errorBanner-content {
+  display: flex;
+  align-items: center;
+  gap: var(--if-space-2);
+}
+
+.if-errorBanner-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  flex-shrink: 0;
+  color: var(--if-color-error);
+}
+
 .if-errorBanner-text {
   font-size: var(--if-font-size-sm);
   color: var(--if-color-error);
@@ -497,6 +510,78 @@
   border-color: var(--if-color-border-focus);
 }
 
+/* ============================================
+   VERIFICATION STEP
+   ============================================ */
+.if-verificationStep {
+  display: flex;
+  flex-direction: column;
+  gap: var(--if-space-6);
+  align-items: stretch;
+}
+
+.if-verificationStep-description {
+  font-size: var(--if-font-size-sm);
+  color: var(--if-color-text-secondary);
+  text-align: center;
+  margin: 0;
+  font-family: var(--if-font-family);
+}
+
+.if-verificationStep-codeContainer {
+  width: 100%;
+  background-color: #f5f5f5;
+  border-radius: var(--if-radius-lg);
+  padding: var(--if-space-4) var(--if-space-4) var(--if-space-6);
+  display: flex;
+  flex-direction: column;
+  gap: var(--if-space-4);
+}
+
+.if-verificationStep-codeInputWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--if-space-3);
+  margin-top: var(--if-space-2);
+}
+
+.if-verificationStep-verifyingText {
+  font-size: var(--if-font-size-sm);
+  color: var(--if-color-text-secondary);
+  text-align: center;
+  font-family: var(--if-font-family);
+}
+
+.if-verificationStep-resendContainer {
+  width: 100%;
+  font-size: var(--if-font-size-sm);
+  text-align: center;
+  color: var(--if-color-text-secondary);
+  font-family: var(--if-font-family);
+}
+
+.if-verificationStep-resendButton {
+  color: var(--if-color-text);
+  font-weight: 500;
+  transition: all var(--if-transition-base);
+  background: none;
+  border: none;
+  padding: 0;
+  font-family: var(--if-font-family);
+  font-size: var(--if-font-size-sm);
+}
+
+.if-verificationStep-resendButton:not(:disabled) {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.if-verificationStep-resendButton:disabled {
+  cursor: not-allowed;
+  text-decoration: none;
+  opacity: 0.5;
+}
+
 /* ============================================
    PASSWORD STRENGTH INDICATOR
    ============================================ */
@@ -576,20 +661,38 @@
 /* ============================================
    USER BUTTON
    ============================================ */
+.if-userButton-container {
+  position: relative;
+  display: inline-block;
+}
+
 .if-userButton {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: center;
+  gap: var(--if-space-2);
   padding: var(--if-space-2);
   border-radius: 9999px;
-  background-color: var(--if-color-bg-white);
-  border: 1px solid var(--if-color-border);
+  background-color: transparent;
+  border: none;
   cursor: pointer;
   transition: all var(--if-transition-base);
 }
 
 .if-userButton:hover {
+  opacity: 0.8;
+}
+
+.if-userButton-detailed {
+  background-color: var(--if-color-bg-white);
+  border: 1px solid var(--if-color-border);
+  border-radius: var(--if-radius-sm);
+  padding: var(--if-space-2);
+}
+
+.if-userButton-detailed:hover {
   background-color: var(--if-color-bg-light);
+  opacity: 1;
 }
 
 .if-userButton-avatar {
@@ -604,6 +707,44 @@
   font-weight: 600;
   font-size: var(--if-font-size-sm);
   font-family: var(--if-font-family);
+  overflow: hidden;
+}
+
+.if-userButton-avatarImage {
+  border-radius: 9999px;
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+
+.if-userButton-avatarInitials {
+  color: var(--if-color-bg-white);
+  font-weight: 600;
+  font-size: var(--if-font-size-sm);
+}
+
+.if-userButton-info {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.125rem;
+}
+
+.if-userButton-name {
+  font-size: var(--if-font-size-sm);
+  font-weight: 600;
+  color: var(--if-color-text);
+  line-height: 1.25rem;
+  text-align: left;
+  font-family: var(--if-font-family);
+}
+
+.if-userButton-email {
+  font-size: var(--if-font-size-xs);
+  color: var(--if-color-text-secondary);
+  line-height: 1rem;
+  text-align: left;
+  font-family: var(--if-font-family);
 }
 
 .if-userButton-menu {
@@ -629,12 +770,80 @@
   font-size: var(--if-font-size-sm);
   color: var(--if-color-text);
   font-family: var(--if-font-family);
+  background: none;
+  border: none;
+  width: 100%;
+  text-align: left;
 }
 
 .if-userButton-menuItem:hover {
   background-color: var(--if-color-bg-light);
 }
 
+.if-userButton-menuItem-signout {
+  color: var(--if-color-error);
+}
+
+.if-userButton-menuItem-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+/* ============================================
+   EMAIL VERIFICATION STATUS
+   ============================================ */
+.if-verifyStatus-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--if-space-6);
+}
+
+.if-verifyStatus-container-stretch {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: center;
+  gap: var(--if-space-6);
+}
+
+.if-verifyStatus-spinner {
+  border-radius: 9999px;
+  height: 3rem;
+  width: 3rem;
+  border-bottom: 2px solid var(--if-color-primary);
+}
+
+.if-verifyStatus-successContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--if-space-4);
+}
+
+.if-verifyStatus-successIcon {
+  width: 4rem;
+  height: 4rem;
+  border-radius: 9999px;
+  background-color: #d1fae5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.if-verifyStatus-successIconSvg {
+  width: 2rem;
+  height: 2rem;
+  color: #059669;
+}
+
+.if-verifyStatus-textCenter {
+  text-align: center;
+}
+
 /* ============================================
    UTILITY CLASSES
    ============================================ */