@meshagent/meshagent-react-auth 0.36.3 → 0.37.0

package/dist/cjs/use-login-scope.js

@@ -1,227 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildOAuthAuthorizeUrl = buildOAuthAuthorizeUrl;
 exports.useLoginScope = useLoginScope;
-const react_1 = require("react");
-const react_query_1 = require("@tanstack/react-query");
-const meshagent_ts_auth_1 = require("@meshagent/meshagent-ts-auth");
-const use_meshagent_auth_1 = require("./use-meshagent-auth");
-function toUrl(value) {
-    return value instanceof URL ? value : new URL(value);
-}
-class UserProfileFetchError extends Error {
-    constructor(status, message) {
-        super(message);
-        Object.defineProperty(this, "status", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        this.name = "UserProfileFetchError";
-        this.status = status;
-    }
-}
-function isAuthProfileError(error) {
-    return error instanceof UserProfileFetchError
-        && (error.status === 401 || error.status === 403);
-}
-async function fetchUserProfile(params) {
-    const response = await fetch(new URL("/accounts/profiles/me", toUrl(params.serverUrl)), {
-        signal: params.signal,
-        headers: {
-            "Authorization": `Bearer ${params.accessToken}`,
-            "Accept": "application/json",
-        },
-    });
-    if (!response.ok) {
-        throw new UserProfileFetchError(response.status, `Failed to fetch user profile: ${response.status} ${await response.text()}`);
-    }
-    return await response.json();
-}
-function serializeExtraQueryParams(extraQueryParams) {
-    return JSON.stringify(Object.entries(extraQueryParams ?? {}).sort(([left], [right]) => left.localeCompare(right)));
-}
-async function buildOAuthAuthorizeUrl(params) {
-    const serverUrl = toUrl(params.serverUrl);
-    const callbackUrl = toUrl(params.callbackUrl);
-    const generator = new meshagent_ts_auth_1.PkceGenerator();
-    const pair = await generator.generate();
-    const cache = new meshagent_ts_auth_1.LocalStoragePkceCache(params.storage ?? (0, meshagent_ts_auth_1.getDefaultStorage)());
-    await cache.saveVerifier(pair.codeVerifier);
-    const query = new URLSearchParams({
-        ...(params.extraQueryParams ?? {}),
-        scope: params.scope ?? "profile",
-        client_id: params.oauthClientId,
-        code_challenge: pair.codeChallenge,
-        response_type: "code",
-        redirect_uri: callbackUrl.toString(),
-        prompt: "select_account",
-    });
-    if (params.provider) {
-        query.set("provider", params.provider);
-    }
-    return new URL(`/oauth/authorize?${query.toString()}`, serverUrl);
-}
-async function launchSignIn(params) {
-    const authorizeUrl = await buildOAuthAuthorizeUrl({
-        serverUrl: params.serverUrl,
-        callbackUrl: params.callbackUrl,
-        oauthClientId: params.oauthClientId,
-        scope: params.scope,
-        provider: params.provider,
-        extraQueryParams: params.extraQueryParams,
-        storage: params.storage,
-    });
-    if (typeof window === "undefined") {
-        throw new Error("LoginScope requires a browser environment");
-    }
-    window.location.assign(authorizeUrl.toString());
-}
-function useLoginScope(options) {
-    const storage = options.storage ?? (0, meshagent_ts_auth_1.getDefaultStorage)();
-    const auth = options.auth ?? meshagent_ts_auth_1.meshagentAuth;
-    const authSnapshot = (0, use_meshagent_auth_1.useMeshagentAuth)(auth);
-    const session = (0, react_1.useMemo)(() => new meshagent_ts_auth_1.OAuthSessionManager({
-        serverUrl: options.serverUrl,
-        clientId: options.oauthClientId,
-        auth,
-    }), [auth, options.oauthClientId, options.serverUrl]);
-    const autoSignIn = options.autoSignIn ?? true;
-    const extraQueryParamsKey = (0, react_1.useMemo)(() => serializeExtraQueryParams(options.extraQueryParams), [options.extraQueryParams]);
-    const [signInFailed, setSignInFailed] = (0, react_1.useState)(null);
-    const [isSigningIn, setIsSigningIn] = (0, react_1.useState)(false);
-    const [isCancelled, setIsCancelled] = (0, react_1.useState)(false);
-    const [refreshVersion, setRefreshVersion] = (0, react_1.useState)(0);
-    const signIn = async (provider) => {
-        setIsSigningIn(true);
-        setSignInFailed(null);
-        setIsCancelled(false);
-        try {
-            await launchSignIn({
-                serverUrl: options.serverUrl,
-                callbackUrl: options.callbackUrl,
-                oauthClientId: options.oauthClientId,
-                scope: options.scope,
-                provider,
-                extraQueryParams: options.extraQueryParams,
-                storage,
-            });
-        }
-        catch (error) {
-            setSignInFailed(error);
-            setIsSigningIn(false);
-        }
-    };
-    const loginQuery = (0, react_query_1.useQuery)({
-        queryKey: [
-            "login-scope",
-            toUrl(options.serverUrl).toString(),
-            toUrl(options.callbackUrl).toString(),
-            options.oauthClientId,
-            options.scope ?? "profile",
-            extraQueryParamsKey,
-            autoSignIn,
-            authSnapshot.accessToken,
-            refreshVersion,
-        ],
-        retry: false,
-        refetchOnReconnect: false,
-        refetchOnWindowFocus: false,
-        queryFn: async ({ signal }) => {
-            if (!authSnapshot.accessToken) {
-                setSignInFailed(null);
-                if (autoSignIn) {
-                    setIsSigningIn(true);
-                    try {
-                        await launchSignIn({
-                            serverUrl: options.serverUrl,
-                            callbackUrl: options.callbackUrl,
-                            oauthClientId: options.oauthClientId,
-                            scope: options.scope,
-                            provider: null,
-                            extraQueryParams: options.extraQueryParams,
-                            storage,
-                        });
-                        return {
-                            failed: null,
-                            isLoginLaunched: false,
-                        };
-                    }
-                    catch (error) {
-                        setIsSigningIn(false);
-                        return {
-                            failed: error,
-                            isLoginLaunched: true,
-                        };
-                    }
-                }
-                setIsSigningIn(false);
-                return {
-                    failed: null,
-                    isLoginLaunched: true,
-                };
-            }
-            let accessToken;
-            try {
-                accessToken = await session.getValidAccessTokenOrThrow();
-            }
-            catch (error) {
-                auth.signOut();
-                setIsSigningIn(false);
-                return {
-                    failed: error,
-                    isLoginLaunched: true,
-                };
-            }
-            try {
-                const user = await fetchUserProfile({
-                    serverUrl: options.serverUrl,
-                    accessToken,
-                    signal,
-                });
-                auth.setUser(user);
-                setSignInFailed(null);
-                setIsSigningIn(false);
-                return {
-                    failed: null,
-                    isLoginLaunched: false,
-                };
-            }
-            catch (error) {
-                setIsSigningIn(false);
-                if (isAuthProfileError(error)) {
-                    auth.signOut();
-                    return {
-                        failed: error,
-                        isLoginLaunched: true,
-                    };
-                }
-                return {
-                    failed: error,
-                    isLoginLaunched: false,
-                };
-            }
-        },
+const use_auth_1 = require("./use-auth");
+function useLoginScope(props) {
+    return (0, use_auth_1.useAuth)({
+        ...props,
+        scope: props.scope ?? "email",
     });
-    const refresh = () => {
-        setSignInFailed(null);
-        setIsCancelled(false);
-        setRefreshVersion((version) => version + 1);
-    };
-    const failed = signInFailed ?? (loginQuery.isFetching ? null : loginQuery.data?.failed ?? null);
-    const isLoginLaunched = signInFailed !== null
-        ? true
-        : loginQuery.data?.isLoginLaunched ?? false;
-    const refreshing = loginQuery.isPending || loginQuery.isFetching;
-    return {
-        failed,
-        isCancelled,
-        isSigningIn,
-        refreshing,
-        user: authSnapshot.user,
-        signIn,
-        refresh,
-        isLoginLaunched,
-    };
 }

package/dist/esm/index.d.ts

@@ -1,4 +1,5 @@
-export { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 export * from "./mauth-response";
+export * from "./use-auth";
+export * from "./use-ensure-login";
 export * from "./use-login-scope";
 export * from "./use-meshagent-auth";

package/dist/esm/index.js

@@ -1,4 +1,5 @@
-export { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 export * from "./mauth-response";
+export * from "./use-auth";
+export * from "./use-ensure-login";
 export * from "./use-login-scope";
 export * from "./use-meshagent-auth";

package/dist/esm/mauth-response.d.ts

@@ -1,10 +1,18 @@
-import type { MAuthResponseProps } from "@meshagent/meshagent-ts-auth";
+import type { StorageLike, MeshagentAuth } from "@meshagent/meshagent-ts-auth";
 declare enum UseMAuthResponseStatus {
     Idle = "idle",
     Loading = "loading",
     Success = "success",
     Error = "error"
 }
+export interface MAuthResponseProps {
+    serverUrl?: string | URL;
+    callbackUrl: string | URL;
+    oauthClientId: string;
+    authorizationCode?: string;
+    storage?: StorageLike;
+    auth?: MeshagentAuth;
+}
 export interface MAuthResponse {
     status: UseMAuthResponseStatus;
     error: string | null;

package/dist/esm/mauth-response.js

@@ -1,8 +1,10 @@
-import { useQuery } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
 import { getAuthorizationCode, exchangeToken } from "@meshagent/meshagent-ts-auth";
+import { getReferenceKey } from "./reference-key";
 function toUrl(value) {
     return value instanceof URL ? value : new URL(value);
 }
+const inFlightTokenExchanges = new Map();
 var UseMAuthResponseStatus;
 (function (UseMAuthResponseStatus) {
     UseMAuthResponseStatus["Idle"] = "idle";
@@ -10,50 +12,88 @@ var UseMAuthResponseStatus;
     UseMAuthResponseStatus["Success"] = "success";
     UseMAuthResponseStatus["Error"] = "error";
 })(UseMAuthResponseStatus || (UseMAuthResponseStatus = {}));
-function toStatus(hasAuthCode, tokenExchangeQuery) {
-    if (!hasAuthCode) {
-        return UseMAuthResponseStatus.Idle;
-    }
-    if (tokenExchangeQuery.isPending) {
-        return UseMAuthResponseStatus.Loading;
-    }
-    if (tokenExchangeQuery.isError) {
-        return UseMAuthResponseStatus.Error;
+function buildTokenExchangeKey(params) {
+    return JSON.stringify([
+        params.serverUrl,
+        params.callbackUrl,
+        params.oauthClientId,
+        params.code,
+        params.storageKey,
+        params.authKey,
+    ]);
+}
+function toErrorMessage(error) {
+    if (error instanceof Error) {
+        return error.message;
     }
-    return UseMAuthResponseStatus.Success;
+    return String(error);
 }
 ;
 export function useMAuthResponse({ serverUrl, callbackUrl, oauthClientId, authorizationCode, storage, auth, }) {
+    const serverUrlKey = toUrl(serverUrl ?? "http://api.meshcentral.com").toString();
+    const callbackUrlKey = toUrl(callbackUrl).toString();
     const code = authorizationCode ?? getAuthorizationCode() ?? undefined;
-    const tokenExchangeQuery = useQuery({
-        queryKey: [
-            "mauth-response",
-            toUrl(serverUrl).toString(),
-            toUrl(callbackUrl).toString(),
+    const [status, setStatus] = useState(code === undefined ? UseMAuthResponseStatus.Idle : UseMAuthResponseStatus.Loading);
+    const [error, setError] = useState(null);
+    const tokenExchangeKey = code === undefined
+        ? null
+        : buildTokenExchangeKey({
+            serverUrl: serverUrlKey,
+            callbackUrl: callbackUrlKey,
             oauthClientId,
             code,
-        ],
-        enabled: code !== undefined,
-        retry: false,
-        refetchOnReconnect: false,
-        refetchOnWindowFocus: false,
-        queryFn: async ({ signal }) => {
-            if (code === undefined) {
-                throw new Error("Missing authorization code");
-            }
-            await exchangeToken({
-                serverUrl,
+            storageKey: getReferenceKey(storage, "default-storage"),
+            authKey: getReferenceKey(auth, "default-auth"),
+        });
+    useEffect(() => {
+        if (code === undefined || tokenExchangeKey === null) {
+            setStatus(UseMAuthResponseStatus.Idle);
+            setError(null);
+            return;
+        }
+        let cancelled = false;
+        setStatus(UseMAuthResponseStatus.Loading);
+        setError(null);
+        let tokenExchange = inFlightTokenExchanges.get(tokenExchangeKey);
+        if (!tokenExchange) {
+            tokenExchange = exchangeToken({
+                serverUrl: serverUrlKey,
                 callbackUrl,
                 oauthClientId,
                 authorizationCode: code,
                 storage,
                 auth,
-            }, signal);
-            return null;
-        },
-    });
-    return {
-        status: toStatus(code !== undefined, tokenExchangeQuery),
-        error: tokenExchangeQuery.error?.message ?? null,
-    };
+            }).finally(() => {
+                inFlightTokenExchanges.delete(tokenExchangeKey);
+            });
+            inFlightTokenExchanges.set(tokenExchangeKey, tokenExchange);
+        }
+        tokenExchange
+            .then(() => {
+            if (cancelled) {
+                return;
+            }
+            setStatus(UseMAuthResponseStatus.Success);
+            setError(null);
+        })
+            .catch((exchangeError) => {
+            if (cancelled) {
+                return;
+            }
+            setStatus(UseMAuthResponseStatus.Error);
+            setError(toErrorMessage(exchangeError));
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [
+        auth,
+        callbackUrl,
+        code,
+        oauthClientId,
+        serverUrl,
+        storage,
+        tokenExchangeKey,
+    ]);
+    return { status, error };
 }

package/dist/esm/reference-key.d.ts

@@ -0,0 +1 @@
+export declare function getReferenceKey(value: object | null | undefined, fallback: string): string;

package/dist/esm/reference-key.js

@@ -0,0 +1,15 @@
+const objectIds = new WeakMap();
+let nextObjectId = 1;
+export function getReferenceKey(value, fallback) {
+    if (!value) {
+        return fallback;
+    }
+    const existing = objectIds.get(value);
+    if (existing !== undefined) {
+        return `${fallback}:${existing}`;
+    }
+    const id = nextObjectId;
+    nextObjectId += 1;
+    objectIds.set(value, id);
+    return `${fallback}:${id}`;
+}

package/dist/esm/use-auth.d.ts

@@ -0,0 +1,35 @@
+import { MeshagentAuth } from "@meshagent/meshagent-ts-auth";
+import type { StorageLike, MeshagentUser } from "@meshagent/meshagent-ts-auth";
+export declare function buildOAuthAuthorizeUrl(params: {
+    serverUrl: string | URL;
+    callbackUrl: string | URL;
+    oauthClientId: string;
+    scope?: string;
+    provider?: string | null;
+    extraQueryParams?: Record<string, string>;
+    storage?: StorageLike;
+}): Promise<URL>;
+export interface AuthRenderProps {
+    failed: unknown;
+    isCancelled: boolean;
+    isSigningIn: boolean;
+    refreshing: boolean;
+    user: MeshagentUser | null;
+    signIn: (provider?: string | null) => Promise<void>;
+    refresh: () => void;
+}
+export interface UseAuthProps {
+    serverUrl?: string | URL;
+    callbackUrl?: string | URL;
+    oauthClientId: string;
+    scope?: string;
+    provider?: string;
+    extraQueryParams?: Record<string, string>;
+    storage?: StorageLike;
+    auth?: MeshagentAuth;
+    autoSignIn?: boolean;
+}
+export interface UseAuthResult extends AuthRenderProps {
+    isLoginLaunched: boolean;
+}
+export declare function useAuth(props: UseAuthProps): UseAuthResult;