@authara/react 0.0.1-trusted.3 → 0.1.0

package/dist/GoogleButton.d.ts

@@ -1,15 +1,29 @@
 import { type ComponentPropsWithoutRef, type ReactNode } from "react";
-import type { MaybePromise } from "./contract.js";
+import type { AutharaActionProps, MaybePromise } from "./contract.js";
 import type { GoogleButtonConfiguration } from "./provider-sdks.js";
 import type { GoogleCredential } from "./services.js";
+import { type AutharaColorMode } from "./color-mode.js";
 type GoogleAppearance = Pick<GoogleButtonConfiguration, "type" | "theme" | "size" | "text" | "shape" | "logo_alignment" | "width">;
-export interface GoogleButtonProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "onError">, GoogleAppearance {
+export interface GoogleCredentialButtonProps extends Omit<ComponentPropsWithoutRef<"button">, "children" | "onError" | "size" | "type">, GoogleAppearance {
     disabled?: boolean;
+    border?: boolean;
+    buttonText?: string;
     locale?: string;
     fallback?: ReactNode;
     onCredential: (credential: GoogleCredential) => MaybePromise<void>;
     onError?: (error: Error) => void;
     onUnavailable?: () => void;
 }
-export declare function GoogleButton({ disabled, locale, fallback, onCredential, onError, onUnavailable, type, theme, size, text, shape, logo_alignment, width, style, ...divProps }: GoogleButtonProps): React.JSX.Element | null;
+export declare function GoogleCredentialButton({ disabled, border, buttonText, locale, fallback, onCredential, onError, onUnavailable, type, theme, size, text, shape, logo_alignment, width, style, onClick, ...buttonProps }: GoogleCredentialButtonProps): React.JSX.Element | null;
+export type GoogleButtonVariant = "icon" | "text";
+export type GoogleButtonLabel = "continue" | "sign-in" | "sign-up";
+type GoogleButtonVisualProps = Omit<GoogleCredentialButtonProps, "logo_alignment" | "onCredential" | "onError" | "size" | "text" | "type"> & {
+    variant?: GoogleButtonVariant;
+    size?: "small" | "medium" | "large";
+    label?: GoogleButtonLabel;
+    logoAlignment?: "left" | "center";
+    mode?: AutharaColorMode;
+};
+export type GoogleButtonProps = GoogleButtonVisualProps & AutharaActionProps<"google">;
+export declare function GoogleButton(props: GoogleButtonProps): React.JSX.Element | null;
 export {};

package/dist/GoogleButton.js

@@ -1,10 +1,64 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef, useState, } from "react";
-import { isProviderUnavailable, toError } from "./errors.js";
+import { resolveAction, runGoogleAction } from "./actions.js";
+import { isProviderUnavailable, toAutharaButtonError, toError, } from "./errors.js";
 import { useAutharaServices } from "./context.js";
-export function GoogleButton({ disabled = false, locale, fallback = null, onCredential, onError, onUnavailable, type = "standard", theme = "outline", size = "large", text = "continue_with", shape = "rectangular", logo_alignment = "left", width, style, ...divProps }) {
+import { useResolvedAutharaColorMode, } from "./color-mode.js";
+const googleButtonHeights = {
+    small: 30,
+    medium: 36,
+    large: 44,
+};
+const googleIconButtonSizes = {
+    small: 36,
+    medium: 44,
+    large: 52,
+};
+function googleButtonText(text) {
+    switch (text) {
+        case "signin":
+        case "signin_with":
+            return "Sign in with Google";
+        case "signup_with":
+            return "Sign up with Google";
+        case "continue_with":
+            return "Continue with Google";
+    }
+}
+function googleButtonRadius(shape, height) {
+    switch (shape) {
+        case "circle":
+        case "pill":
+            return height / 2;
+        case "square":
+            return 6;
+        case "rectangular":
+            return 12;
+    }
+}
+function googleButtonColors(theme) {
+    switch (theme) {
+        case "light":
+            return { background: "#fff", borderColor: "#747775", color: "#1f1f1f" };
+        case "dark":
+            return {
+                background: "#131314",
+                borderColor: "#8e918f",
+                color: "#e3e3e3",
+            };
+        case "neutral":
+            return {
+                background: "#f2f2f2",
+                borderColor: "transparent",
+                color: "#1f1f1f",
+            };
+    }
+}
+function GoogleLogo() {
+    return (_jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 18 18", width: "18", height: "18", focusable: "false", children: [_jsx("path", { fill: "#4285F4", d: "M17.64 9.205c0-.638-.057-1.252-.164-1.841H9v3.481h4.844a4.14 4.14 0 0 1-1.797 2.715v2.258h2.909c1.702-1.567 2.684-3.875 2.684-6.613Z" }), _jsx("path", { fill: "#34A853", d: "M9 18c2.43 0 4.468-.806 5.956-2.182l-2.91-2.258c-.805.54-1.835.86-3.046.86-2.344 0-4.328-1.585-5.037-3.714H.956v2.332A9 9 0 0 0 9 18Z" }), _jsx("path", { fill: "#FBBC05", d: "M3.963 10.706A5.41 5.41 0 0 1 3.682 9c0-.592.102-1.168.281-1.706V4.962H.956A9 9 0 0 0 0 9c0 1.452.347 2.827.956 4.038l3.007-2.332Z" }), _jsx("path", { fill: "#EA4335", d: "M9 3.58c1.321 0 2.507.454 3.44 1.345l2.581-2.58C13.464.892 11.426 0 9 0A9 9 0 0 0 .956 4.962l3.007 2.332C4.672 5.165 6.656 3.58 9 3.58Z" })] }));
+}
+export function GoogleCredentialButton({ disabled = false, border, buttonText, locale, fallback = null, onCredential, onError, onUnavailable, type = "standard", theme = "light", size = "large", text = "continue_with", shape = "rectangular", logo_alignment = "center", width, style, onClick, ...buttonProps }) {
     const { google } = useAutharaServices();
-    const targetRef = useRef(null);
     const credentialRef = useRef(onCredential);
     const errorRef = useRef(onError);
     const unavailableRef = useRef(onUnavailable);
@@ -12,41 +66,34 @@ export function GoogleButton({ disabled = false, locale, fallback = null, onCred
     const [available, setAvailable] = useState(true);
     const [ready, setReady] = useState(false);
     const [busy, setBusy] = useState(false);
+    const [requestCode, setRequestCode] = useState();
     credentialRef.current = onCredential;
     errorRef.current = onError;
     unavailableRef.current = onUnavailable;
     disabledRef.current = disabled;
     useEffect(() => {
-        const element = targetRef.current;
-        if (!element)
-            return;
         let active = true;
-        let dispose;
         void google
-            .render(element, {
-            type,
-            theme,
-            size,
-            text,
-            shape,
-            logo_alignment,
-            width: width ?? Math.min(element.clientWidth || 320, 400),
-        }, locale, (credential) => {
+            .prepare(locale, (credential) => {
             if (!active || disabledRef.current)
                 return;
             setBusy(true);
-            void Promise.resolve(credentialRef.current(credential))
+            void Promise.resolve()
+                .then(() => credentialRef.current(credential))
                 .catch((error) => errorRef.current?.(toError(error, "Google authentication failed.")))
                 .finally(() => {
                 if (active)
                     setBusy(false);
             });
-        })
-            .then((cleanup) => {
+        }, (error) => {
             if (!active)
-                cleanup();
-            else {
-                dispose = cleanup;
+                return;
+            setBusy(false);
+            errorRef.current?.(error);
+        })
+            .then((trigger) => {
+            if (active) {
+                setRequestCode(() => trigger);
                 setReady(true);
             }
         })
@@ -62,14 +109,101 @@ export function GoogleButton({ disabled = false, locale, fallback = null, onCred
         });
         return () => {
             active = false;
-            dispose?.();
         };
-    }, [google, locale, logo_alignment, shape, size, text, theme, type, width]);
+    }, [google, locale]);
     if (!available)
         return _jsx(_Fragment, { children: fallback });
     const inactive = disabled || busy;
-    return (_jsx("div", { ...divProps, ref: targetRef, "aria-busy": busy || undefined, "aria-disabled": inactive || undefined, "data-authara-provider": "google", "data-authara-ready": ready ? "true" : "false", style: {
+    const iconOnly = type === "icon";
+    const height = iconOnly
+        ? googleIconButtonSizes[size]
+        : googleButtonHeights[size];
+    const colors = googleButtonColors(theme);
+    const radius = googleButtonRadius(shape, height);
+    const label = buttonText ?? googleButtonText(text);
+    const showBorder = border ?? theme !== "neutral";
+    return (_jsxs("button", { ...buttonProps, type: "button", disabled: !ready || inactive, "aria-busy": busy || undefined, "aria-label": buttonProps["aria-label"] ?? (iconOnly ? label : undefined), "data-authara-provider": "google", "data-authara-ready": ready ? "true" : "false", "data-authara-google-presentation": true, "data-border": String(showBorder), onClick: (event) => {
+            onClick?.(event);
+            if (event.defaultPrevented || !requestCode)
+                return;
+            setBusy(true);
+            requestCode();
+        }, style: {
+            position: "relative",
+            display: "inline-flex",
+            width: width ?? (iconOnly ? height : "100%"),
+            height,
+            alignItems: "center",
+            justifyContent: "center",
+            gap: iconOnly || logo_alignment === "left" ? 0 : 10,
+            padding: iconOnly ? 0 : "0 12px",
+            overflow: "hidden",
+            border: "1px solid",
+            borderRadius: radius,
+            boxSizing: "border-box",
+            boxShadow: "none",
+            cursor: !ready ? "wait" : inactive ? "not-allowed" : "pointer",
+            fontFamily: '"Google Sans", Roboto, Arial, sans-serif',
+            fontSize: 14,
+            fontWeight: 500,
+            lineHeight: "20px",
+            whiteSpace: "nowrap",
+            ...colors,
+            borderColor: showBorder ? colors.borderColor : "transparent",
+            outlineOffset: 2,
+            opacity: inactive ? 0.62 : 1,
+            transition: "opacity 150ms ease",
+            verticalAlign: "middle",
+            WebkitTapHighlightColor: "transparent",
             ...style,
-            pointerEvents: inactive ? "none" : style?.pointerEvents,
-        } }));
+        }, children: [_jsx("span", { "aria-hidden": "true", style: {
+                    display: "inline-flex",
+                    width: 20,
+                    height: 20,
+                    flex: "0 0 20px",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    background: "#fff",
+                    borderRadius: 2,
+                    position: !iconOnly && logo_alignment === "left" ? "absolute" : "static",
+                    left: !iconOnly && logo_alignment === "left" ? 12 : undefined,
+                }, children: _jsx(GoogleLogo, {}) }), !iconOnly && _jsx("span", { children: label })] }));
+}
+function googleText(label) {
+    switch (label) {
+        case "sign-in":
+            return "signin_with";
+        case "sign-up":
+            return "signup_with";
+        case "continue":
+            return "continue_with";
+    }
+}
+export function GoogleButton(props) {
+    const { client } = useAutharaServices();
+    const internal = props;
+    const { action = "login", audience, authenticationChallengeId, recoveryLinkId, onSuccess, onError, variant = "text", size = "large", label = action === "login" ? "sign-in" : "continue", logoAlignment = "center", mode = "light", border, shape, theme, ...buttonProps } = internal;
+    const resolvedMode = useResolvedAutharaColorMode(mode);
+    return (_jsx(GoogleCredentialButton, { ...buttonProps, border: border, theme: theme ?? resolvedMode, type: variant === "icon" ? "icon" : "standard", size: size, text: googleText(label), shape: shape ?? "rectangular", logo_alignment: logoAlignment, onCredential: async (proof) => {
+            let result;
+            let selected;
+            try {
+                selected = resolveAction(action, audience, authenticationChallengeId, recoveryLinkId);
+            }
+            catch (error) {
+                throw toAutharaButtonError(error, "The Google button action is not configured correctly.", "configuration");
+            }
+            try {
+                result = await runGoogleAction(client, selected, proof);
+            }
+            catch (error) {
+                throw toAutharaButtonError(error, `Google ${action} failed.`, "authara");
+            }
+            try {
+                await onSuccess?.(result);
+            }
+            catch (error) {
+                throw toAutharaButtonError(error, "The Google success callback failed.", "consumer");
+            }
+        }, onError: (error) => onError?.(toAutharaButtonError(error, "Google authentication failed.", "provider")) }));
 }

package/dist/actions.d.ts

@@ -0,0 +1,17 @@
+import type { AppleProof, AutharaAction, AutharaActionSuccess, AutharaAudience, AutharaReactClient, GoogleProof } from "./contract.js";
+export type ResolvedAutharaAction = {
+    action: "login";
+    audience: AutharaAudience;
+} | {
+    action: "link";
+} | {
+    action: "reauthenticate";
+    authenticationChallengeId: string;
+} | {
+    action: "recover";
+    audience: "app";
+    recoveryLinkId: string;
+};
+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 resolveAction(action: AutharaAction | undefined, audience: AutharaAudience | undefined, authenticationChallengeId: string | undefined, recoveryLinkId: string | undefined): ResolvedAutharaAction;

package/dist/actions.js

@@ -0,0 +1,88 @@
+export async function runGoogleAction(client, selected, proof) {
+    await client.getCsrfToken();
+    const body = { code: proof.code, redirect_uri: proof.redirect_uri };
+    switch (selected.action) {
+        case "login":
+            return {
+                action: "login",
+                provider: "google",
+                session: await client.loginWithGoogle({
+                    audience: selected.audience,
+                    body,
+                }),
+            };
+        case "link":
+            await client.linkCurrentUserGoogle({ body });
+            return { action: "link", provider: "google" };
+        case "reauthenticate":
+            await client.reauthenticateWithGoogle({
+                body: {
+                    ...body,
+                    authentication_challenge_id: selected.authenticationChallengeId,
+                },
+            });
+            return { action: "reauthenticate", provider: "google" };
+        case "recover":
+            return {
+                action: "recover",
+                provider: "google",
+                session: await client.completeAccountRecoveryLinkWithGoogle({
+                    linkID: selected.recoveryLinkId,
+                    audience: selected.audience,
+                    body,
+                }),
+            };
+    }
+}
+export async function runAppleAction(client, selected, proof) {
+    await client.getCsrfToken();
+    switch (selected.action) {
+        case "login":
+            return {
+                action: "login",
+                provider: "apple",
+                session: await client.loginWithApple({
+                    audience: selected.audience,
+                    body: proof,
+                }),
+            };
+        case "link":
+            await client.linkCurrentUserApple({ body: proof });
+            return { action: "link", provider: "apple" };
+        case "reauthenticate":
+            await client.reauthenticateWithApple({
+                body: {
+                    ...proof,
+                    authentication_challenge_id: selected.authenticationChallengeId,
+                },
+            });
+            return { action: "reauthenticate", provider: "apple" };
+        case "recover":
+            return {
+                action: "recover",
+                provider: "apple",
+                session: await client.completeAccountRecoveryLinkWithApple({
+                    linkID: selected.recoveryLinkId,
+                    audience: selected.audience,
+                    body: proof,
+                }),
+            };
+    }
+}
+export function resolveAction(action, audience, authenticationChallengeId, recoveryLinkId) {
+    if (action === "link")
+        return { action };
+    if (action === "reauthenticate") {
+        if (!authenticationChallengeId) {
+            throw new Error("authenticationChallengeId is required for reauthentication.");
+        }
+        return { action, authenticationChallengeId };
+    }
+    if (action === "recover") {
+        if (!recoveryLinkId) {
+            throw new Error("recoveryLinkId is required for account recovery.");
+        }
+        return { action, audience: "app", recoveryLinkId };
+    }
+    return { action: "login", audience: audience ?? "app" };
+}

package/dist/color-mode.d.ts

@@ -0,0 +1,3 @@
+export type AutharaColorMode = "dark" | "light" | "system";
+export type ResolvedAutharaColorMode = Exclude<AutharaColorMode, "system">;
+export declare function useResolvedAutharaColorMode(mode: AutharaColorMode): ResolvedAutharaColorMode;

package/dist/color-mode.js

@@ -0,0 +1,20 @@
+import { useSyncExternalStore } from "react";
+const darkModeQuery = "(prefers-color-scheme: dark)";
+function systemColorMode() {
+    if (typeof window === "undefined" || !window.matchMedia)
+        return "light";
+    return window.matchMedia(darkModeQuery).matches ? "dark" : "light";
+}
+function subscribeSystemColorMode(update) {
+    if (typeof window === "undefined" || !window.matchMedia)
+        return () => { };
+    const query = window.matchMedia(darkModeQuery);
+    query.addEventListener("change", update);
+    return () => query.removeEventListener("change", update);
+}
+const noSubscription = () => () => { };
+const serverColorMode = () => "light";
+export function useResolvedAutharaColorMode(mode) {
+    const systemMode = useSyncExternalStore(mode === "system" ? subscribeSystemColorMode : noSubscription, systemColorMode, serverColorMode);
+    return mode === "system" ? systemMode : mode;
+}

package/dist/context.d.ts

@@ -3,6 +3,7 @@ import type { AutharaReactClient } from "./contract.js";
 import { AppleService, GoogleService } from "./services.js";
 type AutharaReactContextValue = {
     apple: AppleService;
+    client: AutharaReactClient;
     google: GoogleService;
 };
 export type AutharaProviderProps = PropsWithChildren<{

package/dist/context.js

@@ -9,6 +9,7 @@ const AutharaContext = createContext(null);
 export function AutharaProvider({ client, children, }) {
     const value = useMemo(() => ({
         apple: new AppleService(client),
+        client,
         google: new GoogleService(client),
     }), [client]);
     return (_jsx(AutharaContext.Provider, { value: value, children: children }));

package/dist/contract.d.ts

@@ -1,3 +1,11 @@
+import type { AccountRecoveryLink as BrowserAccountRecoveryLink, AuthSession } from "@authara/browser";
+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 & {
+    provider: AutharaProviderName;
+};
 export interface GoogleLoginOptions {
     client_id: string;
     nonce: string;
@@ -8,13 +16,104 @@ export interface AppleLoginOptions {
     state: string;
     nonce: string;
 }
+export type GoogleProof = {
+    code: string;
+    redirect_uri: string;
+};
+export type AppleProof = {
+    code: string;
+    state: 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.
  */
 export interface AutharaReactClient {
+    getCsrfToken(): Promise<unknown>;
     getGoogleLoginOptions(): Promise<GoogleLoginOptions>;
     getAppleLoginOptions(): Promise<AppleLoginOptions>;
+    loginWithGoogle(options: {
+        audience?: AutharaAudience;
+        body: GoogleProof;
+    }): Promise<AuthSession>;
+    loginWithApple(options: {
+        audience?: AutharaAudience;
+        body: AppleProof;
+    }): Promise<AuthSession>;
+    linkCurrentUserGoogle(options: {
+        body: GoogleProof;
+    }): Promise<void>;
+    linkCurrentUserApple(options: {
+        body: AppleProof;
+    }): Promise<void>;
+    reauthenticateWithGoogle(options: {
+        body: GoogleProof & {
+            authentication_challenge_id: string;
+        };
+    }): Promise<void>;
+    reauthenticateWithApple(options: {
+        body: AppleProof & {
+            authentication_challenge_id: string;
+        };
+    }): Promise<void>;
+    completeAccountRecoveryLinkWithGoogle(options: {
+        linkID: AutharaAccountRecoveryLink["link_id"];
+        audience?: "app";
+        body: GoogleProof;
+    }): Promise<AuthSession>;
+    completeAccountRecoveryLinkWithApple(options: {
+        linkID: AutharaAccountRecoveryLink["link_id"];
+        audience?: "app";
+        body: AppleProof;
+    }): Promise<AuthSession>;
 }
+export type AutharaLoginSuccess<P extends AutharaProviderName> = {
+    action: "login";
+    provider: P;
+    session: AuthSession;
+};
+export type AutharaLinkSuccess<P extends AutharaProviderName> = {
+    action: "link";
+    provider: P;
+};
+export type AutharaReauthenticationSuccess<P extends AutharaProviderName> = {
+    action: "reauthenticate";
+    provider: P;
+};
+export type AutharaRecoverySuccess<P extends AutharaProviderName> = {
+    action: "recover";
+    provider: P;
+    session: AuthSession;
+};
+export type AutharaActionSuccess<P extends AutharaProviderName> = AutharaLoginSuccess<P> | AutharaLinkSuccess<P> | AutharaReauthenticationSuccess<P> | AutharaRecoverySuccess<P>;
+export type AutharaActionProps<P extends AutharaProviderName> = {
+    action?: "login";
+    audience?: AutharaAudience;
+    authenticationChallengeId?: never;
+    recoveryLinkId?: never;
+    onSuccess?: (result: AutharaLoginSuccess<P>) => MaybePromise<void>;
+    onError?: (error: AutharaButtonError<AutharaLoginErrorCode>) => void;
+} | {
+    action: "link";
+    audience?: never;
+    authenticationChallengeId?: never;
+    recoveryLinkId?: never;
+    onSuccess?: (result: AutharaLinkSuccess<P>) => MaybePromise<void>;
+    onError?: (error: AutharaButtonError<AutharaLinkErrorCode>) => void;
+} | {
+    action: "reauthenticate";
+    audience?: never;
+    authenticationChallengeId: string;
+    recoveryLinkId?: never;
+    onSuccess?: (result: AutharaReauthenticationSuccess<P>) => MaybePromise<void>;
+    onError?: (error: AutharaButtonError<AutharaReauthenticationErrorCode>) => void;
+} | {
+    action: "recover";
+    audience?: "app";
+    authenticationChallengeId?: never;
+    recoveryLinkId: AutharaAccountRecoveryLink["link_id"];
+    onSuccess?: (result: AutharaRecoverySuccess<P>) => MaybePromise<void>;
+    onError?: (error: AutharaButtonError<AutharaRecoveryErrorCode>) => void;
+};
 export type MaybePromise<T> = T | Promise<T>;

package/dist/errors.d.ts

@@ -1,3 +1,36 @@
+import type { AutharaAccountRecoveryLink } from "./contract.js";
+import { type AutharaContractErrorCode } from "./generated-error-codes.js";
 export declare function isProviderUnavailable(error: unknown): boolean;
 export declare function toError(error: unknown, fallback: string): Error;
+export type AutharaButtonErrorSource = "authara" | "provider" | "configuration" | "consumer";
+export type AutharaLocalErrorCode = "csrf_token_missing" | "unknown_authara_error";
+export type AutharaLoginErrorCode = AutharaContractErrorCode<"login"> | AutharaLocalErrorCode;
+export type AutharaLinkErrorCode = AutharaContractErrorCode<"link"> | AutharaLocalErrorCode;
+export type AutharaReauthenticationErrorCode = AutharaContractErrorCode<"reauthenticate"> | AutharaLocalErrorCode;
+export type AutharaRecoveryErrorCode = AutharaContractErrorCode<"recover"> | AutharaLocalErrorCode;
+export type AutharaButtonErrorCode = AutharaLoginErrorCode | AutharaLinkErrorCode | AutharaReauthenticationErrorCode | AutharaRecoveryErrorCode;
+export type AutharaAuthenticationChallenge = {
+    id: string;
+    expires_at: string;
+};
+export declare class AutharaButtonError<Code extends string = AutharaButtonErrorCode> extends Error {
+    readonly source: AutharaButtonErrorSource;
+    readonly code?: Code;
+    readonly serverCode?: string;
+    readonly status?: number;
+    readonly authenticationChallenge?: AutharaAuthenticationChallenge;
+    readonly reauthenticateUrl?: string;
+    readonly recovery?: AutharaAccountRecoveryLink;
+    readonly originalError: unknown;
+    constructor(message: string, source: AutharaButtonErrorSource, originalError: unknown, metadata?: {
+        code?: Code;
+        serverCode?: string;
+        status?: number;
+        authenticationChallenge?: AutharaAuthenticationChallenge;
+        reauthenticateUrl?: string;
+        recovery?: AutharaAccountRecoveryLink;
+    });
+}
+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;