@versini/auth0-react-thin 2.22.1 → 2.24.0

package/dist/auth0-react.esm.js

@@ -1,4 +1,6 @@
-import React, { createContext, useState, useReducer, useRef, useCallback, useEffect, useMemo, useContext } from 'react';
+'use client';
+import * as React from 'react';
+import React__default, { createContext, useState, useReducer, useRef, useCallback, useEffect, useMemo, useContext } from 'react';
 import { Auth0Client, ResponseType } from '@auth0/auth0-spa-js';
 export { AuthenticationError, ConnectError, GenericError, InMemoryCache, InvalidConfigurationError, LocalStorageCache, MfaChallengeError, MfaEnrollmentError, MfaEnrollmentFactorsError, MfaError, MfaListAuthenticatorsError, MfaRequiredError, MfaVerifyError, MissingRefreshTokenError, MissingScopesError, MyAccountApiError, PasskeyChallengeError, PasskeyError, PasskeyGetTokenError, PasskeyRegisterError, PopupCancelledError, PopupOpenError, PopupTimeoutError, RefreshTokenMode, ResponseType, TimeoutError, UseDpopNonceError, User } from '@auth0/auth0-spa-js';
 
@@ -254,7 +256,7 @@ var toAuth0ClientOptions = function (opts) {
     deprecateRedirectUri(opts);
     return __assign(__assign({}, opts), { auth0Client: {
             name: 'auth0-react',
-            version: '2.22.1',
+            version: '2.24.0',
         } });
 };
 /**
@@ -264,6 +266,22 @@ var defaultOnRedirectCallback = function (appState) {
     var _a;
     window.history.replaceState({}, document.title, (_a = appState.returnTo) !== null && _a !== void 0 ? _a : window.location.pathname);
 };
+/**
+ * @ignore
+ */
+var createInitDeferred = function () {
+    var resolve;
+    var reject;
+    var promise = new Promise(function (res, rej) {
+        resolve = res;
+        reject = rej;
+    });
+    // Avoid unhandled-rejection warnings when no one is consuming the promise
+    // (i.e. useAuth0Suspense is not used). useAuth0Suspense attaches its own
+    // handler via use().
+    promise.catch(function () { return undefined; });
+    return { promise: promise, resolve: resolve, reject: reject };
+};
 /**
  * ```jsx
  * <Auth0Provider
@@ -275,6 +293,11 @@ var defaultOnRedirectCallback = function (appState) {
  * ```
  *
  * Provides the Auth0Context to its child components.
+ *
+ * The SDK is a client-only module (its published ESM and CommonJS bundles ship the
+ * `'use client'` directive), so in a Next.js App Router app you can import and render
+ * `Auth0Provider` directly from a Server Component such as `app/layout.tsx`.
+ * Components that call hooks like `useAuth0` must still be Client Components.
  */
 var Auth0Provider = function (opts) {
     var _a = opts, children = _a.children, skipRedirectCallback = _a.skipRedirectCallback, _b = _a.onRedirectCallback, onRedirectCallback = _b === void 0 ? defaultOnRedirectCallback : _b, _c = _a.context, context = _c === void 0 ? Auth0Context : _c, providedClient = _a.client, clientOpts = __rest(_a, ["children", "skipRedirectCallback", "onRedirectCallback", "context", "client"]);
@@ -285,55 +308,94 @@ var Auth0Provider = function (opts) {
     }
     var client = useState(function () { return providedClient !== null && providedClient !== void 0 ? providedClient : new Auth0Client(toAuth0ClientOptions(clientOpts)); })[0];
     var _d = useReducer((reducer), initialAuthState), state = _d[0], dispatch = _d[1];
+    // In state so the init retry below can swap in a fresh, non-rejected promise.
+    // Without that swap the first rejection would re-throw on every later render,
+    // making Error Boundary retries useless.
+    var _e = useState(createInitDeferred), initDeferred = _e[0], setInitDeferred = _e[1];
+    // Set only once initialization has genuinely rejected. State, not a ref, so
+    // the retry effect re-evaluates when init fails *after* the app has become
+    // authenticated by some other means.
+    var _f = useState(false), initFailed = _f[0], setInitFailed = _f[1];
+    // Guards against retrying more than once: a retry that also fails would
+    // otherwise re-trigger the effect for as long as the user stays signed in.
+    var initRetried = useRef(false);
     var didInitialise = useRef(false);
     var handleError = useCallback(function (error) {
         dispatch({ type: 'ERROR', error: error });
         return error;
     }, []);
+    // Settles `deferred` according to what initialization actually did, so
+    // `_initPromise` never claims success that did not happen. `allowRedirect`
+    // is false on a retry: the redirect callback is single-use, so a retry can
+    // only re-verify the session.
+    var runInit = useCallback(function (deferred, allowRedirect) { return __awaiter(void 0, void 0, void 0, function () {
+        var user, _a, _b, appState, response_type, result, error_1, err;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    _c.trys.push([0, 7, , 8]);
+                    user = void 0;
+                    if (!(allowRedirect && hasAuthParams() && !skipRedirectCallback)) return [3 /*break*/, 3];
+                    return [4 /*yield*/, client.handleRedirectCallback()];
+                case 1:
+                    _a = _c.sent(), _b = _a.appState, appState = _b === void 0 ? {} : _b, response_type = _a.response_type, result = __rest(_a, ["appState", "response_type"]);
+                    return [4 /*yield*/, client.getUser()];
+                case 2:
+                    user = _c.sent();
+                    appState.response_type = response_type;
+                    if (response_type === ResponseType.ConnectCode) {
+                        appState.connectedAccount = result;
+                    }
+                    onRedirectCallback(appState, user);
+                    return [3 /*break*/, 6];
+                case 3: return [4 /*yield*/, client.checkSession()];
+                case 4:
+                    _c.sent();
+                    return [4 /*yield*/, client.getUser()];
+                case 5:
+                    user = _c.sent();
+                    _c.label = 6;
+                case 6:
+                    dispatch({ type: 'INITIALISED', user: user });
+                    deferred.resolve();
+                    return [3 /*break*/, 8];
+                case 7:
+                    error_1 = _c.sent();
+                    err = loginError(error_1);
+                    handleError(err);
+                    setInitFailed(true);
+                    deferred.reject(err);
+                    return [3 /*break*/, 8];
+                case 8: return [2 /*return*/];
+            }
+        });
+    }); }, [client, onRedirectCallback, skipRedirectCallback, handleError]);
     useEffect(function () {
         if (didInitialise.current) {
             return;
         }
         didInitialise.current = true;
-        (function () { return __awaiter(void 0, void 0, void 0, function () {
-            var user, _a, _b, appState, response_type, result, error_1;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
-                    case 0:
-                        _c.trys.push([0, 7, , 8]);
-                        user = void 0;
-                        if (!(hasAuthParams() && !skipRedirectCallback)) return [3 /*break*/, 3];
-                        return [4 /*yield*/, client.handleRedirectCallback()];
-                    case 1:
-                        _a = _c.sent(), _b = _a.appState, appState = _b === void 0 ? {} : _b, response_type = _a.response_type, result = __rest(_a, ["appState", "response_type"]);
-                        return [4 /*yield*/, client.getUser()];
-                    case 2:
-                        user = _c.sent();
-                        appState.response_type = response_type;
-                        if (response_type === ResponseType.ConnectCode) {
-                            appState.connectedAccount = result;
-                        }
-                        onRedirectCallback(appState, user);
-                        return [3 /*break*/, 6];
-                    case 3: return [4 /*yield*/, client.checkSession()];
-                    case 4:
-                        _c.sent();
-                        return [4 /*yield*/, client.getUser()];
-                    case 5:
-                        user = _c.sent();
-                        _c.label = 6;
-                    case 6:
-                        dispatch({ type: 'INITIALISED', user: user });
-                        return [3 /*break*/, 8];
-                    case 7:
-                        error_1 = _c.sent();
-                        handleError(loginError(error_1));
-                        return [3 /*break*/, 8];
-                    case 8: return [2 /*return*/];
-                }
-            });
-        }); })();
-    }, [client, onRedirectCallback, skipRedirectCallback, handleError]);
+        // Always the first deferred: `didInitialise` means this only ever runs once,
+        // so a later swap by the retry effect re-runs this effect but returns above.
+        void runInit(initDeferred, true);
+    }, [runInit, initDeferred]);
+    // A rejected promise stays rejected forever, so React.use() would re-throw on
+    // every later render and an Error Boundary retry could never recover. Once
+    // init has failed but the app has since become authenticated by some other
+    // means (loginWithPopup, a silent token, a passkey login), re-run the session
+    // check against a fresh deferred. The promise then reflects a real
+    // checkSession() outcome rather than an assumption that things are fine --
+    // if the session is still bad it rejects again and the boundary keeps showing
+    // the error.
+    useEffect(function () {
+        if (!initFailed || initRetried.current || !state.isAuthenticated) {
+            return;
+        }
+        initRetried.current = true;
+        var retry = createInitDeferred();
+        setInitDeferred(retry);
+        void runInit(retry, false);
+    }, [initFailed, state.isAuthenticated, runInit]);
     var loginWithRedirect = useCallback(function (opts) {
         deprecateRedirectUri(opts);
         return client.loginWithRedirect(opts);
@@ -617,7 +679,7 @@ var Auth0Provider = function (opts) {
     }); }, [client]);
     var passkey = useMemo(function () { return ({ signup: passkeySignup, login: passkeyLogin }); }, [passkeySignup, passkeyLogin]);
     var contextValue = useMemo(function () {
-        return __assign(__assign({}, state), { getAccessTokenSilently: getAccessTokenSilently, getAccessTokenWithPopup: getAccessTokenWithPopup, getIdTokenClaims: getIdTokenClaims, loginWithCustomTokenExchange: loginWithCustomTokenExchange, customTokenExchange: customTokenExchange, exchangeToken: exchangeToken, loginWithRedirect: loginWithRedirect, loginWithPopup: loginWithPopup, connectAccountWithRedirect: connectAccountWithRedirect, logout: logout, revokeRefreshToken: revokeRefreshToken, handleRedirectCallback: handleRedirectCallback, getDpopNonce: getDpopNonce, setDpopNonce: setDpopNonce, generateDpopProof: generateDpopProof, createFetcher: createFetcher, getConfiguration: getConfiguration, mfa: mfa, passkey: passkey, myAccount: myAccount });
+        return __assign(__assign({}, state), { getAccessTokenSilently: getAccessTokenSilently, getAccessTokenWithPopup: getAccessTokenWithPopup, getIdTokenClaims: getIdTokenClaims, loginWithCustomTokenExchange: loginWithCustomTokenExchange, customTokenExchange: customTokenExchange, exchangeToken: exchangeToken, loginWithRedirect: loginWithRedirect, loginWithPopup: loginWithPopup, connectAccountWithRedirect: connectAccountWithRedirect, logout: logout, revokeRefreshToken: revokeRefreshToken, handleRedirectCallback: handleRedirectCallback, getDpopNonce: getDpopNonce, setDpopNonce: setDpopNonce, generateDpopProof: generateDpopProof, createFetcher: createFetcher, getConfiguration: getConfiguration, mfa: mfa, passkey: passkey, myAccount: myAccount, _initPromise: initDeferred.promise });
     }, [
         state,
         getAccessTokenSilently,
@@ -640,8 +702,9 @@ var Auth0Provider = function (opts) {
         mfa,
         passkey,
         myAccount,
+        initDeferred,
     ]);
-    return React.createElement(context.Provider, { value: contextValue }, children);
+    return React__default.createElement(context.Provider, { value: contextValue }, children);
 };
 
 /**
@@ -673,6 +736,50 @@ var useAuth0 = function (context) {
     return useContext(context);
 };
 
+/**
+ * ```jsx
+ * <Suspense fallback={<Spinner />}>
+ *   <Profile />
+ * </Suspense>
+ *
+ * function Profile() {
+ *   const { user, isAuthenticated } = useAuth0Suspense();
+ *   return isAuthenticated ? <p>Hello {user.name}</p> : <p>Please log in</p>;
+ * }
+ * ```
+ *
+ * Suspense-enabled variant of `useAuth0`. Suspends the component until Auth0
+ * initialization completes (letting the nearest `<Suspense>` fallback render),
+ * and throws initialization errors so the nearest Error Boundary can handle
+ * them. Requires React 19 or later.
+ *
+ * If initialization fails and the app later becomes authenticated by other
+ * means, the session is re-checked once; retrying the Error Boundary then
+ * renders if that check succeeded, or throws again if it did not.
+ *
+ * TUser is an optional type param to provide a type to the `user` field.
+ */
+var useAuth0Suspense = function (context) {
+    if (context === void 0) { context = Auth0Context; }
+    if (typeof React.use !== 'function') {
+        throw new Error('useAuth0Suspense requires React 19 or later (React.use is unavailable).');
+    }
+    var ctx = React.useContext(context);
+    if (!ctx._initPromise) {
+        throw new Error('useAuth0Suspense must be used within an <Auth0Provider>.');
+    }
+    // Suspends until the init promise resolves; re-throws if it rejected.
+    React.use(ctx._initPromise);
+    // Memoized so the returned object is referentially stable across renders,
+    // matching useAuth0, which hands back the provider's memoized context.
+    // Without this, `useEffect(..., [auth])` in a consumer re-runs every render.
+    return React.useMemo(function () {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        ctx.isLoading; ctx._initPromise; var rest = __rest(ctx, ["isLoading", "_initPromise"]);
+        return rest;
+    }, [ctx]);
+};
+
 /**
  * ```jsx
  * class MyComponent extends Component {
@@ -694,14 +801,14 @@ var useAuth0 = function (context) {
 var withAuth0 = function (Component, context) {
     if (context === void 0) { context = Auth0Context; }
     return function WithAuth(props) {
-        return (React.createElement(context.Consumer, null, function (auth) { return (React.createElement(Component, __assign({}, props, { auth0: auth }))); }));
+        return (React__default.createElement(context.Consumer, null, function (auth) { return (React__default.createElement(Component, __assign({}, props, { auth0: auth }))); }));
     };
 };
 
 /**
  * @ignore
  */
-var defaultOnRedirecting = function () { return React.createElement(React.Fragment, null); };
+var defaultOnRedirecting = function () { return React__default.createElement(React__default.Fragment, null); };
 /**
 * @ignore
 */
@@ -712,7 +819,12 @@ var defaultOnBeforeAuthentication = function () { return __awaiter(void 0, void
  * @ignore
  */
 var defaultReturnTo = function () {
-    return "".concat(window.location.pathname).concat(window.location.search);
+    // Normalize the pathname to prevent protocol-relative open redirects.
+    // A URL like https://app.example.com//evil.com produces a pathname of
+    // //evil.com, which routers (react-router, next.js, gatsby) interpret as a
+    // protocol-relative URL and redirect the user to an external host.
+    var pathname = window.location.pathname.replace(/^\/\/+/, '/');
+    return "".concat(pathname).concat(window.location.search);
 };
 /**
  * ```js
@@ -754,9 +866,9 @@ var withAuthenticationRequired = function (Component, options) {
             loginOptions,
             returnTo,
         ]);
-        return isAuthenticated ? React.createElement(Component, __assign({}, props)) : onRedirecting();
+        return isAuthenticated ? React__default.createElement(Component, __assign({}, props)) : onRedirecting();
     };
 };
 
-export { Auth0Context, Auth0Provider, OAuthError, initialContext, useAuth0, withAuth0, withAuthenticationRequired };
+export { Auth0Context, Auth0Provider, OAuthError, initialContext, useAuth0, useAuth0Suspense, withAuth0, withAuthenticationRequired };
 //# sourceMappingURL=auth0-react.esm.js.map