@authara/react 0.0.0-stage → 0.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Alexander Lupatsiy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,129 @@
-# Temporary Holding Version
+# @authara/react
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Official React components for Authara's Google and Apple browser flows.
+
+The package owns provider SDK loading and React lifecycle integration. HTTP,
+cookies, CSRF protection, sessions, and generated Authara API operations remain
+in [`@authara/browser`](https://www.npmjs.com/package/@authara/browser).
+
+## Installation
+
+```bash
+npm install @authara/react @authara/browser react
+```
+
+## Usage
+
+Create one browser client and place one provider near the root of the page:
+
+```tsx
+import { AutharaBrowserClient } from "@authara/browser";
+import {
+  AppleButton,
+  AutharaProvider,
+  GoogleButton
+} from "@authara/react";
+
+const authara = new AutharaBrowserClient();
+
+export function Login() {
+  return (
+    <AutharaProvider client={authara}>
+      <GoogleButton
+        onCredential={async ({ credential, nonce }) => {
+          await authara.loginWithGoogle({
+            audience: "app",
+            body: { credential, nonce }
+          });
+        }}
+        onError={console.error}
+      />
+
+      <AppleButton
+        onAuthorization={async ({ code, state }) => {
+          await authara.loginWithApple({
+            audience: "app",
+            body: { code, state }
+          });
+        }}
+        onError={console.error}
+      />
+    </AutharaProvider>
+  );
+}
+```
+
+The buttons return provider proof instead of choosing an Authara operation.
+The same components therefore work for login, provider linking,
+reauthentication, invitations, and account-recovery proof.
+
+`AutharaProvider` is deliberately small. It contains no authentication or
+session state. It coordinates the page-global third-party SDK instances so
+Google is initialized once and callbacks are routed to the correct button.
+
+## Provider availability
+
+Authara returns `404 Not Found` from an options operation when that provider is
+disabled. The corresponding button then renders `fallback` (which defaults to
+`null`) and calls `onUnavailable`.
+
+```tsx
+<GoogleButton
+  fallback={<p>Google sign-in is not configured.</p>}
+  onUnavailable={() => reportProviderUnavailable("google")}
+  onCredential={handleGoogleCredential}
+/>
+```
+
+Apple user cancellation calls `onCancel`; it is not reported through
+`onError`.
+
+## Appearance
+
+`GoogleButton` exposes the official Google button configuration: `type`,
+`theme`, `size`, `text`, `shape`, `logo_alignment`, `width`, and `locale`.
+
+`AppleButton` exposes `color`, `border`, `type`, `mode`, and `locale`. Width and
+height are set through the normal React `style` prop. Provider branding remains
+rendered by the official provider SDKs.
+
+## Contract synchronization
+
+The components never contain Authara route strings. They consume the generated
+`AutharaBrowserClient` operation methods:
+
+- `getGoogleLoginOptions()`
+- `getAppleLoginOptions()`
+
+`.contract/manifest.json` records the exact browser SDK release and its
+immutable Authara Core OpenAPI provenance. `npm run check:contract` performs a
+TypeScript structural compatibility check against that exact browser SDK.
+
+`.github/workflows/sync-browser.yaml` receives each
+`authara-browser-released` event, installs the exact released browser package,
+copies its Core provenance, runs the full checks, and opens an automated pull
+request. This keeps route and schema changes flowing in this order:
+
+```text
+Authara Core OpenAPI release
+  -> generated @authara/browser release
+  -> @authara/react contract check and dependency PR
+```
+
+The initial manifest is intentionally marked `unreleased`. Publishing remains
+blocked until a browser SDK release containing the Apple operations has passed
+the synchronization workflow.
+
+## Design guarantees
+
+- No hidden login or redirect behavior
+- No Authara route duplication
+- Provider scripts are loaded once
+- Safe effect cleanup for React Strict Mode
+- Fresh Apple state and nonce immediately before authorization
+- Disabled providers disappear cleanly
+- React 18 and 19 peer support
+
+## License
+
+MIT

package/dist/AppleButton.d.ts

@@ -0,0 +1,17 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+import type { MaybePromise } from "./contract.js";
+import type { AppleAuthorization } from "./services.js";
+export interface AppleButtonProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "onError"> {
+    disabled?: boolean;
+    locale?: string;
+    color?: "black" | "white";
+    border?: boolean;
+    type?: "sign-in" | "continue" | "sign-up";
+    mode?: "center-align" | "left-align" | "logo-only";
+    fallback?: ReactNode;
+    onAuthorization: (authorization: AppleAuthorization) => MaybePromise<void>;
+    onCancel?: () => void;
+    onError?: (error: Error) => void;
+    onUnavailable?: () => void;
+}
+export declare function AppleButton({ disabled, locale, color, border, type, mode, fallback, onAuthorization, onCancel, onError, onUnavailable, style, ...divProps }: AppleButtonProps): React.JSX.Element | null;

package/dist/AppleButton.js

@@ -0,0 +1,71 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState, } from "react";
+import { isAppleCancellation, isProviderUnavailable, toError, } from "./errors.js";
+import { useAutharaServices } from "./context.js";
+export function AppleButton({ disabled = false, locale = "en_US", color = "black", border = true, type = "continue", mode = "center-align", fallback = null, onAuthorization, onCancel, onError, onUnavailable, style, ...divProps }) {
+    const { apple } = useAutharaServices();
+    const targetRef = useRef(null);
+    const authorizationRef = useRef(onAuthorization);
+    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);
+    authorizationRef.current = onAuthorization;
+    cancelRef.current = onCancel;
+    errorRef.current = onError;
+    unavailableRef.current = onUnavailable;
+    useEffect(() => {
+        const element = targetRef.current;
+        if (!element)
+            return;
+        let active = true;
+        void apple
+            .render(element, locale)
+            .then(() => {
+            if (active)
+                setReady(true);
+        })
+            .catch((error) => {
+            if (!active)
+                return;
+            if (isProviderUnavailable(error)) {
+                setAvailable(false);
+                unavailableRef.current?.();
+                return;
+            }
+            errorRef.current?.(toError(error, "Apple authentication is unavailable."));
+        });
+        return () => {
+            active = false;
+        };
+    }, [apple, border, color, locale, mode, type]);
+    const beginAuthorization = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!ready || disabled || busy)
+            return;
+        setBusy(true);
+        void apple
+            .authorize(locale)
+            .then((authorization) => authorizationRef.current(authorization))
+            .catch((error) => {
+            if (isAppleCancellation(error)) {
+                cancelRef.current?.();
+                return;
+            }
+            errorRef.current?.(toError(error, "Apple authentication failed."));
+        })
+            .finally(() => setBusy(false));
+    };
+    if (!available)
+        return _jsx(_Fragment, { children: fallback });
+    const inactive = disabled || busy;
+    return (_jsx("div", { ...divProps, "aria-busy": busy || undefined, "aria-disabled": inactive || undefined, "data-authara-provider": "apple", "data-authara-ready": ready ? "true" : "false", onClickCapture: beginAuthorization, style: {
+            width: "100%",
+            height: 44,
+            ...style,
+            pointerEvents: inactive ? "none" : style?.pointerEvents,
+        }, children: _jsx("div", { ref: targetRef, "data-color": color, "data-border": String(border), "data-type": type, "data-mode": mode, style: { width: "100%", height: "100%" } }) }));
+}

package/dist/GoogleButton.d.ts

@@ -0,0 +1,15 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+import type { MaybePromise } from "./contract.js";
+import type { GoogleButtonConfiguration } from "./provider-sdks.js";
+import type { GoogleCredential } from "./services.js";
+type GoogleAppearance = Pick<GoogleButtonConfiguration, "type" | "theme" | "size" | "text" | "shape" | "logo_alignment" | "width">;
+export interface GoogleButtonProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "onError">, GoogleAppearance {
+    disabled?: boolean;
+    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 {};

package/dist/GoogleButton.js

@@ -0,0 +1,75 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState, } from "react";
+import { isProviderUnavailable, 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 }) {
+    const { google } = useAutharaServices();
+    const targetRef = useRef(null);
+    const credentialRef = useRef(onCredential);
+    const errorRef = useRef(onError);
+    const unavailableRef = useRef(onUnavailable);
+    const disabledRef = useRef(disabled);
+    const [available, setAvailable] = useState(true);
+    const [ready, setReady] = useState(false);
+    const [busy, setBusy] = useState(false);
+    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) => {
+            if (!active || disabledRef.current)
+                return;
+            setBusy(true);
+            void Promise.resolve(credentialRef.current(credential))
+                .catch((error) => errorRef.current?.(toError(error, "Google authentication failed.")))
+                .finally(() => {
+                if (active)
+                    setBusy(false);
+            });
+        })
+            .then((cleanup) => {
+            if (!active)
+                cleanup();
+            else {
+                dispose = cleanup;
+                setReady(true);
+            }
+        })
+            .catch((error) => {
+            if (!active)
+                return;
+            if (isProviderUnavailable(error)) {
+                setAvailable(false);
+                unavailableRef.current?.();
+                return;
+            }
+            errorRef.current?.(toError(error, "Google authentication is unavailable."));
+        });
+        return () => {
+            active = false;
+            dispose?.();
+        };
+    }, [google, locale, logo_alignment, shape, size, text, theme, type, width]);
+    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: {
+            ...style,
+            pointerEvents: inactive ? "none" : style?.pointerEvents,
+        } }));
+}

package/dist/context.d.ts

@@ -0,0 +1,17 @@
+import { type PropsWithChildren } from "react";
+import type { AutharaReactClient } from "./contract.js";
+import { AppleService, GoogleService } from "./services.js";
+type AutharaReactContextValue = {
+    apple: AppleService;
+    google: GoogleService;
+};
+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.
+ */
+export declare function AutharaProvider({ client, children, }: AutharaProviderProps): React.JSX.Element;
+export declare function useAutharaServices(): AutharaReactContextValue;
+export {};

package/dist/context.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, } from "react";
+import { AppleService, GoogleService } 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.
+ */
+export function AutharaProvider({ client, children, }) {
+    const value = useMemo(() => ({
+        apple: new AppleService(client),
+        google: new GoogleService(client),
+    }), [client]);
+    return (_jsx(AutharaContext.Provider, { value: value, children: children }));
+}
+export function useAutharaServices() {
+    const value = useContext(AutharaContext);
+    if (!value) {
+        throw new Error("Authara buttons must be rendered inside AutharaProvider.");
+    }
+    return value;
+}

package/dist/contract.d.ts

@@ -0,0 +1,20 @@
+export interface GoogleLoginOptions {
+    client_id: string;
+    nonce: string;
+}
+export interface AppleLoginOptions {
+    client_id: string;
+    redirect_uri: string;
+    state: 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.
+ */
+export interface AutharaReactClient {
+    getGoogleLoginOptions(): Promise<GoogleLoginOptions>;
+    getAppleLoginOptions(): Promise<AppleLoginOptions>;
+}
+export type MaybePromise<T> = T | Promise<T>;

package/dist/contract.js

@@ -0,0 +1 @@
+export {};

package/dist/errors.d.ts

@@ -0,0 +1,3 @@
+export declare function isProviderUnavailable(error: unknown): boolean;
+export declare function toError(error: unknown, fallback: string): Error;
+export declare function isAppleCancellation(error: unknown): boolean;

package/dist/errors.js

@@ -0,0 +1,25 @@
+export function isProviderUnavailable(error) {
+    return (typeof error === "object" &&
+        error !== null &&
+        "status" in error &&
+        error.status === 404);
+}
+export function toError(error, fallback) {
+    if (error instanceof Error)
+        return error;
+    if (typeof error === "object" &&
+        error !== null &&
+        "message" in error &&
+        typeof error.message === "string" &&
+        error.message.trim()) {
+        return new Error(error.message.trim());
+    }
+    return new Error(fallback);
+}
+export function isAppleCancellation(error) {
+    if (typeof error !== "object" || error === null || !("error" in error)) {
+        return false;
+    }
+    return (error.error === "user_cancelled_authorize" ||
+        error.error === "popup_closed_by_user");
+}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { AppleButton, type AppleButtonProps } from "./AppleButton.js";
+export { GoogleButton, type GoogleButtonProps } 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 { AppleAuthorization, GoogleCredential } from "./services.js";

package/dist/index.js

@@ -0,0 +1,4 @@
+export { AppleButton } from "./AppleButton.js";
+export { GoogleButton } from "./GoogleButton.js";
+export { AutharaProvider } from "./context.js";
+export { isAppleCancellation, isProviderUnavailable } from "./errors.js";

package/dist/provider-sdks.d.ts

@@ -0,0 +1,61 @@
+export type GoogleCredentialResponse = {
+    credential?: string;
+    select_by?: string;
+    state?: string;
+};
+export type GoogleButtonConfiguration = {
+    type?: "standard" | "icon";
+    theme?: "outline" | "filled_blue" | "filled_black";
+    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;
+        };
+    };
+};
+export type AppleConfig = {
+    clientId: string;
+    scope: "email";
+    redirectURI: string;
+    state: string;
+    nonce: string;
+    usePopup: true;
+};
+type AppleSignInResponse = {
+    authorization?: {
+        code?: string;
+        state?: string;
+    };
+};
+export type AppleAuth = {
+    init(options: AppleConfig): void;
+    renderButton(): void;
+    signIn(options?: AppleConfig): Promise<AppleSignInResponse>;
+};
+declare global {
+    interface Window {
+        google?: GoogleIdentity;
+        AppleID?: {
+            auth: AppleAuth;
+        };
+    }
+}
+export declare function loadGoogleIdentity(locale?: string): Promise<GoogleIdentity>;
+export declare function loadAppleIdentity(locale?: string): Promise<AppleAuth>;
+/** @internal Test isolation for module-level third-party script promises. */
+export declare function resetProviderSDKsForTests(): void;
+export {};

package/dist/provider-sdks.js

@@ -0,0 +1,72 @@
+const googleIdentityURL = "https://accounts.google.com/gsi/client";
+const appleIdentityBaseURL = "https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1";
+let googlePromise;
+let googleLocale;
+let applePromise;
+let appleLocale;
+function appendScript(url, resolveGlobal, failureMessage) {
+    return new Promise((resolve, reject) => {
+        const existing = document.querySelector(`script[src="${url}"]`);
+        const script = existing ?? document.createElement("script");
+        const loaded = () => {
+            const value = resolveGlobal();
+            if (value)
+                resolve(value);
+            else
+                reject(new Error(failureMessage));
+        };
+        const failed = () => reject(new Error(failureMessage));
+        script.addEventListener("load", loaded, { once: true });
+        script.addEventListener("error", failed, { once: true });
+        if (!existing) {
+            script.src = url;
+            script.async = true;
+            document.head.appendChild(script);
+        }
+    });
+}
+export function loadGoogleIdentity(locale) {
+    if (window.google?.accounts?.id)
+        return Promise.resolve(window.google);
+    if (googlePromise) {
+        if (locale !== googleLocale) {
+            return Promise.reject(new Error("Google Identity has already been loaded with another locale."));
+        }
+        return googlePromise;
+    }
+    googleLocale = locale;
+    const url = locale
+        ? `${googleIdentityURL}?hl=${encodeURIComponent(locale)}`
+        : googleIdentityURL;
+    googlePromise = appendScript(url, () => window.google, "Could not load Google Identity Services.").catch((error) => {
+        googlePromise = undefined;
+        googleLocale = undefined;
+        throw error;
+    });
+    return googlePromise;
+}
+export function loadAppleIdentity(locale = "en_US") {
+    if (window.AppleID?.auth)
+        return Promise.resolve(window.AppleID.auth);
+    if (applePromise) {
+        if (locale !== appleLocale) {
+            return Promise.reject(new Error("Sign in with Apple has already been loaded with another locale."));
+        }
+        return applePromise;
+    }
+    appleLocale = locale;
+    const url = `${appleIdentityBaseURL}/${encodeURIComponent(locale)}/appleid.auth.js`;
+    applePromise = appendScript(url, () => window.AppleID?.auth, "Could not load Sign in with Apple.").catch((error) => {
+        applePromise = undefined;
+        appleLocale = undefined;
+        throw error;
+    });
+    return applePromise;
+}
+/** @internal Test isolation for module-level third-party script promises. */
+export function resetProviderSDKsForTests() {
+    googlePromise = undefined;
+    googleLocale = undefined;
+    applePromise = undefined;
+    appleLocale = undefined;
+}

package/dist/services.d.ts

@@ -0,0 +1,34 @@
+import type { AutharaReactClient } from "./contract.js";
+import { type GoogleButtonConfiguration } from "./provider-sdks.js";
+export type GoogleCredential = {
+    credential: string;
+    nonce: string;
+    selectBy?: string;
+};
+export type AppleAuthorization = {
+    code: string;
+    state: string;
+};
+type GoogleHandler = (credential: GoogleCredential) => void;
+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>;
+    private options;
+    private sdk;
+}
+export declare class AppleService {
+    private readonly client;
+    private renderOptionsPromise?;
+    private renderQueue;
+    constructor(client: AutharaReactClient);
+    render(element: HTMLElement, locale: string): Promise<void>;
+    authorize(locale: string): Promise<AppleAuthorization>;
+    private renderOptions;
+    private renderOfficialButton;
+}
+export {};

package/dist/services.js

@@ -0,0 +1,120 @@
+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) {
+        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;
+            },
+        });
+        return () => {
+            this.handlers.delete(state);
+            if (this.activeState === state)
+                this.activeState = undefined;
+        };
+    }
+    options() {
+        this.optionsPromise ?? (this.optionsPromise = this.client
+            .getGoogleLoginOptions()
+            .catch((error) => {
+            this.optionsPromise = undefined;
+            throw error;
+        }));
+        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;
+        }));
+        return this.sdkPromise;
+    }
+}
+function appleConfig(options) {
+    return {
+        clientId: options.client_id,
+        scope: "email",
+        redirectURI: options.redirect_uri,
+        state: options.state,
+        nonce: options.nonce,
+        usePopup: true,
+    };
+}
+export class AppleService {
+    constructor(client) {
+        this.client = client;
+        this.renderQueue = Promise.resolve();
+    }
+    async render(element, locale) {
+        const [auth, options] = await Promise.all([
+            loadAppleIdentity(locale),
+            this.renderOptions(),
+        ]);
+        const rendering = this.renderQueue.then(() => this.renderOfficialButton(auth, options, element));
+        this.renderQueue = rendering.catch(() => undefined);
+        await rendering;
+    }
+    async authorize(locale) {
+        const [auth, options] = await Promise.all([
+            loadAppleIdentity(locale),
+            this.client.getAppleLoginOptions(),
+        ]);
+        const result = await auth.signIn(appleConfig(options));
+        const { code, state } = result.authorization ?? {};
+        if (!code || !state) {
+            throw new Error("Apple did not return an authorization code and state.");
+        }
+        return { code, state };
+    }
+    renderOptions() {
+        this.renderOptionsPromise ?? (this.renderOptionsPromise = this.client
+            .getAppleLoginOptions()
+            .catch((error) => {
+            this.renderOptionsPromise = undefined;
+            throw error;
+        }));
+        return this.renderOptionsPromise;
+    }
+    renderOfficialButton(auth, options, element) {
+        const existing = document.getElementById("appleid-signin");
+        existing?.removeAttribute("id");
+        element.id = "appleid-signin";
+        try {
+            auth.init(appleConfig(options));
+            auth.renderButton();
+        }
+        finally {
+            element.removeAttribute("id");
+        }
+    }
+}

package/package.json

@@ -1,6 +1,53 @@
 {
   "name": "@authara/react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.0.0",
+  "description": "Official React components for Authara browser authentication",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/authara-org/authara-react.git"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "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\"",
+    "test": "vitest run",
+    "prepublishOnly": "npm run check:contract && npm run build"
+  },
+  "peerDependencies": {
+    "@authara/browser": ">=0.6.0 <1.0.0",
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@authara/browser": "0.6.0",
+    "@eslint/js": "^9.39.2",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.54.0",
+    "@typescript-eslint/parser": "^8.54.0",
+    "eslint": "^9.39.2",
+    "happy-dom": "^20.4.0",
+    "prettier": "^3.8.1",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.54.0",
+    "vitest": "^4.0.18"
+  }
+}