@insforge/react 0.2.8 → 0.2.10

package/dist/components.d.mts

@@ -12,16 +12,14 @@ import '@insforge/shared-schemas';
  * @component
  * @example
  * ```tsx
- * <SignIn afterSignInUrl="/dashboard" />
- *
- * // With custom callbacks
  * <SignIn
+ *   afterSignInUrl="/auth/callback"
  *   onSuccess={(user) => console.log('Signed in:', user)}
  *   onError={(error) => console.error('Error:', error)}
  * />
  * ```
  */
-declare function SignIn({ onSuccess, onError, ...uiProps }: SignInProps): react_jsx_runtime.JSX.Element | null;
+declare function SignIn({ afterSignInUrl, onSuccess, onError, ...uiProps }: SignInProps): react_jsx_runtime.JSX.Element | null;
 
 /**
  * Pre-built sign-up component with full authentication logic.
@@ -29,16 +27,15 @@ declare function SignIn({ onSuccess, onError, ...uiProps }: SignInProps): react_
  * @component
  * @example
  * ```tsx
- * <SignUp afterSignUpUrl="/onboarding" />
- *
- * // With custom callbacks
  * <SignUp
+ *   afterSignUpUrl="/auth/callback"
  *   onSuccess={(user) => console.log('Signed up:', user)}
  *   onError={(error) => console.error('Error:', error)}
  * />
+ *
  * ```
  */
-declare function SignUp({ onSuccess, onError, ...uiProps }: SignUpProps): react_jsx_runtime.JSX.Element | null;
+declare function SignUp({ afterSignUpUrl, onSuccess, onError, ...uiProps }: SignUpProps): react_jsx_runtime.JSX.Element | null;
 
 /**
  * User profile button with dropdown menu and sign-out functionality.
@@ -157,15 +154,20 @@ interface InsforgeCallbackProps {
     onRedirect?: (url: string) => void;
 }
 /**
- * InsforgeCallback - Handles OAuth and email/password authentication callbacks
+ * InsforgeCallback - Handles OAuth authentication callbacks
  *
  * Place this component on your `/auth/callback` page.
  *
+ * How it works:
+ * 1. SDK automatically detects OAuth callback parameters and saves to localStorage
+ * 2. Provider validates the session from localStorage
+ * 3. This component waits for validation and handles redirect
+ *
  * @example
  * ```tsx
  * // Minimal usage
  * export default function CallbackPage() {
- *   return <InsforgeCallback />;
+ *   return <InsforgeCallback redirectTo="/dashboard" />;
  * }
  * ```
  *

package/dist/components.d.ts

@@ -12,16 +12,14 @@ import '@insforge/shared-schemas';
  * @component
  * @example
  * ```tsx
- * <SignIn afterSignInUrl="/dashboard" />
- *
- * // With custom callbacks
  * <SignIn
+ *   afterSignInUrl="/auth/callback"
  *   onSuccess={(user) => console.log('Signed in:', user)}
  *   onError={(error) => console.error('Error:', error)}
  * />
  * ```
  */
-declare function SignIn({ onSuccess, onError, ...uiProps }: SignInProps): react_jsx_runtime.JSX.Element | null;
+declare function SignIn({ afterSignInUrl, onSuccess, onError, ...uiProps }: SignInProps): react_jsx_runtime.JSX.Element | null;
 
 /**
  * Pre-built sign-up component with full authentication logic.
@@ -29,16 +27,15 @@ declare function SignIn({ onSuccess, onError, ...uiProps }: SignInProps): react_
  * @component
  * @example
  * ```tsx
- * <SignUp afterSignUpUrl="/onboarding" />
- *
- * // With custom callbacks
  * <SignUp
+ *   afterSignUpUrl="/auth/callback"
  *   onSuccess={(user) => console.log('Signed up:', user)}
  *   onError={(error) => console.error('Error:', error)}
  * />
+ *
  * ```
  */
-declare function SignUp({ onSuccess, onError, ...uiProps }: SignUpProps): react_jsx_runtime.JSX.Element | null;
+declare function SignUp({ afterSignUpUrl, onSuccess, onError, ...uiProps }: SignUpProps): react_jsx_runtime.JSX.Element | null;
 
 /**
  * User profile button with dropdown menu and sign-out functionality.
@@ -157,15 +154,20 @@ interface InsforgeCallbackProps {
     onRedirect?: (url: string) => void;
 }
 /**
- * InsforgeCallback - Handles OAuth and email/password authentication callbacks
+ * InsforgeCallback - Handles OAuth authentication callbacks
  *
  * Place this component on your `/auth/callback` page.
  *
+ * How it works:
+ * 1. SDK automatically detects OAuth callback parameters and saves to localStorage
+ * 2. Provider validates the session from localStorage
+ * 3. This component waits for validation and handles redirect
+ *
  * @example
  * ```tsx
  * // Minimal usage
  * export default function CallbackPage() {
- *   return <InsforgeCallback />;
+ *   return <InsforgeCallback redirectTo="/dashboard" />;
  * }
  * ```
  *

package/dist/components.js

@@ -911,6 +911,7 @@ function SignInForm({
   );
 }
 function SignIn({
+  afterSignInUrl,
   onSuccess,
   onError,
   ...uiProps
@@ -950,10 +951,9 @@ function SignIn({
     try {
       setOauthLoading(provider);
       setError("");
-      const redirectTo = `${window.location.origin}/auth/callback`;
       await insforge.auth.signInWithOAuth({
         provider,
-        redirectTo
+        redirectTo: afterSignInUrl
       });
     } catch (err) {
       const errorMessage = err.message || `${provider} sign in failed`;
@@ -1132,6 +1132,7 @@ function SignUpForm({
   );
 }
 function SignUp({
+  afterSignUpUrl,
   onSuccess,
   onError,
   ...uiProps
@@ -1176,10 +1177,9 @@ function SignUp({
     try {
       setOauthLoading(provider);
       setError("");
-      const redirectTo = `${window.location.origin}/auth/callback`;
       await insforge.auth.signInWithOAuth({
         provider,
-        redirectTo
+        redirectTo: afterSignUpUrl
       });
     } catch (err) {
       const errorMessage = err.message || `${provider} sign up failed`;
@@ -1386,18 +1386,19 @@ function SignedOut({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
 }
 function InsforgeCallback({
-  redirectTo,
+  redirectTo = "/",
   onSuccess,
   onError,
   loadingComponent,
   onRedirect
 }) {
   const isProcessingRef = react.useRef(false);
-  const { handleAuthCallback } = useInsforge();
+  const { isLoaded, isSignedIn } = useInsforge();
   react.useEffect(() => {
+    if (!isLoaded) return;
+    if (isProcessingRef.current) return;
+    isProcessingRef.current = true;
     const processCallback = async () => {
-      if (isProcessingRef.current) return;
-      isProcessingRef.current = true;
       const searchParams = new URLSearchParams(window.location.search);
       const error = searchParams.get("error");
       if (error) {
@@ -1413,26 +1414,8 @@ function InsforgeCallback({
         }
         return;
       }
-      const accessToken = searchParams.get("access_token");
-      if (!accessToken) {
-        const errorMsg = "no_token";
-        if (onError) {
-          onError(errorMsg);
-        } else {
-          const errorUrl = "/?error=" + encodeURIComponent(errorMsg);
-          if (onRedirect) {
-            onRedirect(errorUrl);
-          } else {
-            window.location.href = errorUrl;
-          }
-        }
-        return;
-      }
-      const result = await handleAuthCallback({
-        accessToken
-      });
-      if (!result.success) {
-        const errorMsg = result.error || "authentication_failed";
+      if (!isSignedIn) {
+        const errorMsg = "authentication_failed";
         if (onError) {
           onError(errorMsg);
         } else {
@@ -1449,17 +1432,14 @@ function InsforgeCallback({
       if (onSuccess) {
         onSuccess();
       }
-      const destination = redirectTo || sessionStorage.getItem("auth_destination") || sessionStorage.getItem("oauth_final_destination") || "/";
-      sessionStorage.removeItem("auth_destination");
-      sessionStorage.removeItem("oauth_final_destination");
       if (onRedirect) {
-        onRedirect(destination);
+        onRedirect(redirectTo);
       } else {
-        window.location.href = destination;
+        window.location.href = redirectTo;
       }
     };
     processCallback();
-  }, [handleAuthCallback, redirectTo, onSuccess, onError, onRedirect]);
+  }, [isLoaded, isSignedIn, redirectTo, onSuccess, onError, onRedirect]);
   const defaultLoading = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
     /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-semibold mb-4", children: "Completing authentication..." }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto" })