@authara/react 0.1.0 → 0.2.0

package/README.md

@@ -1,6 +1,6 @@
 # @authara/react
 
-Official React buttons for complete Authara Google and Apple authentication
+Official React buttons for complete Authara Google, Apple, and Microsoft authentication
 flows. The components load the provider SDK, obtain the provider proof, prepare
 CSRF, call the generated Authara browser client, and return a typed result.
 
@@ -32,12 +32,12 @@ export function App() {
 ```
 
 The provider owns no user or session state. It coordinates Authara's generated
-client and the page-global Google and Apple SDKs.
+client and the external-provider SDKs.
 
 ## Login
 
 ```tsx
-import { AppleButton, GoogleButton } from "@authara/react";
+import { AppleButton, GoogleButton, MicrosoftButton } from "@authara/react";
 
 export function Login() {
   return (
@@ -60,6 +60,16 @@ export function Login() {
         onError={handleAuthError}
         onCancel={() => setMessage("Sign in was cancelled.")}
       />
+
+      <MicrosoftButton
+        action="login"
+        audience="app"
+        variant="text"
+        size="large"
+        onSuccess={({ session }) => setCurrentUser(session.user)}
+        onError={handleAuthError}
+        onCancel={() => setMessage("Sign in was cancelled.")}
+      />
     </div>
   );
 }
@@ -82,6 +92,12 @@ default action is `login` and the default audience is `app`.
   onSuccess={() => refreshAccount()}
   onError={handleAuthError}
 />
+
+<MicrosoftButton
+  action="link"
+  onSuccess={() => refreshAccount()}
+  onError={handleAuthError}
+/>
 ```
 
 Linking uses the current Authara session and therefore does not accept an
@@ -97,6 +113,13 @@ needs a fresh proof.
   onSuccess={() => retrySensitiveAction()}
   onError={handleAuthError}
 />
+
+<MicrosoftButton
+  action="reauthenticate"
+  authenticationChallengeId={challenge.id}
+  onSuccess={() => retrySensitiveAction()}
+  onError={handleAuthError}
+/>
 ```
 
 TypeScript requires `authenticationChallengeId` for reauthentication and
@@ -125,28 +148,43 @@ function handleLoginError(error: AutharaButtonError) {
   showMessage(error.message);
 }
 
-{recovery?.proof_methods.includes("google") && (
-  <GoogleButton
-    action="recover"
-    recoveryLinkId={recovery.link_id}
-    onSuccess={({ session }) => setCurrentUser(session.user)}
-    onError={handleLoginError}
-  />
-)}
-
-{recovery?.proof_methods.includes("apple") && (
-  <AppleButton
-    action="recover"
-    recoveryLinkId={recovery.link_id}
-    onSuccess={({ session }) => setCurrentUser(session.user)}
-    onError={handleLoginError}
-  />
-)}
+{
+  recovery?.proof_methods.includes("google") && (
+    <GoogleButton
+      action="recover"
+      recoveryLinkId={recovery.link_id}
+      onSuccess={({ session }) => setCurrentUser(session.user)}
+      onError={handleLoginError}
+    />
+  );
+}
+
+{
+  recovery?.proof_methods.includes("apple") && (
+    <AppleButton
+      action="recover"
+      recoveryLinkId={recovery.link_id}
+      onSuccess={({ session }) => setCurrentUser(session.user)}
+      onError={handleLoginError}
+    />
+  );
+}
+
+{
+  recovery?.proof_methods.includes("microsoft") && (
+    <MicrosoftButton
+      action="recover"
+      recoveryLinkId={recovery.link_id}
+      onSuccess={({ session }) => setCurrentUser(session.user)}
+      onError={handleLoginError}
+    />
+  );
+}
 ```
 
-This is symmetric: an Apple collision can be proved with an existing Google
-identity, and a Google collision can be proved with an existing Apple identity.
-Authara never links accounts from an email match alone.
+The flow is symmetric across external providers: a collision can be proved
+with any existing Google, Apple, or Microsoft identity returned in
+`proof_methods`. Authara never links accounts from an email match alone.
 
 ## Errors
 
@@ -196,12 +234,12 @@ unions are generated from Core's `x-authara-error-codes` declarations:
 - every action includes its declared authorization, request, availability, and
   internal codes, plus the local CSRF and unknown-code fallbacks
 
-Apple popup cancellation calls `onCancel`, not `onError`. A provider disabled
+Apple and Microsoft popup cancellation calls `onCancel`, not `onError`. A provider disabled
 in Authara renders `fallback` and calls `onUnavailable`.
 
 ## Appearance
 
-Both components share the simple properties:
+All three components share the simple properties:
 
 ```tsx
 <AppleButton
@@ -216,6 +254,8 @@ Both components share the simple properties:
   size="large"
   mode="system"
 />
+
+<MicrosoftButton action="login" variant="text" size="large" mode="system" />
 ```
 
 - `variant`: `text` or `icon`
@@ -235,12 +275,13 @@ precedence over these defaults.
 Google additionally exposes `theme`, `border`, `shape`, `logoAlignment`, and
 `width`.
 Apple exposes `color`, `border`, `borderRadius`, `align`, and `width`.
-Both providers accept `buttonText` to localize or otherwise override the
+Microsoft exposes `border`, `align`, and `width`. All providers accept
+`buttonText` to localize or otherwise override the
 visible label and the accessible name of icon-only buttons.
 Text and icon variants both default to a `12px` corner radius. Apple's
 `borderRadius` accepts its supported `0`–`50` range; Google's `shape` can still
 select `pill`, `circle`, `square`, or `rectangular` explicitly.
-Both providers use an Authara-rendered, centered logo-and-label structure.
+All providers use an Authara-rendered, centered logo-and-label structure.
 Google's `light`, `dark`, and `neutral` themes use Google's required colors,
 spacing, and typography. Make Google Sans Medium available in your application
 as required by Google's branding guidelines; this package does not inject a
@@ -257,15 +298,16 @@ components:
 ```tsx
 <GoogleCredentialButton onCredential={handleGoogleProof} />
 <AppleCredentialButton onAuthorization={handleAppleProof} />
+<MicrosoftCredentialButton onCredential={handleMicrosoftProof} />
 ```
 
-Most applications should use `GoogleButton` and `AppleButton`; the lower-level
-components deliberately expose Google's one-time code and browser origin or
-Apple's code and state.
+Most applications should use `GoogleButton`, `AppleButton`, and
+`MicrosoftButton`; the lower-level components deliberately expose the
+short-lived provider proofs used by Core.
 
 ## Real local playground
 
-The Vite playground uses the real Google and Apple scripts and sends real HTTP
+The Vite playground uses the real Google, Apple, and Microsoft SDKs and sends real HTTP
 requests to Authara. It has no provider or API mocks.
 
 For fast component development, start an Authara gateway with Google and/or
@@ -281,6 +323,11 @@ Core reads Google configuration from `AUTHARA_OAUTH_GOOGLE_CLIENT_ID` and
 receives it. Apple uses `AUTHARA_OAUTH_APPLE_CLIENT_ID`, `AUTHARA_OAUTH_APPLE_TEAM_ID`,
 `AUTHARA_OAUTH_APPLE_KEY_ID`, `AUTHARA_OAUTH_APPLE_PRIVATE_KEY_BASE64`, and the
 Apple token-key settings documented by Authara Core.
+Microsoft uses `AUTHARA_OAUTH_MICROSOFT_CLIENT_ID` and
+`AUTHARA_OAUTH_MICROSOFT_TENANT_ID`; the browser obtains its authority and
+one-time nonce from Core. Register the exact SPA redirect URI
+`https://your-domain/auth/oauth/microsoft/redirect` in Microsoft Entra; Core
+serves the MSAL redirect bridge at that path.
 
 By default, Vite proxies `/auth` to `http://localhost:3001`. Override the Core
 or gateway address when needed:
@@ -321,8 +368,8 @@ The Cloudflare route for `playground.authara.org` must use
 Compose network. Open `https://playground.authara.org`; `http://localhost:3000`
 remains available for direct local debugging.
 
-After configuring Google and Apple, fill their values in `.env` and set
-`AUTHARA_OAUTH_PROVIDERS=google,apple`. Until then, leave the provider list
+After configuring the providers, fill their values in `.env` and set
+`AUTHARA_OAUTH_PROVIDERS=google,apple,microsoft`. Until then, leave the provider list
 empty; the playground displays the disabled-provider fallbacks instead of
 attempting OAuth. Never commit `.env` or the tunnel token.
 
@@ -331,18 +378,21 @@ for this React contract; override `AUTHARA_CORE_VERSION` and
 `AUTHARA_MIGRATIONS_VERSION` only when deliberately testing another released
 pair.
 
-For the Compose deployment, configure both providers with the public origin
+For the Compose deployment, configure all providers with the public origin
 `https://playground.authara.org`. The Google redirect URI is
 `https://playground.authara.org/auth/oauth/google/callback`; the Apple domain is
 `playground.authara.org` and its return URL is
 `https://playground.authara.org/auth/oauth/apple/callback`.
+Register
+`https://playground.authara.org/auth/oauth/microsoft/redirect` as the Microsoft
+SPA redirect URI.
 
 The playground covers:
 
 - real login for `app`, `admin`, and `operator`
-- linking Google or Apple to the current account
-- signed-out Google-to-Apple and Apple-to-Google account-collision recovery
-- Google or Apple reauthentication with a challenge UUID
+- linking Google, Apple, or Microsoft to the current account
+- signed-out cross-provider account-collision recovery
+- Google, Apple, or Microsoft reauthentication with a challenge UUID
 - text and icon variants in all three sizes
 - disabled-provider fallbacks, cancellation, and structured errors
 - current-session inspection without displaying access or refresh tokens
@@ -352,8 +402,8 @@ returns success without a challenge; an old session returns HTTP 428 and the
 playground fills the challenge UUID automatically.
 
 To rehearse account-collision recovery, use “Sign out,” select “Recover account
-collision,” and attempt normal Google or Apple login with an email already
-owned by the other provider. Authara's `409 account_link_required` response
+collision,” and attempt a normal external-provider login with an email already
+owned by another method. Authara's `409 account_link_required` response
 already contains the pending link, so the playground immediately renders the
 available existing-account proof buttons. It creates and consumes Core's real
 ten-minute `link_id`; it does not simulate either provider response.
@@ -373,10 +423,10 @@ error union deliberately requires human review so component mechanics and the
 documented application handling can be updated when necessary.
 
 Provider operations are discovered from Core's `get…LoginOptions` operations,
-so Microsoft error declarations will enter the generated unions automatically.
-A Microsoft button still needs its provider-SDK adapter and branded component;
-it can use the same `login`, `link`, `reauthenticate`, and `recover` action
-contract without a separate collision design.
+so Microsoft error declarations enter the generated unions automatically. The
+Microsoft client methods are optional locally so this package still accepts the
+currently released Browser client and renders `fallback`; they become active
+when Browser is regenerated from the Microsoft-enabled Core OpenAPI contract.
 
 ## License
 

package/dist/MicrosoftButton.d.ts

@@ -0,0 +1,27 @@
+import { type ComponentPropsWithoutRef, type CSSProperties, type ReactNode } from "react";
+import { type AutharaActionProps, type MaybePromise } from "./contract.js";
+import type { MicrosoftCredential } from "./services.js";
+import { type AutharaColorMode } from "./color-mode.js";
+export type MicrosoftButtonVariant = "icon" | "text";
+export type MicrosoftButtonLabel = "continue" | "sign-in" | "sign-up";
+export interface MicrosoftCredentialButtonProps extends Omit<ComponentPropsWithoutRef<"button">, "children" | "onError" | "size" | "type"> {
+    disabled?: boolean;
+    variant?: MicrosoftButtonVariant;
+    size?: "small" | "medium" | "large";
+    label?: MicrosoftButtonLabel;
+    buttonText?: string;
+    align?: "center" | "left";
+    mode?: AutharaColorMode;
+    border?: boolean;
+    width?: CSSProperties["width"];
+    fallback?: ReactNode;
+    onCredential: (credential: MicrosoftCredential) => MaybePromise<void>;
+    onCancel?: () => void;
+    onError?: (error: Error) => void;
+    onUnavailable?: () => void;
+}
+export declare function MicrosoftCredentialButton({ disabled, variant, size, label, buttonText, align, mode, border, width, fallback, onCredential, onCancel, onError, onUnavailable, style, onClick, ...buttonProps }: MicrosoftCredentialButtonProps): React.JSX.Element | null;
+type MicrosoftButtonVisualProps = Omit<MicrosoftCredentialButtonProps, "onCredential" | "onError">;
+export type MicrosoftButtonProps = MicrosoftButtonVisualProps & AutharaActionProps<"microsoft">;
+export declare function MicrosoftButton(props: MicrosoftButtonProps): React.JSX.Element | null;
+export {};

package/dist/MicrosoftButton.js

@@ -0,0 +1,157 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState, } from "react";
+import { resolveAction, runMicrosoftAction } from "./actions.js";
+import { useAutharaServices } from "./context.js";
+import { isMicrosoftCancellation, isProviderUnavailable, toAutharaButtonError, toError, } from "./errors.js";
+import { useResolvedAutharaColorMode, } from "./color-mode.js";
+const textButtonHeights = { small: 30, medium: 36, large: 44 };
+const iconButtonSizes = { small: 36, medium: 44, large: 52 };
+function buttonLabel(label) {
+    switch (label) {
+        case "sign-in":
+            return "Sign in with Microsoft";
+        case "sign-up":
+            return "Sign up with Microsoft";
+        case "continue":
+            return "Continue with Microsoft";
+    }
+}
+function MicrosoftLogo() {
+    return (_jsxs("span", { "aria-hidden": "true", style: {
+            display: "grid",
+            width: 18,
+            height: 18,
+            flex: "0 0 18px",
+            gridTemplateColumns: "repeat(2, 1fr)",
+            gridTemplateRows: "repeat(2, 1fr)",
+            gap: 1,
+        }, children: [_jsx("span", { style: { background: "#f25022" } }), _jsx("span", { style: { background: "#7fba00" } }), _jsx("span", { style: { background: "#00a4ef" } }), _jsx("span", { style: { background: "#ffb900" } })] }));
+}
+export function MicrosoftCredentialButton({ disabled = false, variant = "text", size = "large", label = "continue", buttonText, align = "center", mode = "light", border = true, width, fallback = null, onCredential, onCancel, onError, onUnavailable, style, onClick, ...buttonProps }) {
+    const { microsoft } = useAutharaServices();
+    const credentialRef = useRef(onCredential);
+    const cancelRef = useRef(onCancel);
+    const errorRef = useRef(onError);
+    const unavailableRef = useRef(onUnavailable);
+    const [available, setAvailable] = useState(true);
+    const [ready, setReady] = useState(false);
+    const [busy, setBusy] = useState(false);
+    const resolvedMode = useResolvedAutharaColorMode(mode);
+    credentialRef.current = onCredential;
+    cancelRef.current = onCancel;
+    errorRef.current = onError;
+    unavailableRef.current = onUnavailable;
+    useEffect(() => {
+        let active = true;
+        void microsoft
+            .prepare()
+            .then(() => {
+            if (active)
+                setReady(true);
+        })
+            .catch((error) => {
+            if (!active)
+                return;
+            if (isProviderUnavailable(error)) {
+                setAvailable(false);
+                unavailableRef.current?.();
+                return;
+            }
+            errorRef.current?.(toError(error, "Microsoft authentication is unavailable."));
+        });
+        return () => {
+            active = false;
+        };
+    }, [microsoft]);
+    if (!available)
+        return _jsx(_Fragment, { children: fallback });
+    const iconOnly = variant === "icon";
+    const height = iconOnly ? iconButtonSizes[size] : textButtonHeights[size];
+    const text = buttonText ?? buttonLabel(label);
+    const inactive = disabled || busy;
+    const dark = resolvedMode === "dark";
+    return (_jsxs("button", { ...buttonProps, type: "button", disabled: !ready || inactive, "aria-busy": busy || undefined, "aria-label": iconOnly ? text : buttonProps["aria-label"], "data-authara-provider": "microsoft", "data-authara-ready": ready ? "true" : "false", onClick: (event) => {
+            onClick?.(event);
+            if (event.defaultPrevented || !ready || inactive)
+                return;
+            setReady(false);
+            setBusy(true);
+            const authorization = microsoft.authorize();
+            void authorization
+                .then((proof) => credentialRef.current(proof))
+                .catch((error) => {
+                if (isMicrosoftCancellation(error)) {
+                    cancelRef.current?.();
+                    return;
+                }
+                errorRef.current?.(toError(error, "Microsoft authentication failed."));
+            })
+                .finally(() => {
+                setBusy(false);
+                void microsoft
+                    .prepare()
+                    .then(() => setReady(true))
+                    .catch((error) => {
+                    errorRef.current?.(toError(error, "Microsoft authentication is unavailable."));
+                });
+            });
+        }, style: {
+            position: "relative",
+            display: "inline-flex",
+            width: width ?? (iconOnly ? height : "100%"),
+            height,
+            alignItems: "center",
+            justifyContent: "center",
+            gap: iconOnly || align === "left" ? 0 : 10,
+            padding: iconOnly ? 0 : "0 12px",
+            border: "1px solid",
+            borderColor: border ? (dark ? "#8e918f" : "#8c8c8c") : "transparent",
+            borderRadius: 12,
+            boxSizing: "border-box",
+            background: dark ? "#2f2f2f" : "#fff",
+            color: dark ? "#fff" : "#1f1f1f",
+            cursor: !ready ? "wait" : inactive ? "not-allowed" : "pointer",
+            fontFamily: '"Segoe UI", Arial, sans-serif',
+            fontSize: 14,
+            fontWeight: 600,
+            lineHeight: "20px",
+            opacity: inactive ? 0.62 : 1,
+            outlineOffset: 2,
+            transition: "opacity 150ms ease",
+            whiteSpace: "nowrap",
+            verticalAlign: "middle",
+            WebkitTapHighlightColor: "transparent",
+            ...style,
+        }, children: [_jsx("span", { style: {
+                    display: "inline-flex",
+                    position: !iconOnly && align === "left" ? "absolute" : "static",
+                    left: !iconOnly && align === "left" ? 12 : undefined,
+                }, children: _jsx(MicrosoftLogo, {}) }), !iconOnly && _jsx("span", { children: text })] }));
+}
+export function MicrosoftButton(props) {
+    const { client } = useAutharaServices();
+    const internal = props;
+    const { action = "login", audience, authenticationChallengeId, recoveryLinkId, onSuccess, onError, label = action === "login" ? "sign-in" : "continue", ...buttonProps } = internal;
+    return (_jsx(MicrosoftCredentialButton, { ...buttonProps, label: label, onCredential: async (proof) => {
+            let selected;
+            try {
+                selected = resolveAction(action, audience, authenticationChallengeId, recoveryLinkId);
+            }
+            catch (error) {
+                throw toAutharaButtonError(error, "The Microsoft button action is not configured correctly.", "configuration");
+            }
+            let result;
+            try {
+                result = await runMicrosoftAction(client, selected, proof);
+            }
+            catch (error) {
+                throw toAutharaButtonError(error, `Microsoft ${action} failed.`, "authara");
+            }
+            try {
+                await onSuccess?.(result);
+            }
+            catch (error) {
+                throw toAutharaButtonError(error, "The Microsoft success callback failed.", "consumer");
+            }
+        }, onError: (error) => onError?.(toAutharaButtonError(error, "Microsoft authentication failed.", "provider")) }));
+}

package/dist/actions.d.ts

@@ -1,4 +1,4 @@
-import type { AppleProof, AutharaAction, AutharaActionSuccess, AutharaAudience, AutharaReactClient, GoogleProof } from "./contract.js";
+import type { AppleProof, AutharaAction, AutharaActionSuccess, AutharaAudience, AutharaReactClient, GoogleProof, MicrosoftProof } from "./contract.js";
 export type ResolvedAutharaAction = {
     action: "login";
     audience: AutharaAudience;
@@ -14,4 +14,5 @@ export type ResolvedAutharaAction = {
 };
 export declare function runGoogleAction(client: AutharaReactClient, selected: ResolvedAutharaAction, proof: GoogleProof): Promise<AutharaActionSuccess<"google">>;
 export declare function runAppleAction(client: AutharaReactClient, selected: ResolvedAutharaAction, proof: AppleProof): Promise<AutharaActionSuccess<"apple">>;
+export declare function runMicrosoftAction(client: AutharaReactClient, selected: ResolvedAutharaAction, proof: MicrosoftProof): Promise<AutharaActionSuccess<"microsoft">>;
 export declare function resolveAction(action: AutharaAction | undefined, audience: AutharaAudience | undefined, authenticationChallengeId: string | undefined, recoveryLinkId: string | undefined): ResolvedAutharaAction;

package/dist/actions.js

@@ -69,6 +69,55 @@ export async function runAppleAction(client, selected, proof) {
             };
     }
 }
+export async function runMicrosoftAction(client, selected, proof) {
+    await client.getCsrfToken();
+    switch (selected.action) {
+        case "login":
+            if (!client.loginWithMicrosoft)
+                throw microsoftClientUnavailable();
+            return {
+                action: "login",
+                provider: "microsoft",
+                session: await client.loginWithMicrosoft({
+                    audience: selected.audience,
+                    body: proof,
+                }),
+            };
+        case "link":
+            if (!client.linkCurrentUserMicrosoft)
+                throw microsoftClientUnavailable();
+            await client.linkCurrentUserMicrosoft({ body: proof });
+            return { action: "link", provider: "microsoft" };
+        case "reauthenticate":
+            if (!client.reauthenticateWithMicrosoft)
+                throw microsoftClientUnavailable();
+            await client.reauthenticateWithMicrosoft({
+                body: {
+                    ...proof,
+                    authentication_challenge_id: selected.authenticationChallengeId,
+                },
+            });
+            return { action: "reauthenticate", provider: "microsoft" };
+        case "recover":
+            if (!client.completeAccountRecoveryLinkWithMicrosoft)
+                throw microsoftClientUnavailable();
+            return {
+                action: "recover",
+                provider: "microsoft",
+                session: await client.completeAccountRecoveryLinkWithMicrosoft({
+                    linkID: selected.recoveryLinkId,
+                    audience: selected.audience,
+                    body: proof,
+                }),
+            };
+    }
+}
+function microsoftClientUnavailable() {
+    return {
+        status: 404,
+        message: "This @authara/browser client does not include Microsoft authentication.",
+    };
+}
 export function resolveAction(action, audience, authenticationChallengeId, recoveryLinkId) {
     if (action === "link")
         return { action };

package/dist/context.d.ts

@@ -1,17 +1,17 @@
 import { type PropsWithChildren } from "react";
 import type { AutharaReactClient } from "./contract.js";
-import { AppleService, GoogleService } from "./services.js";
+import { AppleService, GoogleService, MicrosoftService } from "./services.js";
 type AutharaReactContextValue = {
     apple: AppleService;
     client: AutharaReactClient;
     google: GoogleService;
+    microsoft: MicrosoftService;
 };
 export type AutharaProviderProps = PropsWithChildren<{
     client: AutharaReactClient;
 }>;
 /**
- * Owns the page-wide Google and Apple SDK configuration. Use one provider per
- * document so Google Identity Services is initialized only once.
+ * Owns the page-wide external-provider SDK configuration.
  */
 export declare function AutharaProvider({ client, children, }: AutharaProviderProps): React.JSX.Element;
 export declare function useAutharaServices(): AutharaReactContextValue;

package/dist/context.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useMemo, } from "react";
-import { AppleService, GoogleService } from "./services.js";
+import { AppleService, GoogleService, MicrosoftService } from "./services.js";
 const AutharaContext = createContext(null);
 /**
- * Owns the page-wide Google and Apple SDK configuration. Use one provider per
- * document so Google Identity Services is initialized only once.
+ * Owns the page-wide external-provider SDK configuration.
  */
 export function AutharaProvider({ client, children, }) {
     const value = useMemo(() => ({
         apple: new AppleService(client),
         client,
         google: new GoogleService(client),
+        microsoft: new MicrosoftService(client),
     }), [client]);
     return (_jsx(AutharaContext.Provider, { value: value, children: children }));
 }

package/dist/contract.d.ts

@@ -2,9 +2,10 @@ import type { AccountRecoveryLink as BrowserAccountRecoveryLink, AuthSession } f
 import type { AutharaButtonError, AutharaLinkErrorCode, AutharaLoginErrorCode, AutharaRecoveryErrorCode, AutharaReauthenticationErrorCode } from "./errors.js";
 export type AutharaAudience = "app" | "admin" | "operator";
 export type AutharaAction = "login" | "link" | "reauthenticate" | "recover";
-export type AutharaProviderName = "apple" | "google";
-export type AutharaAccountRecoveryLink = BrowserAccountRecoveryLink & {
+export type AutharaProviderName = "apple" | "google" | "microsoft";
+export type AutharaAccountRecoveryLink = Omit<BrowserAccountRecoveryLink, "provider" | "proof_methods"> & {
     provider: AutharaProviderName;
+    proof_methods: Array<"password" | AutharaProviderName>;
 };
 export interface GoogleLoginOptions {
     client_id: string;
@@ -16,6 +17,11 @@ export interface AppleLoginOptions {
     state: string;
     nonce: string;
 }
+export interface MicrosoftLoginOptions {
+    client_id: string;
+    authority: string;
+    nonce: string;
+}
 export type GoogleProof = {
     code: string;
     redirect_uri: string;
@@ -24,10 +30,14 @@ export type AppleProof = {
     code: string;
     state: string;
 };
+export type MicrosoftProof = {
+    credential: string;
+    nonce: string;
+};
 /**
  * The generated @authara/browser contract slice used by the React components.
- * AutharaBrowserClient satisfies this interface once both providers are
- * available in the released Core contract.
+ * AutharaBrowserClient satisfies the required provider methods from the
+ * released Core contract. Microsoft remains optional during SDK rollout.
  */
 export interface AutharaReactClient {
     getCsrfToken(): Promise<unknown>;
@@ -67,6 +77,24 @@ export interface AutharaReactClient {
         audience?: "app";
         body: AppleProof;
     }): Promise<AuthSession>;
+    getMicrosoftLoginOptions?(): Promise<MicrosoftLoginOptions>;
+    loginWithMicrosoft?(options: {
+        audience?: AutharaAudience;
+        body: MicrosoftProof;
+    }): Promise<AuthSession>;
+    linkCurrentUserMicrosoft?(options: {
+        body: MicrosoftProof;
+    }): Promise<void>;
+    reauthenticateWithMicrosoft?(options: {
+        body: MicrosoftProof & {
+            authentication_challenge_id: string;
+        };
+    }): Promise<void>;
+    completeAccountRecoveryLinkWithMicrosoft?(options: {
+        linkID: AutharaAccountRecoveryLink["link_id"];
+        audience?: "app";
+        body: MicrosoftProof;
+    }): Promise<AuthSession>;
 }
 export type AutharaLoginSuccess<P extends AutharaProviderName> = {
     action: "login";

package/dist/errors.d.ts

@@ -34,3 +34,4 @@ export declare class AutharaButtonError<Code extends string = AutharaButtonError
 export declare function toAutharaButtonError(error: unknown, fallback: string, defaultSource: AutharaButtonErrorSource): AutharaButtonError;
 export declare function isAutharaButtonError(error: unknown): error is AutharaButtonError;
 export declare function isAppleCancellation(error: unknown): boolean;
+export declare function isMicrosoftCancellation(error: unknown): boolean;

package/dist/errors.js

@@ -119,3 +119,11 @@ export function isAppleCancellation(error) {
     return (error.error === "user_cancelled_authorize" ||
         error.error === "popup_closed_by_user");
 }
+export function isMicrosoftCancellation(error) {
+    if (typeof error !== "object" || error === null || !("errorCode" in error)) {
+        return false;
+    }
+    return (error.errorCode === "user_cancelled" ||
+        error.errorCode === "popup_window_error" ||
+        error.errorCode === "empty_window_error");
+}

package/dist/index.d.ts

@@ -1,8 +1,9 @@
 export { AppleButton, AppleCredentialButton, type AppleButtonLabel, type AppleButtonProps, type AppleButtonVariant, type AppleCredentialButtonProps, } from "./AppleButton.js";
 export { GoogleButton, GoogleCredentialButton, type GoogleButtonLabel, type GoogleButtonProps, type GoogleButtonVariant, type GoogleCredentialButtonProps, } from "./GoogleButton.js";
+export { MicrosoftButton, MicrosoftCredentialButton, type MicrosoftButtonLabel, type MicrosoftButtonProps, type MicrosoftButtonVariant, type MicrosoftCredentialButtonProps, } from "./MicrosoftButton.js";
 export { AutharaProvider, type AutharaProviderProps } from "./context.js";
 export type { AutharaColorMode, ResolvedAutharaColorMode, } from "./color-mode.js";
 export { autharaActionErrorCodes, type AutharaContractAction, type AutharaContractErrorCode, } from "./generated-error-codes.js";
-export type { AppleLoginOptions, AppleProof, AutharaAction, AutharaAccountRecoveryLink, AutharaActionProps, AutharaActionSuccess, AutharaAudience, AutharaLinkSuccess, AutharaLoginSuccess, AutharaProviderName, AutharaRecoverySuccess, AutharaReauthenticationSuccess, AutharaReactClient, GoogleProof, GoogleLoginOptions, MaybePromise, } from "./contract.js";
-export { AutharaButtonError, isAppleCancellation, isAutharaButtonError, isProviderUnavailable, type AutharaAuthenticationChallenge, type AutharaButtonErrorCode, type AutharaButtonErrorSource, type AutharaLocalErrorCode, type AutharaLinkErrorCode, type AutharaLoginErrorCode, type AutharaRecoveryErrorCode, type AutharaReauthenticationErrorCode, } from "./errors.js";
-export type { AppleAuthorization, GoogleCredential } from "./services.js";
+export type { AppleLoginOptions, AppleProof, AutharaAction, AutharaAccountRecoveryLink, AutharaActionProps, AutharaActionSuccess, AutharaAudience, AutharaLinkSuccess, AutharaLoginSuccess, AutharaProviderName, AutharaRecoverySuccess, AutharaReauthenticationSuccess, AutharaReactClient, GoogleProof, GoogleLoginOptions, MicrosoftLoginOptions, MicrosoftProof, MaybePromise, } from "./contract.js";
+export { AutharaButtonError, isAppleCancellation, isMicrosoftCancellation, isAutharaButtonError, isProviderUnavailable, type AutharaAuthenticationChallenge, type AutharaButtonErrorCode, type AutharaButtonErrorSource, type AutharaLocalErrorCode, type AutharaLinkErrorCode, type AutharaLoginErrorCode, type AutharaRecoveryErrorCode, type AutharaReauthenticationErrorCode, } from "./errors.js";
+export type { AppleAuthorization, GoogleCredential, MicrosoftCredential, } from "./services.js";

package/dist/index.js

@@ -1,5 +1,6 @@
 export { AppleButton, AppleCredentialButton, } from "./AppleButton.js";
 export { GoogleButton, GoogleCredentialButton, } from "./GoogleButton.js";
+export { MicrosoftButton, MicrosoftCredentialButton, } from "./MicrosoftButton.js";
 export { AutharaProvider } from "./context.js";
 export { autharaActionErrorCodes, } from "./generated-error-codes.js";
-export { AutharaButtonError, isAppleCancellation, isAutharaButtonError, isProviderUnavailable, } from "./errors.js";
+export { AutharaButtonError, isAppleCancellation, isMicrosoftCancellation, isAutharaButtonError, isProviderUnavailable, } from "./errors.js";

package/dist/services.d.ts

@@ -7,6 +7,10 @@ export type AppleAuthorization = {
     code: string;
     state: string;
 };
+export type MicrosoftCredential = {
+    credential: string;
+    nonce: string;
+};
 type GoogleHandler = (credential: GoogleCredential) => void;
 export declare class GoogleService {
     private readonly client;
@@ -27,4 +31,14 @@ export declare class AppleService {
     private renderOptions;
     private renderOfficialButton;
 }
+export declare class MicrosoftService {
+    private readonly client;
+    private optionsPromise?;
+    private runtime?;
+    private runtimePromise?;
+    constructor(client: AutharaReactClient);
+    prepare(): Promise<void>;
+    authorize(): Promise<MicrosoftCredential>;
+    private options;
+}
 export {};

package/dist/services.js

@@ -102,3 +102,75 @@ export class AppleService {
         }
     }
 }
+export class MicrosoftService {
+    constructor(client) {
+        this.client = client;
+    }
+    async prepare() {
+        if (this.runtime)
+            return;
+        this.runtimePromise ?? (this.runtimePromise = Promise.all([
+            this.options(),
+            import("@azure/msal-browser"),
+        ])
+            .then(async ([options, { PublicClientApplication }]) => {
+            const redirectUri = `${window.location.origin}/auth/oauth/microsoft/redirect`;
+            const application = new PublicClientApplication({
+                auth: {
+                    clientId: options.client_id,
+                    authority: options.authority,
+                    redirectUri,
+                },
+                cache: { cacheLocation: "sessionStorage" },
+            });
+            await application.initialize();
+            this.runtime = { application, options, redirectUri };
+            return this.runtime;
+        })
+            .catch((error) => {
+            this.runtimePromise = undefined;
+            throw error;
+        }));
+        await this.runtimePromise;
+    }
+    authorize() {
+        const runtime = this.runtime;
+        if (!runtime) {
+            return Promise.reject(new Error("Microsoft authentication is still loading."));
+        }
+        this.runtime = undefined;
+        this.runtimePromise = undefined;
+        this.optionsPromise = undefined;
+        const resultPromise = runtime.application.loginPopup({
+            scopes: ["openid", "profile", "email"],
+            nonce: runtime.options.nonce,
+            prompt: "select_account",
+            redirectUri: runtime.redirectUri,
+            overrideInteractionInProgress: true,
+        });
+        return resultPromise.then((result) => {
+            if (!result.idToken) {
+                throw new Error("Microsoft did not return an ID token.");
+            }
+            return {
+                credential: result.idToken,
+                nonce: runtime.options.nonce,
+            };
+        });
+    }
+    options() {
+        if (!this.client.getMicrosoftLoginOptions) {
+            return Promise.reject({
+                status: 404,
+                message: "This @authara/browser client does not include Microsoft authentication.",
+            });
+        }
+        this.optionsPromise ?? (this.optionsPromise = this.client
+            .getMicrosoftLoginOptions()
+            .catch((error) => {
+            this.optionsPromise = undefined;
+            throw error;
+        }));
+        return this.optionsPromise;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authara/react",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Official React components for Authara browser authentication",
   "license": "MIT",
   "type": "module",
@@ -35,11 +35,11 @@
     "prepublishOnly": "npm run check:contract && npm run build"
   },
   "peerDependencies": {
-    "@authara/browser": ">=0.10.0 <0.11.0",
+    "@authara/browser": ">=0.11.0 <0.12.0",
     "react": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@authara/browser": "0.10.0",
+    "@authara/browser": "0.11.0",
     "@eslint/js": "^9.39.2",
     "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.14",
@@ -56,5 +56,8 @@
     "vite": "^8.3.4",
     "vitest": "^4.0.18",
     "yaml": "2.9.0"
+  },
+  "dependencies": {
+    "@azure/msal-browser": "^5.25.0"
   }
 }