@insforge/react 0.6.4 → 0.6.6

package/dist/components.d.cts

@@ -223,6 +223,14 @@ interface ConditionalProps$1 {
 /**
  * Conditional component that renders children only when user is signed in.
  *
+ * Uses userId to determine rendering:
+ * - undefined = not loaded yet (SSR or before hydration) -> render null
+ * - null = loaded, user signed out -> render null
+ * - string = loaded, user signed in -> render children
+ *
+ * This prevents hydration mismatches in Next.js SSR by ensuring
+ * consistent rendering between server and client initial render.
+ *
  * @component
  * @example
  * ```tsx
@@ -242,6 +250,14 @@ interface ConditionalProps {
 /**
  * Conditional component that renders children only when user is signed out.
  *
+ * Uses userId to determine rendering:
+ * - undefined = not loaded yet (SSR or before hydration) -> render null
+ * - null = loaded, user signed out -> render children
+ * - string = loaded, user signed in -> render null
+ *
+ * This prevents hydration mismatches in Next.js SSR by ensuring
+ * consistent rendering between server and client initial render.
+ *
  * @component
  * @example
  * ```tsx

package/dist/components.d.ts

@@ -223,6 +223,14 @@ interface ConditionalProps$1 {
 /**
  * Conditional component that renders children only when user is signed in.
  *
+ * Uses userId to determine rendering:
+ * - undefined = not loaded yet (SSR or before hydration) -> render null
+ * - null = loaded, user signed out -> render null
+ * - string = loaded, user signed in -> render children
+ *
+ * This prevents hydration mismatches in Next.js SSR by ensuring
+ * consistent rendering between server and client initial render.
+ *
  * @component
  * @example
  * ```tsx
@@ -242,6 +250,14 @@ interface ConditionalProps {
 /**
  * Conditional component that renders children only when user is signed out.
  *
+ * Uses userId to determine rendering:
+ * - undefined = not loaded yet (SSR or before hydration) -> render null
+ * - null = loaded, user signed out -> render children
+ * - string = loaded, user signed in -> render null
+ *
+ * This prevents hydration mismatches in Next.js SSR by ensuring
+ * consistent rendering between server and client initial render.
+ *
  * @component
  * @example
  * ```tsx

package/dist/components.js

@@ -27,9 +27,10 @@ function useInsforge() {
   const context = useContext(InsforgeContext);
   if (!context) {
     return {
-      user: null,
+      user: void 0,
+      userId: void 0,
       isLoaded: false,
-      isSignedIn: false,
+      isSignedIn: void 0,
       setUser: () => {
       },
       signIn: () => Promise.resolve({ error: "SSR mode" }),
@@ -1963,16 +1964,16 @@ function Protect({
   condition,
   onRedirect
 }) {
-  const { isSignedIn, isLoaded, user } = useInsforge();
+  const { userId, user } = useInsforge();
   const resolvedRedirectTo = useMemo(() => resolveAuthPath(redirectTo), [redirectTo]);
   useEffect(() => {
-    if (isLoaded && !isSignedIn) {
+    if (userId === null) {
       if (onRedirect) {
         onRedirect(resolvedRedirectTo);
       } else {
         window.location.href = resolvedRedirectTo;
       }
-    } else if (isLoaded && isSignedIn && condition && user) {
+    } else if (userId && condition && user) {
       if (!condition(user)) {
         if (onRedirect) {
           onRedirect(resolvedRedirectTo);
@@ -1981,11 +1982,11 @@ function Protect({
         }
       }
     }
-  }, [isLoaded, isSignedIn, resolvedRedirectTo, condition, user, onRedirect]);
-  if (!isLoaded) {
+  }, [userId, resolvedRedirectTo, condition, user, onRedirect]);
+  if (userId === void 0) {
     return fallback || /* @__PURE__ */ jsx("div", { className: "insforge-loading", children: "Loading..." });
   }
-  if (!isSignedIn) {
+  if (userId === null) {
     return fallback || null;
   }
   if (condition && user && !condition(user)) {
@@ -1994,24 +1995,18 @@ function Protect({
   return /* @__PURE__ */ jsx(Fragment, { children });
 }
 function SignedIn({ children }) {
-  const { isSignedIn, isLoaded } = useInsforge();
-  if (!isLoaded) {
-    return null;
-  }
-  if (!isSignedIn) {
-    return null;
+  const { userId } = useInsforge();
+  if (userId) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
   }
-  return /* @__PURE__ */ jsx(Fragment, { children });
+  return null;
 }
 function SignedOut({ children }) {
-  const { isSignedIn, isLoaded } = useInsforge();
-  if (!isLoaded) {
-    return null;
-  }
-  if (isSignedIn) {
-    return null;
+  const { userId } = useInsforge();
+  if (userId === null) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
   }
-  return /* @__PURE__ */ jsx(Fragment, { children });
+  return null;
 }
 function SignInButton({ children, className }) {
   const { afterSignInUrl, baseUrl } = useInsforge();