@drmhse/authos-react 0.1.3 → 0.1.5

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { createContext, useRef, useEffect, useState, useCallback, useMemo, useContext } from 'react';
 import { SsoClient, SsoApiError } from '@drmhse/sso-sdk';
 export { AuthErrorCodes, SsoApiError, SsoClient } from '@drmhse/sso-sdk';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/context.tsx
 var AuthOSContext = createContext(null);
@@ -49,6 +49,7 @@ function AuthOSProvider({ config, children, client: externalClient, initialSessi
   const contextValue = useMemo(
     () => ({
       client,
+      config,
       user,
       isAuthenticated: !!user,
       isLoading,
@@ -57,7 +58,7 @@ function AuthOSProvider({ config, children, client: externalClient, initialSessi
       setOrganization,
       refreshUser
     }),
-    [client, user, isLoading, organization, refreshUser]
+    [client, config, user, isLoading, organization, refreshUser]
   );
   return /* @__PURE__ */ jsx(AuthOSContext.Provider, { value: contextValue, children });
 }
@@ -84,8 +85,12 @@ function useOrganization() {
   const { client, organization, setOrganization, refreshUser } = useAuthOSContext();
   const switchOrganization = 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]
@@ -113,15 +118,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 = 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__ */ 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] = useState("credentials");
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
@@ -135,7 +196,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");
@@ -152,7 +218,7 @@ function SignIn({
         setIsLoading(false);
       }
     },
-    [client, email, password, setUser, onSuccess, onError]
+    [client, email, password, config.org, config.service, setUser, onSuccess, onError]
   );
   const handleMfaSubmit = useCallback(
     async (e) => {
@@ -204,49 +270,63 @@ function SignIn({
       /* @__PURE__ */ jsx("button", { type: "button", onClick: handleBackToCredentials, "data-authos-back": "", children: "Back to login" })
     ] }) });
   }
-  return /* @__PURE__ */ jsx("div", { className, "data-authos-signin": "", "data-state": "credentials", children: /* @__PURE__ */ jsxs("form", { onSubmit: handleCredentialsSubmit, children: [
-    /* @__PURE__ */ jsxs("div", { "data-authos-field": "email", children: [
-      /* @__PURE__ */ jsx("label", { htmlFor: "authos-email", children: "Email" }),
-      /* @__PURE__ */ 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__ */ jsxs("div", { "data-authos-field": "password", children: [
-      /* @__PURE__ */ jsx("label", { htmlFor: "authos-password", children: "Password" }),
-      /* @__PURE__ */ jsx(
-        "input",
+  return /* @__PURE__ */ jsxs("div", { className, "data-authos-signin": "", "data-state": "credentials", children: [
+    oauthProviders.length > 0 && /* @__PURE__ */ jsxs("div", { "data-authos-oauth-section": "", children: [
+      oauthProviders.map((provider) => /* @__PURE__ */ 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__ */ jsx("p", { "data-authos-oauth-warning": "", style: { color: "orange", fontSize: "0.875rem" }, children: "OAuth requires org and service in AuthOSProvider config" })
     ] }),
-    error && /* @__PURE__ */ jsx("div", { "data-authos-error": true, children: error }),
-    /* @__PURE__ */ jsx("button", { type: "submit", disabled: isLoading, "data-authos-submit": "", children: isLoading ? "Signing in..." : "Sign In" }),
-    showForgotPassword && /* @__PURE__ */ jsx("a", { href: "/forgot-password", "data-authos-link": "forgot-password", children: "Forgot password?" }),
-    showSignUp && /* @__PURE__ */ jsxs("div", { "data-authos-signup-prompt": true, children: [
-      "Don't have an account? ",
-      /* @__PURE__ */ jsx("a", { href: "/signup", "data-authos-link": "signup", children: "Sign up" })
+    oauthProviders.length > 0 && showDivider && /* @__PURE__ */ jsx("div", { "data-authos-divider": "", children: /* @__PURE__ */ jsx("span", { children: "or" }) }),
+    /* @__PURE__ */ jsxs("form", { onSubmit: handleCredentialsSubmit, children: [
+      /* @__PURE__ */ jsxs("div", { "data-authos-field": "email", children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: "authos-email", children: "Email" }),
+        /* @__PURE__ */ 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__ */ jsxs("div", { "data-authos-field": "password", children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: "authos-password", children: "Password" }),
+        /* @__PURE__ */ 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__ */ jsx("div", { "data-authos-error": true, children: error }),
+      /* @__PURE__ */ jsx("button", { type: "submit", disabled: isLoading, "data-authos-submit": "", children: isLoading ? "Signing in..." : "Sign In" }),
+      showForgotPassword && /* @__PURE__ */ jsx("a", { href: "/forgot-password", "data-authos-link": "forgot-password", children: "Forgot password?" }),
+      showSignUp && /* @__PURE__ */ jsxs("div", { "data-authos-signup-prompt": true, children: [
+        "Don't have an account? ",
+        /* @__PURE__ */ 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] = useState("");
   const [password, setPassword] = useState("");
@@ -271,7 +351,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?.();
@@ -283,7 +364,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__ */ jsx("div", { className, "data-authos-signup": true, "data-state": "success", children: /* @__PURE__ */ jsxs("div", { "data-authos-success": true, children: [
@@ -533,5 +614,159 @@ function Protect({ permission, role, fallback = null, children }) {
   };
   return /* @__PURE__ */ 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__ */ jsx(Fragment, { children });
+}
+function SignedOut({ children }) {
+  const { isAuthenticated, isLoading } = useAuthOSContext();
+  if (isLoading) {
+    return null;
+  }
+  if (isAuthenticated) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function MagicLinkSignIn({
+  onSuccess,
+  onError,
+  className,
+  showPasswordSignIn = true
+}) {
+  const { client } = useAuthOSContext();
+  const [email, setEmail] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [isSent, setIsSent] = useState(false);
+  const handleSubmit = useCallback(
+    async (e) => {
+      e.preventDefault();
+      setError(null);
+      setIsLoading(true);
+      try {
+        await client.magicLinks.request({ email });
+        setIsSent(true);
+        onSuccess?.();
+      } catch (err) {
+        const message = err instanceof 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__ */ jsxs("div", { className, "data-authos-magic-link": "", "data-state": "sent", children: [
+      /* @__PURE__ */ jsxs("div", { "data-authos-success": "", children: [
+        /* @__PURE__ */ jsx("p", { children: "Check your email!" }),
+        /* @__PURE__ */ jsxs("p", { children: [
+          "We sent a login link to ",
+          /* @__PURE__ */ jsx("strong", { children: email })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setIsSent(false),
+          "data-authos-back": "",
+          children: "Use a different email"
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { className, "data-authos-magic-link": "", "data-state": "form", children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsxs("div", { "data-authos-field": "email", children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: "authos-magic-email", children: "Email" }),
+      /* @__PURE__ */ 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__ */ jsx("div", { "data-authos-error": "", children: error }),
+    /* @__PURE__ */ jsx("button", { type: "submit", disabled: isLoading, "data-authos-submit": "", children: isLoading ? "Sending..." : "Send Magic Link" }),
+    showPasswordSignIn && /* @__PURE__ */ jsx("div", { "data-authos-signin-prompt": "", children: /* @__PURE__ */ 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] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [isSupported, setIsSupported] = useState(true);
+  useEffect(() => {
+    setIsSupported(client.passkeys.isSupported());
+  }, [client]);
+  const handleSubmit = 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 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__ */ jsxs("div", { className, "data-authos-passkey": "", "data-state": "unsupported", children: [
+      /* @__PURE__ */ jsx("div", { "data-authos-error": "", children: "Passkeys are not supported in this browser." }),
+      showPasswordSignIn && /* @__PURE__ */ jsx("a", { href: "/signin", "data-authos-link": "signin", children: "Sign in with password" })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { className, "data-authos-passkey": "", children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsxs("div", { "data-authos-field": "email", children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: "authos-passkey-email", children: "Email" }),
+      /* @__PURE__ */ 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__ */ jsx("div", { "data-authos-error": "", children: error }),
+    /* @__PURE__ */ jsx("button", { type: "submit", disabled: isLoading, "data-authos-submit": "", children: isLoading ? "Authenticating..." : "Sign in with Passkey" }),
+    showPasswordSignIn && /* @__PURE__ */ jsx("div", { "data-authos-signin-prompt": "", children: /* @__PURE__ */ jsx("a", { href: "/signin", "data-authos-link": "signin", children: "Sign in with password" }) })
+  ] }) });
+}
 
-export { AuthOSProvider, OrganizationSwitcher, Protect, SignIn, SignUp, UserButton, useAllPermissions, useAnyPermission, useAuthOS, useAuthOSContext, useOrganization, usePermission, useUser };
+export { AuthOSProvider, MagicLinkSignIn, OAuthButton, OrganizationSwitcher, PasskeySignIn, Protect, SignIn, SignUp, SignedIn, SignedOut, UserButton, useAllPermissions, useAnyPermission, useAuthOS, useAuthOSContext, useOrganization, usePermission, useUser };

package/dist/nextjs.d.mts

@@ -226,4 +226,33 @@ declare function createAuthOSClient(options: CreateAuthOSClientOptions): SsoClie
  */
 declare function createServerClient(token: string, baseURL: string): SsoClient;
 
-export { type AuthMiddlewareConfig, type AuthState, type AuthUser, type CreateAuthOSClientOptions, auth, authMiddleware, createAuthOSClient, createServerClient, currentUser, getToken };
+/**
+ * Utility functions for Next.js integration
+ */
+/**
+ * Construct the JWKS URL from a base URL.
+ *
+ * This helper simplifies middleware configuration by deriving the JWKS URL
+ * from the same base URL used in your client-side configuration.
+ *
+ * @param baseURL - The base URL of your AuthOS instance
+ * @returns The full JWKS URL
+ *
+ * @example
+ * ```ts
+ * // middleware.ts
+ * import { getJwksUrl, authMiddleware } from '@drmhse/authos-react/nextjs';
+ *
+ * export default authMiddleware({
+ *   jwksUrl: getJwksUrl(process.env.NEXT_PUBLIC_AUTHOS_URL!),
+ *   protectedRoutes: ['/dashboard/*'],
+ * });
+ * ```
+ */
+declare function getJwksUrl(baseURL: string): string;
+/**
+ * Get the base URL without trailing slash
+ */
+declare function normalizeBaseUrl(baseURL: string): string;
+
+export { type AuthMiddlewareConfig, type AuthState, type AuthUser, type CreateAuthOSClientOptions, auth, authMiddleware, createAuthOSClient, createServerClient, currentUser, getJwksUrl, getToken, normalizeBaseUrl };

package/dist/nextjs.d.ts

@@ -226,4 +226,33 @@ declare function createAuthOSClient(options: CreateAuthOSClientOptions): SsoClie
  */
 declare function createServerClient(token: string, baseURL: string): SsoClient;
 
-export { type AuthMiddlewareConfig, type AuthState, type AuthUser, type CreateAuthOSClientOptions, auth, authMiddleware, createAuthOSClient, createServerClient, currentUser, getToken };
+/**
+ * Utility functions for Next.js integration
+ */
+/**
+ * Construct the JWKS URL from a base URL.
+ *
+ * This helper simplifies middleware configuration by deriving the JWKS URL
+ * from the same base URL used in your client-side configuration.
+ *
+ * @param baseURL - The base URL of your AuthOS instance
+ * @returns The full JWKS URL
+ *
+ * @example
+ * ```ts
+ * // middleware.ts
+ * import { getJwksUrl, authMiddleware } from '@drmhse/authos-react/nextjs';
+ *
+ * export default authMiddleware({
+ *   jwksUrl: getJwksUrl(process.env.NEXT_PUBLIC_AUTHOS_URL!),
+ *   protectedRoutes: ['/dashboard/*'],
+ * });
+ * ```
+ */
+declare function getJwksUrl(baseURL: string): string;
+/**
+ * Get the base URL without trailing slash
+ */
+declare function normalizeBaseUrl(baseURL: string): string;
+
+export { type AuthMiddlewareConfig, type AuthState, type AuthUser, type CreateAuthOSClientOptions, auth, authMiddleware, createAuthOSClient, createServerClient, currentUser, getJwksUrl, getToken, normalizeBaseUrl };

package/dist/nextjs.js

@@ -5903,9 +5903,20 @@ function createServerClient(token, baseURL) {
   });
 }
 
+// src/nextjs/utils.ts
+function getJwksUrl(baseURL) {
+  const base = baseURL.endsWith("/") ? baseURL.slice(0, -1) : baseURL;
+  return `${base}/.well-known/jwks.json`;
+}
+function normalizeBaseUrl(baseURL) {
+  return baseURL.endsWith("/") ? baseURL.slice(0, -1) : baseURL;
+}
+
 exports.auth = auth;
 exports.authMiddleware = authMiddleware;
 exports.createAuthOSClient = createAuthOSClient;
 exports.createServerClient = createServerClient;
 exports.currentUser = currentUser;
+exports.getJwksUrl = getJwksUrl;
 exports.getToken = getToken;
+exports.normalizeBaseUrl = normalizeBaseUrl;

package/dist/nextjs.mjs

@@ -5901,4 +5901,13 @@ function createServerClient(token, baseURL) {
   });
 }
 
-export { auth, authMiddleware, createAuthOSClient, createServerClient, currentUser, getToken };
+// src/nextjs/utils.ts
+function getJwksUrl(baseURL) {
+  const base = baseURL.endsWith("/") ? baseURL.slice(0, -1) : baseURL;
+  return `${base}/.well-known/jwks.json`;
+}
+function normalizeBaseUrl(baseURL) {
+  return baseURL.endsWith("/") ? baseURL.slice(0, -1) : baseURL;
+}
+
+export { auth, authMiddleware, createAuthOSClient, createServerClient, currentUser, getJwksUrl, getToken, normalizeBaseUrl };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drmhse/authos-react",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "React and Next.js adapter for AuthOS authentication",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -68,6 +68,6 @@
     "access": "public"
   },
   "dependencies": {
-    "@drmhse/sso-sdk": "^0.3.4"
+    "@drmhse/sso-sdk": "^0.3.10"
   }
 }