@authara/react 0.0.1-trusted.3 → 0.2.0

package/dist/services.d.ts

@@ -1,23 +1,23 @@
 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;
     state: string;
 };
+export type MicrosoftCredential = {
+    credential: string;
+    nonce: 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>;
+    prepare(locale: string | undefined, handler: GoogleHandler, errorHandler: (error: Error) => void): Promise<() => void>;
     private options;
     private sdk;
 }
@@ -31,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

@@ -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;
     }
 }
@@ -118,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.0.1-trusted.3",
+  "version": "0.2.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.11.0 <0.12.0",
     "react": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@authara/browser": "0.6.0",
+    "@authara/browser": "0.11.0",
     "@eslint/js": "^9.39.2",
     "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.14",
@@ -48,6 +53,11 @@
     "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"
+  },
+  "dependencies": {
+    "@azure/msal-browser": "^5.25.0"
   }
 }