@drmhse/authos-react 0.2.2 → 0.2.3

package/README.md

@@ -232,6 +232,31 @@ Individual OAuth provider button. Requires `org` and `service` in provider confi
 <OAuthButton provider="google">Continue with Google</OAuthButton>
 ```
 
+### Callback
+
+Required for OAuth flows. Handles the redirect from the identity provider by parsing tokens from the URL fragment and setting the session.
+
+```tsx
+import { Callback } from '@drmhse/authos-react';
+
+function CallbackPage() {
+  const router = useRouter();
+  
+  return (
+    <Callback 
+      onSuccess={() => router.push('/')}
+      onError={(error) => console.error(error)}
+    />
+  );
+}
+```
+
+**Props:**
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `onSuccess` | `() => void` | - | Callback after session is successfully set |
+| `onError` | `(error: Error) => void` | - | Callback on error |
+
 ## Hooks
 
 ### useAuthOS

package/dist/index.d.mts

@@ -283,6 +283,19 @@ interface SignedOutProps {
     /** Content to render when user is signed out */
     children: React.ReactNode;
 }
+/**
+ * Props for the Callback component
+ */
+interface CallbackProps {
+    /** Callback when session is successfully set */
+    onSuccess?: () => void;
+    /** Callback when session setting fails */
+    onError?: (error: Error) => void;
+    /** Custom render function for the callback state */
+    children?: (props: {
+        error: string | null;
+    }) => React.ReactNode;
+}
 
 /**
  * Provider component that wraps your app and provides AuthOS context.
@@ -723,4 +736,6 @@ interface PasskeySignInProps {
  */
 declare function PasskeySignIn({ onSuccess, onError, className, showPasswordSignIn, }: PasskeySignInProps): react_jsx_runtime.JSX.Element;
 
-export { type AuthOSConfig, type AuthOSContextState, AuthOSProvider, type AuthOSProviderProps, MagicLinkSignIn, type MagicLinkSignInProps, OAuthButton, type OAuthButtonProps, OrganizationSwitcher, type OrganizationSwitcherProps, PasskeySignIn, type PasskeySignInProps, Protect, type ProtectProps, SignIn, type SignInProps, SignUp, type SignUpProps, SignedIn, type SignedInProps, SignedOut, type SignedOutProps, type SupportedOAuthProvider, UserButton, type UserButtonProps, useAllPermissions, useAnyPermission, useAuthOS, useAuthOSContext, useOrganization, usePermission, useUser };
+declare function Callback({ onSuccess, onError, children }: CallbackProps): react_jsx_runtime.JSX.Element;
+
+export { type AuthOSConfig, type AuthOSContextState, AuthOSProvider, type AuthOSProviderProps, Callback, type CallbackProps, MagicLinkSignIn, type MagicLinkSignInProps, OAuthButton, type OAuthButtonProps, OrganizationSwitcher, type OrganizationSwitcherProps, PasskeySignIn, type PasskeySignInProps, Protect, type ProtectProps, SignIn, type SignInProps, SignUp, type SignUpProps, SignedIn, type SignedInProps, SignedOut, type SignedOutProps, type SupportedOAuthProvider, UserButton, type UserButtonProps, useAllPermissions, useAnyPermission, useAuthOS, useAuthOSContext, useOrganization, usePermission, useUser };

package/dist/index.d.ts

@@ -283,6 +283,19 @@ interface SignedOutProps {
     /** Content to render when user is signed out */
     children: React.ReactNode;
 }
+/**
+ * Props for the Callback component
+ */
+interface CallbackProps {
+    /** Callback when session is successfully set */
+    onSuccess?: () => void;
+    /** Callback when session setting fails */
+    onError?: (error: Error) => void;
+    /** Custom render function for the callback state */
+    children?: (props: {
+        error: string | null;
+    }) => React.ReactNode;
+}
 
 /**
  * Provider component that wraps your app and provides AuthOS context.
@@ -723,4 +736,6 @@ interface PasskeySignInProps {
  */
 declare function PasskeySignIn({ onSuccess, onError, className, showPasswordSignIn, }: PasskeySignInProps): react_jsx_runtime.JSX.Element;
 
-export { type AuthOSConfig, type AuthOSContextState, AuthOSProvider, type AuthOSProviderProps, MagicLinkSignIn, type MagicLinkSignInProps, OAuthButton, type OAuthButtonProps, OrganizationSwitcher, type OrganizationSwitcherProps, PasskeySignIn, type PasskeySignInProps, Protect, type ProtectProps, SignIn, type SignInProps, SignUp, type SignUpProps, SignedIn, type SignedInProps, SignedOut, type SignedOutProps, type SupportedOAuthProvider, UserButton, type UserButtonProps, useAllPermissions, useAnyPermission, useAuthOS, useAuthOSContext, useOrganization, usePermission, useUser };
+declare function Callback({ onSuccess, onError, children }: CallbackProps): react_jsx_runtime.JSX.Element;
+
+export { type AuthOSConfig, type AuthOSContextState, AuthOSProvider, type AuthOSProviderProps, Callback, type CallbackProps, MagicLinkSignIn, type MagicLinkSignInProps, OAuthButton, type OAuthButtonProps, OrganizationSwitcher, type OrganizationSwitcherProps, PasskeySignIn, type PasskeySignInProps, Protect, type ProtectProps, SignIn, type SignInProps, SignUp, type SignUpProps, SignedIn, type SignedInProps, SignedOut, type SignedOutProps, type SupportedOAuthProvider, UserButton, type UserButtonProps, useAllPermissions, useAnyPermission, useAuthOS, useAuthOSContext, useOrganization, usePermission, useUser };

package/dist/index.js

@@ -1387,6 +1387,51 @@ function PasskeySignIn({
     showPasswordSignIn && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-authos-signin-prompt": "", children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: "/signin", "data-authos-link": "signin", children: "Sign in with password" }) })
   ] }) });
 }
+function Callback({ onSuccess, onError, children }) {
+  const { client } = useAuthOSContext();
+  const [error, setError] = react.useState(null);
+  const processedRef = react.useRef(false);
+  react.useEffect(() => {
+    if (processedRef.current || !client) return;
+    const processCallback = async () => {
+      processedRef.current = true;
+      const hash = window.location.hash.substring(1);
+      const params = new URLSearchParams(hash);
+      const accessToken = params.get("access_token");
+      const refreshToken = params.get("refresh_token");
+      const errorParam = params.get("error");
+      const errorDescription = params.get("error_description");
+      if (errorParam) {
+        const msg = errorDescription || errorParam;
+        setError(msg);
+        onError?.(new Error(msg));
+        return;
+      }
+      if (accessToken) {
+        try {
+          await client.setSession({
+            access_token: accessToken,
+            refresh_token: refreshToken || void 0
+          });
+          onSuccess?.();
+        } catch (err) {
+          const message = err.message || "Failed to set session";
+          setError(message);
+          onError?.(err instanceof Error ? err : new Error(message));
+        }
+      } else {
+        const message = "No authentication tokens found in callback URL.";
+        setError(message);
+        onError?.(new Error(message));
+      }
+    };
+    processCallback();
+  }, [client, onSuccess, onError]);
+  if (children) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: children({ error }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-authos-callback": "", children: error ? /* @__PURE__ */ jsxRuntime.jsx("div", { "data-authos-error": "", children: error }) : /* @__PURE__ */ jsxRuntime.jsx("div", { "data-authos-loading": "", children: "Completing sign in..." }) });
+}
 
 Object.defineProperty(exports, "AuthErrorCodes", {
   enumerable: true,
@@ -1401,6 +1446,7 @@ Object.defineProperty(exports, "SsoClient", {
   get: function () { return ssoSdk.SsoClient; }
 });
 exports.AuthOSProvider = AuthOSProvider;
+exports.Callback = Callback;
 exports.MagicLinkSignIn = MagicLinkSignIn;
 exports.OAuthButton = OAuthButton;
 exports.OrganizationSwitcher = OrganizationSwitcher;

package/dist/index.mjs

@@ -1386,5 +1386,50 @@ function PasskeySignIn({
     showPasswordSignIn && /* @__PURE__ */ jsx("div", { "data-authos-signin-prompt": "", children: /* @__PURE__ */ jsx("a", { href: "/signin", "data-authos-link": "signin", children: "Sign in with password" }) })
   ] }) });
 }
+function Callback({ onSuccess, onError, children }) {
+  const { client } = useAuthOSContext();
+  const [error, setError] = useState(null);
+  const processedRef = useRef(false);
+  useEffect(() => {
+    if (processedRef.current || !client) return;
+    const processCallback = async () => {
+      processedRef.current = true;
+      const hash = window.location.hash.substring(1);
+      const params = new URLSearchParams(hash);
+      const accessToken = params.get("access_token");
+      const refreshToken = params.get("refresh_token");
+      const errorParam = params.get("error");
+      const errorDescription = params.get("error_description");
+      if (errorParam) {
+        const msg = errorDescription || errorParam;
+        setError(msg);
+        onError?.(new Error(msg));
+        return;
+      }
+      if (accessToken) {
+        try {
+          await client.setSession({
+            access_token: accessToken,
+            refresh_token: refreshToken || void 0
+          });
+          onSuccess?.();
+        } catch (err) {
+          const message = err.message || "Failed to set session";
+          setError(message);
+          onError?.(err instanceof Error ? err : new Error(message));
+        }
+      } else {
+        const message = "No authentication tokens found in callback URL.";
+        setError(message);
+        onError?.(new Error(message));
+      }
+    };
+    processCallback();
+  }, [client, onSuccess, onError]);
+  if (children) {
+    return /* @__PURE__ */ jsx(Fragment, { children: children({ error }) });
+  }
+  return /* @__PURE__ */ jsx("div", { "data-authos-callback": "", children: error ? /* @__PURE__ */ jsx("div", { "data-authos-error": "", children: error }) : /* @__PURE__ */ jsx("div", { "data-authos-loading": "", children: "Completing sign in..." }) });
+}
 
-export { AuthOSProvider, MagicLinkSignIn, OAuthButton, OrganizationSwitcher, PasskeySignIn, Protect, SignIn, SignUp, SignedIn, SignedOut, UserButton, useAllPermissions, useAnyPermission, useAuthOS, useAuthOSContext, useOrganization, usePermission, useUser };
+export { AuthOSProvider, Callback, MagicLinkSignIn, OAuthButton, OrganizationSwitcher, PasskeySignIn, Protect, SignIn, SignUp, SignedIn, SignedOut, UserButton, useAllPermissions, useAnyPermission, useAuthOS, useAuthOSContext, useOrganization, usePermission, useUser };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drmhse/authos-react",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "React and Next.js adapter for AuthOS authentication",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -28,7 +28,8 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "README.md"
   ],
   "scripts": {
     "build": "tsup",