@authara/react 0.0.1-trusted.3 → 0.1.0

package/dist/errors.js

@@ -1,3 +1,4 @@
+import { autharaActionErrorCodes, } from "./generated-error-codes.js";
 export function isProviderUnavailable(error) {
     return (typeof error === "object" &&
         error !== null &&
@@ -16,6 +17,101 @@ export function toError(error, fallback) {
     }
     return new Error(fallback);
 }
+const knownAutharaErrorCodes = new Set([
+    ...autharaActionErrorCodes.login,
+    ...autharaActionErrorCodes.link,
+    ...autharaActionErrorCodes.reauthenticate,
+    ...autharaActionErrorCodes.recover,
+    "csrf_token_missing",
+]);
+export class AutharaButtonError extends Error {
+    constructor(message, source, originalError, metadata = {}) {
+        super(message);
+        this.name = "AutharaButtonError";
+        this.source = source;
+        this.originalError = originalError;
+        this.code = metadata.code;
+        this.serverCode = metadata.serverCode;
+        this.status = metadata.status;
+        this.authenticationChallenge = metadata.authenticationChallenge;
+        this.reauthenticateUrl = metadata.reauthenticateUrl;
+        this.recovery = metadata.recovery;
+    }
+}
+function record(value) {
+    return typeof value === "object" && value !== null
+        ? value
+        : undefined;
+}
+function challengeFrom(error) {
+    const details = record(error?.details);
+    const candidate = record(error?.authenticationChallenge) ??
+        record(details?.authentication_challenge);
+    if (typeof candidate?.id !== "string" ||
+        typeof candidate.expires_at !== "string") {
+        return undefined;
+    }
+    return { id: candidate.id, expires_at: candidate.expires_at };
+}
+function recoveryFrom(error) {
+    const details = record(error?.details);
+    const candidate = record(error?.recovery) ?? record(details?.recovery);
+    if (typeof candidate?.link_id !== "string" ||
+        !candidate.link_id ||
+        typeof candidate.provider !== "string" ||
+        !candidate.provider ||
+        !Array.isArray(candidate.proof_methods) ||
+        !candidate.proof_methods.every((method) => typeof method === "string")) {
+        return undefined;
+    }
+    return {
+        link_id: candidate.link_id,
+        provider: candidate.provider,
+        proof_methods: candidate.proof_methods,
+    };
+}
+export function toAutharaButtonError(error, fallback, defaultSource) {
+    if (error instanceof AutharaButtonError)
+        return error;
+    const value = record(error);
+    const details = record(value?.details);
+    const nestedError = record(details?.error);
+    const status = typeof value?.status === "number" ? value.status : undefined;
+    const rawCode = typeof value?.code === "string"
+        ? value.code
+        : typeof nestedError?.code === "string"
+            ? nestedError.code
+            : value?.name === "AutharaCSRFError"
+                ? "csrf_token_missing"
+                : undefined;
+    const autharaFailure = status !== undefined ||
+        details !== undefined ||
+        value?.name === "AutharaApiError" ||
+        value?.name === "AutharaCSRFError";
+    const source = autharaFailure ? "authara" : defaultSource;
+    const normalized = toError(error, fallback);
+    const reauthenticateUrl = typeof value?.reauthenticateUrl === "string"
+        ? value.reauthenticateUrl
+        : typeof details?.reauthenticate_url === "string"
+            ? details.reauthenticate_url
+            : undefined;
+    const knownCode = rawCode !== undefined && knownAutharaErrorCodes.has(rawCode);
+    return new AutharaButtonError(normalized.message, source, error, {
+        code: source === "authara"
+            ? (knownCode
+                ? rawCode
+                : "unknown_authara_error")
+            : undefined,
+        serverCode: source === "authara" && !knownCode ? rawCode : undefined,
+        status,
+        authenticationChallenge: challengeFrom(value),
+        reauthenticateUrl,
+        recovery: recoveryFrom(value),
+    });
+}
+export function isAutharaButtonError(error) {
+    return error instanceof AutharaButtonError;
+}
 export function isAppleCancellation(error) {
     if (typeof error !== "object" || error === null || !("error" in error)) {
         return false;

package/dist/generated-error-codes.d.ts

@@ -0,0 +1,8 @@
+export declare const autharaActionErrorCodes: {
+    readonly login: readonly ["account_link_required", "forbidden", "internal_error", "invalid_request", "not_found", "unauthorized"];
+    readonly link: readonly ["auth_method_already_linked", "forbidden", "internal_error", "invalid_request", "not_found", "recent_authentication_required", "unauthorized"];
+    readonly reauthenticate: readonly ["internal_error", "invalid_authentication_challenge", "invalid_request", "not_found", "unauthorized"];
+    readonly recover: readonly ["auth_method_already_linked", "forbidden", "internal_error", "invalid_request", "invitation_already_accepted", "invitation_email_mismatch", "invitation_expired", "invitation_not_found", "invitation_revoked", "not_found", "organization_membership_conflict", "provider_link_expired", "unauthorized"];
+};
+export type AutharaContractAction = keyof typeof autharaActionErrorCodes;
+export type AutharaContractErrorCode<Action extends AutharaContractAction> = (typeof autharaActionErrorCodes)[Action][number];

package/dist/generated-error-codes.js

@@ -0,0 +1,42 @@
+// Code generated from authara-core/contract/openapi.yaml; DO NOT EDIT.
+export const autharaActionErrorCodes = {
+    login: [
+        "account_link_required",
+        "forbidden",
+        "internal_error",
+        "invalid_request",
+        "not_found",
+        "unauthorized",
+    ],
+    link: [
+        "auth_method_already_linked",
+        "forbidden",
+        "internal_error",
+        "invalid_request",
+        "not_found",
+        "recent_authentication_required",
+        "unauthorized",
+    ],
+    reauthenticate: [
+        "internal_error",
+        "invalid_authentication_challenge",
+        "invalid_request",
+        "not_found",
+        "unauthorized",
+    ],
+    recover: [
+        "auth_method_already_linked",
+        "forbidden",
+        "internal_error",
+        "invalid_request",
+        "invitation_already_accepted",
+        "invitation_email_mismatch",
+        "invitation_expired",
+        "invitation_not_found",
+        "invitation_revoked",
+        "not_found",
+        "organization_membership_conflict",
+        "provider_link_expired",
+        "unauthorized",
+    ],
+};

package/dist/index.d.ts

@@ -1,6 +1,8 @@
-export { AppleButton, type AppleButtonProps } from "./AppleButton.js";
-export { GoogleButton, type GoogleButtonProps } from "./GoogleButton.js";
+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 { AutharaProvider, type AutharaProviderProps } from "./context.js";
-export type { AppleLoginOptions, AutharaReactClient, GoogleLoginOptions, MaybePromise, } from "./contract.js";
-export { isAppleCancellation, isProviderUnavailable } from "./errors.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";

package/dist/index.js

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

package/dist/provider-sdks.d.ts

@@ -1,29 +1,34 @@
-export type GoogleCredentialResponse = {
-    credential?: string;
-    select_by?: string;
-    state?: string;
+export type GoogleCodeResponse = {
+    code?: string;
+    error?: string;
+    error_description?: string;
+};
+export type GoogleCodeClient = {
+    requestCode(): void;
+};
+export type GoogleCodeClientConfiguration = {
+    client_id: string;
+    scope: string;
+    ux_mode: "popup";
+    select_account: boolean;
+    callback: (response: GoogleCodeResponse) => void;
+    error_callback: (error: {
+        type?: string;
+    }) => void;
 };
 export type GoogleButtonConfiguration = {
     type?: "standard" | "icon";
-    theme?: "outline" | "filled_blue" | "filled_black";
+    theme?: "light" | "dark" | "neutral";
     size?: "large" | "medium" | "small";
     text?: "signin_with" | "signup_with" | "continue_with" | "signin";
     shape?: "rectangular" | "pill" | "circle" | "square";
     logo_alignment?: "left" | "center";
     width?: number;
-    locale?: string;
-    state?: string;
-    click_listener?: () => void;
 };
 export type GoogleIdentity = {
     accounts: {
-        id: {
-            initialize(options: {
-                client_id: string;
-                nonce: string;
-                callback: (response: GoogleCredentialResponse) => void;
-            }): void;
-            renderButton(parent: HTMLElement, options: GoogleButtonConfiguration): void;
+        oauth2: {
+            initCodeClient(options: GoogleCodeClientConfiguration): GoogleCodeClient;
         };
     };
 };

package/dist/provider-sdks.js

@@ -8,14 +8,17 @@ function appendScript(url, resolveGlobal, failureMessage) {
     return new Promise((resolve, reject) => {
         const existing = document.querySelector(`script[src="${url}"]`);
         const script = existing ?? document.createElement("script");
+        const failed = () => {
+            script.remove();
+            reject(new Error(failureMessage));
+        };
         const loaded = () => {
             const value = resolveGlobal();
             if (value)
                 resolve(value);
             else
-                reject(new Error(failureMessage));
+                failed();
         };
-        const failed = () => reject(new Error(failureMessage));
         script.addEventListener("load", loaded, { once: true });
         script.addEventListener("error", failed, { once: true });
         if (!existing) {
@@ -26,7 +29,7 @@ function appendScript(url, resolveGlobal, failureMessage) {
     });
 }
 export function loadGoogleIdentity(locale) {
-    if (window.google?.accounts?.id)
+    if (window.google?.accounts?.oauth2)
         return Promise.resolve(window.google);
     if (googlePromise) {
         if (locale !== googleLocale) {

package/dist/services.d.ts

@@ -1,9 +1,7 @@
 import type { AutharaReactClient } from "./contract.js";
-import { type GoogleButtonConfiguration } from "./provider-sdks.js";
 export type GoogleCredential = {
-    credential: string;
-    nonce: string;
-    selectBy?: string;
+    code: string;
+    redirect_uri: string;
 };
 export type AppleAuthorization = {
     code: string;
@@ -14,10 +12,8 @@ export declare class GoogleService {
     private readonly client;
     private optionsPromise?;
     private sdkPromise?;
-    private handlers;
-    private activeState?;
     constructor(client: AutharaReactClient);
-    render(element: HTMLElement, configuration: GoogleButtonConfiguration, locale: string | undefined, handler: GoogleHandler): Promise<() => void>;
+    prepare(locale: string | undefined, handler: GoogleHandler, errorHandler: (error: Error) => void): Promise<() => void>;
     private options;
     private sdk;
 }

package/dist/services.js

@@ -1,32 +1,34 @@
 import { loadAppleIdentity, loadGoogleIdentity, } from "./provider-sdks.js";
-let stateSequence = 0;
-function nextState() {
-    stateSequence += 1;
-    return `authara-google-${stateSequence}`;
-}
 export class GoogleService {
     constructor(client) {
         this.client = client;
-        this.handlers = new Map();
     }
-    async render(element, configuration, locale, handler) {
+    async prepare(locale, handler, errorHandler) {
         const options = await this.options();
-        const google = await this.sdk(locale, options);
-        const state = nextState();
-        this.handlers.set(state, handler);
-        google.accounts.id.renderButton(element, {
-            ...configuration,
-            locale,
-            state,
-            click_listener: () => {
-                this.activeState = state;
+        const google = await this.sdk(locale);
+        const client = google.accounts.oauth2.initCodeClient({
+            client_id: options.client_id,
+            scope: "openid email profile",
+            ux_mode: "popup",
+            select_account: true,
+            callback: (response) => {
+                if (response.error) {
+                    errorHandler(new Error(response.error_description || response.error));
+                    return;
+                }
+                if (!response.code) {
+                    errorHandler(new Error("Google did not return an authorization code."));
+                    return;
+                }
+                handler({ code: response.code, redirect_uri: window.location.origin });
+            },
+            error_callback: (error) => {
+                errorHandler(new Error(error.type === "popup_closed"
+                    ? "Google sign-in was cancelled."
+                    : "Google sign-in could not be opened."));
             },
         });
-        return () => {
-            this.handlers.delete(state);
-            if (this.activeState === state)
-                this.activeState = undefined;
-        };
+        return () => client.requestCode();
     }
     options() {
         this.optionsPromise ?? (this.optionsPromise = this.client
@@ -37,26 +39,8 @@ export class GoogleService {
         }));
         return this.optionsPromise;
     }
-    sdk(locale, options) {
-        this.sdkPromise ?? (this.sdkPromise = loadGoogleIdentity(locale).then((google) => {
-            google.accounts.id.initialize({
-                client_id: options.client_id,
-                nonce: options.nonce,
-                callback: (response) => {
-                    if (!response.credential)
-                        return;
-                    const state = response.state ?? this.activeState;
-                    if (!state)
-                        return;
-                    this.handlers.get(state)?.({
-                        credential: response.credential,
-                        nonce: options.nonce,
-                        selectBy: response.select_by,
-                    });
-                },
-            });
-            return google;
-        }));
+    sdk(locale) {
+        this.sdkPromise ?? (this.sdkPromise = loadGoogleIdentity(locale));
         return this.sdkPromise;
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authara/react",
-  "version": "0.0.1-trusted.3",
+  "version": "0.1.0",
   "description": "Official React components for Authara browser authentication",
   "license": "MIT",
   "type": "module",
@@ -22,19 +22,24 @@
   ],
   "scripts": {
     "build": "tsc -p tsconfig.json",
+    "build:playground": "tsc -p tsconfig.playground.json --noEmit && vite build --config vite.config.ts",
+    "build:playground:package": "npm run build && tsc -p tsconfig.playground.package.json --noEmit && vite build --config vite.config.ts --mode package",
     "check:contract": "node scripts/check-contract.mjs",
-    "check:format": "prettier --check \"src/**/*.{ts,tsx}\" \"contract/**/*.ts\" \"scripts/**/*.mjs\"",
-    "format": "prettier --write \"src/**/*.{ts,tsx}\" \"contract/**/*.ts\" \"scripts/**/*.mjs\"",
-    "lint": "eslint \"src/**/*.{ts,tsx}\" \"contract/**/*.ts\"",
+    "check:error-contract": "node scripts/sync-error-contract.mjs --check",
+    "check:format": "prettier --check \"src/**/*.{ts,tsx}\" \"playground/**/*.{ts,tsx,css,html}\" \"contract/**/*.ts\" \"scripts/**/*.mjs\" \"vite.config.ts\" \"docker-compose.playground*.yaml\"",
+    "dev": "vite --config vite.config.ts",
+    "format": "prettier --write \"src/**/*.{ts,tsx}\" \"playground/**/*.{ts,tsx,css,html}\" \"contract/**/*.ts\" \"scripts/**/*.mjs\" \"vite.config.ts\" \"docker-compose.playground*.yaml\"",
+    "lint": "eslint \"src/**/*.{ts,tsx}\" \"playground/**/*.{ts,tsx}\" \"contract/**/*.ts\" \"vite.config.ts\"",
+    "sync:error-contract": "node scripts/sync-error-contract.mjs",
     "test": "vitest run",
     "prepublishOnly": "npm run check:contract && npm run build"
   },
   "peerDependencies": {
-    "@authara/browser": ">=0.6.0 <1.0.0",
+    "@authara/browser": ">=0.10.0 <0.11.0",
     "react": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@authara/browser": "0.6.0",
+    "@authara/browser": "0.10.0",
     "@eslint/js": "^9.39.2",
     "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.14",
@@ -48,6 +53,8 @@
     "react-dom": "^19.1.1",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.54.0",
-    "vitest": "^4.0.18"
+    "vite": "^8.3.4",
+    "vitest": "^4.0.18",
+    "yaml": "2.9.0"
   }
 }