@drmhse/authos-react 0.2.1 → 0.2.3

package/README.md

@@ -146,10 +146,14 @@ Registration form for new users.
 <SignUp
   onSuccess={() => console.log('Check your email!')}
   onError={(error) => console.error(error)}
-  orgSlug="my-org"  // Optional: pre-fill organization
+  orgSlug="my-org"      // Optional: override provider config
+  serviceSlug="my-app"  // Optional: override provider config
 />
 ```
 
+> [!NOTE]
+> The `orgSlug` and `serviceSlug` props are optional and will fallback to the values configured in `AuthOSProvider`. Only use these props if you need to override the provider configuration for a specific use case.
+
 ### MagicLinkSignIn
 
 Sign-in component for Magic Links (passwordless).
@@ -228,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

@@ -568,6 +568,16 @@ function AuthOSProvider({ config, children, client: externalClient, initialSessi
     if (config.appearance?.variables) {
       applyVariables(config.appearance.variables);
     }
+    if (config.org && !config.service) {
+      console.warn(
+        '[AuthOS] You provided "org" but not "service". OAuth flows may not work correctly.'
+      );
+    }
+    if (!config.org && config.service) {
+      console.warn(
+        '[AuthOS] You provided "service" but not "org". OAuth flows may not work correctly.'
+      );
+    }
   }, [config.appearance]);
   const hasInitialToken = react.useRef(!!initialSessionToken);
   react.useEffect(() => {
@@ -946,8 +956,8 @@ function SignUp({
         await client.auth.register({
           email,
           password,
-          org_slug: orgSlug,
-          service_slug: serviceSlug
+          org_slug: orgSlug ?? config.org,
+          service_slug: serviceSlug ?? config.service
         });
         setIsSuccess(true);
         onSuccess?.();
@@ -1377,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,
@@ -1391,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

@@ -567,6 +567,16 @@ function AuthOSProvider({ config, children, client: externalClient, initialSessi
     if (config.appearance?.variables) {
       applyVariables(config.appearance.variables);
     }
+    if (config.org && !config.service) {
+      console.warn(
+        '[AuthOS] You provided "org" but not "service". OAuth flows may not work correctly.'
+      );
+    }
+    if (!config.org && config.service) {
+      console.warn(
+        '[AuthOS] You provided "service" but not "org". OAuth flows may not work correctly.'
+      );
+    }
   }, [config.appearance]);
   const hasInitialToken = useRef(!!initialSessionToken);
   useEffect(() => {
@@ -945,8 +955,8 @@ function SignUp({
         await client.auth.register({
           email,
           password,
-          org_slug: orgSlug,
-          service_slug: serviceSlug
+          org_slug: orgSlug ?? config.org,
+          service_slug: serviceSlug ?? config.service
         });
         setIsSuccess(true);
         onSuccess?.();
@@ -1376,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 };