@drmhse/authos-react 0.1.3 → 0.1.5

package/dist/index.js

@@ -50,6 +50,7 @@ function AuthOSProvider({ config, children, client: externalClient, initialSessi
   const contextValue = react.useMemo(
     () => ({
       client,
+      config,
       user,
       isAuthenticated: !!user,
       isLoading,
@@ -58,7 +59,7 @@ function AuthOSProvider({ config, children, client: externalClient, initialSessi
       setOrganization,
       refreshUser
     }),
-    [client, user, isLoading, organization, refreshUser]
+    [client, config, user, isLoading, organization, refreshUser]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(AuthOSContext.Provider, { value: contextValue, children });
 }
@@ -85,8 +86,12 @@ function useOrganization() {
   const { client, organization, setOrganization, refreshUser } = useAuthOSContext();
   const switchOrganization = react.useCallback(
     async (slug) => {
-      const orgResponse = await client.organizations.get(slug);
-      setOrganization(orgResponse.organization);
+      const result = await client.organizations.select(slug);
+      await client.setSession({
+        access_token: result.access_token,
+        refresh_token: result.refresh_token
+      });
+      setOrganization(result.organization);
       await refreshUser();
     },
     [client, setOrganization, refreshUser]
@@ -114,15 +119,71 @@ function useAllPermissions(permissions) {
     return permissions.every((perm) => user.permissions.includes(perm));
   }, [user?.permissions, permissions]);
 }
+var PROVIDER_NAMES = {
+  github: "GitHub",
+  google: "Google",
+  microsoft: "Microsoft"
+};
+function OAuthButton({
+  provider,
+  children,
+  className,
+  onRedirect,
+  disabled = false
+}) {
+  const { client, config } = useAuthOSContext();
+  const handleClick = react.useCallback(() => {
+    if (!config.org || !config.service) {
+      console.error(
+        `[AuthOS] OAuth login requires "org" and "service" in AuthOSProvider config.
+Current config: { org: ${config.org ? `"${config.org}"` : "undefined"}, service: ${config.service ? `"${config.service}"` : "undefined"} }
+
+Example:
+  <AuthOSProvider config={{
+    baseURL: "${config.baseURL}",
+    org: "your-org-slug",
+    service: "your-service-slug",
+  }}>
+
+See: https://docs.authos.dev/react/oauth-setup`
+      );
+      return;
+    }
+    const redirectUri = config.redirectUri ?? (typeof window !== "undefined" ? window.location.origin + "/callback" : void 0);
+    const url = client.auth.getLoginUrl(provider, {
+      org: config.org,
+      service: config.service,
+      redirect_uri: redirectUri
+    });
+    onRedirect?.();
+    window.location.href = url;
+  }, [client, config, provider, onRedirect]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      className,
+      disabled,
+      "data-authos-oauth": "",
+      "data-provider": provider,
+      children: children ?? `Continue with ${PROVIDER_NAMES[provider]}`
+    }
+  );
+}
 var MFA_PREAUTH_EXPIRY = 300;
 function SignIn({
   onSuccess,
   onError,
   showForgotPassword = true,
   showSignUp = true,
-  className
+  className,
+  providers = false,
+  showDivider = true
 }) {
-  const { client, setUser } = useAuthOSContext();
+  const { client, config, setUser } = useAuthOSContext();
+  const hasOAuthConfig = !!(config.org && config.service);
+  const oauthProviders = providers && Array.isArray(providers) ? providers : [];
   const [state, setState] = react.useState("credentials");
   const [email, setEmail] = react.useState("");
   const [password, setPassword] = react.useState("");
@@ -136,7 +197,12 @@ function SignIn({
       setError(null);
       setIsLoading(true);
       try {
-        const result = await client.auth.login({ email, password });
+        const result = await client.auth.login({
+          email,
+          password,
+          org_slug: config.org,
+          service_slug: config.service
+        });
         if (result.expires_in === MFA_PREAUTH_EXPIRY) {
           setPreauthToken(result.access_token);
           setState("mfa");
@@ -153,7 +219,7 @@ function SignIn({
         setIsLoading(false);
       }
     },
-    [client, email, password, setUser, onSuccess, onError]
+    [client, email, password, config.org, config.service, setUser, onSuccess, onError]
   );
   const handleMfaSubmit = react.useCallback(
     async (e) => {
@@ -205,49 +271,63 @@ function SignIn({
       /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: handleBackToCredentials, "data-authos-back": "", children: "Back to login" })
     ] }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, "data-authos-signin": "", "data-state": "credentials", children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleCredentialsSubmit, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-authos-field": "email", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "authos-email", children: "Email" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          id: "authos-email",
-          type: "email",
-          autoComplete: "email",
-          value: email,
-          onChange: (e) => setEmail(e.target.value),
-          placeholder: "Enter your email",
-          required: true,
-          disabled: isLoading
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-authos-field": "password", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "authos-password", children: "Password" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, "data-authos-signin": "", "data-state": "credentials", children: [
+    oauthProviders.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-authos-oauth-section": "", children: [
+      oauthProviders.map((provider) => /* @__PURE__ */ jsxRuntime.jsx(
+        OAuthButton,
         {
-          id: "authos-password",
-          type: "password",
-          autoComplete: "current-password",
-          value: password,
-          onChange: (e) => setPassword(e.target.value),
-          placeholder: "Enter your password",
-          required: true,
-          disabled: isLoading
-        }
-      )
+          provider,
+          disabled: isLoading || !hasOAuthConfig
+        },
+        provider
+      )),
+      !hasOAuthConfig && /* @__PURE__ */ jsxRuntime.jsx("p", { "data-authos-oauth-warning": "", style: { color: "orange", fontSize: "0.875rem" }, children: "OAuth requires org and service in AuthOSProvider config" })
     ] }),
-    error && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-authos-error": true, children: error }),
-    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", disabled: isLoading, "data-authos-submit": "", children: isLoading ? "Signing in..." : "Sign In" }),
-    showForgotPassword && /* @__PURE__ */ jsxRuntime.jsx("a", { href: "/forgot-password", "data-authos-link": "forgot-password", children: "Forgot password?" }),
-    showSignUp && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-authos-signup-prompt": true, children: [
-      "Don't have an account? ",
-      /* @__PURE__ */ jsxRuntime.jsx("a", { href: "/signup", "data-authos-link": "signup", children: "Sign up" })
+    oauthProviders.length > 0 && showDivider && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-authos-divider": "", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: "or" }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleCredentialsSubmit, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-authos-field": "email", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "authos-email", children: "Email" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            id: "authos-email",
+            type: "email",
+            autoComplete: "email",
+            value: email,
+            onChange: (e) => setEmail(e.target.value),
+            placeholder: "Enter your email",
+            required: true,
+            disabled: isLoading
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-authos-field": "password", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "authos-password", children: "Password" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            id: "authos-password",
+            type: "password",
+            autoComplete: "current-password",
+            value: password,
+            onChange: (e) => setPassword(e.target.value),
+            placeholder: "Enter your password",
+            required: true,
+            disabled: isLoading
+          }
+        )
+      ] }),
+      error && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-authos-error": true, children: error }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", disabled: isLoading, "data-authos-submit": "", children: isLoading ? "Signing in..." : "Sign In" }),
+      showForgotPassword && /* @__PURE__ */ jsxRuntime.jsx("a", { href: "/forgot-password", "data-authos-link": "forgot-password", children: "Forgot password?" }),
+      showSignUp && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-authos-signup-prompt": true, children: [
+        "Don't have an account? ",
+        /* @__PURE__ */ jsxRuntime.jsx("a", { href: "/signup", "data-authos-link": "signup", children: "Sign up" })
+      ] })
     ] })
-  ] }) });
+  ] });
 }
-function SignUp({ onSuccess, onError, orgSlug, showSignIn = true, className }) {
+function SignUp({ onSuccess, onError, orgSlug, serviceSlug, showSignIn = true, className }) {
   const { client } = useAuthOSContext();
   const [email, setEmail] = react.useState("");
   const [password, setPassword] = react.useState("");
@@ -272,7 +352,8 @@ function SignUp({ onSuccess, onError, orgSlug, showSignIn = true, className }) {
         await client.auth.register({
           email,
           password,
-          org_slug: orgSlug
+          org_slug: orgSlug,
+          service_slug: serviceSlug
         });
         setIsSuccess(true);
         onSuccess?.();
@@ -284,7 +365,7 @@ function SignUp({ onSuccess, onError, orgSlug, showSignIn = true, className }) {
         setIsLoading(false);
       }
     },
-    [client, email, password, confirmPassword, orgSlug, onSuccess, onError]
+    [client, email, password, confirmPassword, orgSlug, serviceSlug, onSuccess, onError]
   );
   if (isSuccess) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className, "data-authos-signup": true, "data-state": "success", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-authos-success": true, children: [
@@ -534,6 +615,160 @@ function Protect({ permission, role, fallback = null, children }) {
   };
   return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-authos-protect": true, children: renderContent() });
 }
+function SignedIn({ children }) {
+  const { isAuthenticated, isLoading } = useAuthOSContext();
+  if (isLoading) {
+    return null;
+  }
+  if (!isAuthenticated) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+}
+function SignedOut({ children }) {
+  const { isAuthenticated, isLoading } = useAuthOSContext();
+  if (isLoading) {
+    return null;
+  }
+  if (isAuthenticated) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+}
+function MagicLinkSignIn({
+  onSuccess,
+  onError,
+  className,
+  showPasswordSignIn = true
+}) {
+  const { client } = useAuthOSContext();
+  const [email, setEmail] = react.useState("");
+  const [isLoading, setIsLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const [isSent, setIsSent] = react.useState(false);
+  const handleSubmit = react.useCallback(
+    async (e) => {
+      e.preventDefault();
+      setError(null);
+      setIsLoading(true);
+      try {
+        await client.magicLinks.request({ email });
+        setIsSent(true);
+        onSuccess?.();
+      } catch (err) {
+        const message = err instanceof ssoSdk.SsoApiError ? err.message : "Failed to send magic link";
+        setError(message);
+        onError?.(err instanceof Error ? err : new Error(message));
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [client, email, onSuccess, onError]
+  );
+  if (isSent) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, "data-authos-magic-link": "", "data-state": "sent", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-authos-success": "", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Check your email!" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+          "We sent a login link to ",
+          /* @__PURE__ */ jsxRuntime.jsx("strong", { children: email })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setIsSent(false),
+          "data-authos-back": "",
+          children: "Use a different email"
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, "data-authos-magic-link": "", "data-state": "form", children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-authos-field": "email", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "authos-magic-email", children: "Email" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: "authos-magic-email",
+          type: "email",
+          autoComplete: "email",
+          value: email,
+          onChange: (e) => setEmail(e.target.value),
+          placeholder: "Enter your email",
+          required: true,
+          disabled: isLoading
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-authos-error": "", children: error }),
+    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", disabled: isLoading, "data-authos-submit": "", children: isLoading ? "Sending..." : "Send Magic Link" }),
+    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 PasskeySignIn({
+  onSuccess,
+  onError,
+  className,
+  showPasswordSignIn = true
+}) {
+  const { client, setUser } = useAuthOSContext();
+  const [email, setEmail] = react.useState("");
+  const [isLoading, setIsLoading] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const [isSupported, setIsSupported] = react.useState(true);
+  react.useEffect(() => {
+    setIsSupported(client.passkeys.isSupported());
+  }, [client]);
+  const handleSubmit = react.useCallback(
+    async (e) => {
+      e.preventDefault();
+      setError(null);
+      setIsLoading(true);
+      try {
+        await client.passkeys.login(email);
+        const profile = await client.user.getProfile();
+        setUser(profile);
+        onSuccess?.();
+      } catch (err) {
+        const message = err instanceof ssoSdk.SsoApiError ? err.message : err instanceof Error ? err.message : "Passkey authentication failed";
+        setError(message);
+        onError?.(err instanceof Error ? err : new Error(message));
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [client, email, setUser, onSuccess, onError]
+  );
+  if (!isSupported) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, "data-authos-passkey": "", "data-state": "unsupported", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { "data-authos-error": "", children: "Passkeys are not supported in this browser." }),
+      showPasswordSignIn && /* @__PURE__ */ jsxRuntime.jsx("a", { href: "/signin", "data-authos-link": "signin", children: "Sign in with password" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, "data-authos-passkey": "", children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-authos-field": "email", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "authos-passkey-email", children: "Email" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          id: "authos-passkey-email",
+          type: "email",
+          autoComplete: "email webauthn",
+          value: email,
+          onChange: (e) => setEmail(e.target.value),
+          placeholder: "Enter your email",
+          required: true,
+          disabled: isLoading
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-authos-error": "", children: error }),
+    /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", disabled: isLoading, "data-authos-submit": "", children: isLoading ? "Authenticating..." : "Sign in with Passkey" }),
+    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" }) })
+  ] }) });
+}
 
 Object.defineProperty(exports, "AuthErrorCodes", {
   enumerable: true,
@@ -548,10 +783,15 @@ Object.defineProperty(exports, "SsoClient", {
   get: function () { return ssoSdk.SsoClient; }
 });
 exports.AuthOSProvider = AuthOSProvider;
+exports.MagicLinkSignIn = MagicLinkSignIn;
+exports.OAuthButton = OAuthButton;
 exports.OrganizationSwitcher = OrganizationSwitcher;
+exports.PasskeySignIn = PasskeySignIn;
 exports.Protect = Protect;
 exports.SignIn = SignIn;
 exports.SignUp = SignUp;
+exports.SignedIn = SignedIn;
+exports.SignedOut = SignedOut;
 exports.UserButton = UserButton;
 exports.useAllPermissions = useAllPermissions;
 exports.useAnyPermission = useAnyPermission;