@versini/auth0-react-thin 2.23.0 → 2.24.0

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { default as Auth0Provider, Auth0ProviderOptions, Auth0ProviderWithConfigOptions, Auth0ProviderWithClientOptions, AppState, ConnectedAccount } from './auth0-provider';
 export { default as useAuth0 } from './use-auth0';
+export { default as useAuth0Suspense, Auth0SuspenseContextInterface, } from './use-auth0-suspense';
 export { default as withAuth0, WithAuth0Props } from './with-auth0';
 export { default as withAuthenticationRequired, WithAuthenticationRequiredOptions, } from './with-authentication-required';
 export { default as Auth0Context, Auth0ContextInterface, initialContext, LogoutOptions, RedirectLoginOptions, } from './auth0-context';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,IAAI,aAAa,EACxB,oBAAoB,EACpB,8BAA8B,EAC9B,8BAA8B,EAC9B,QAAQ,EACR,gBAAgB,EACjB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,EACL,OAAO,IAAI,0BAA0B,EACrC,iCAAiC,GAClC,MAAM,gCAAgC,CAAC;AACxC,OAAO,EACL,OAAO,IAAI,YAAY,EACvB,qBAAqB,EACrB,cAAc,EACd,aAAa,EACb,oBAAoB,GACrB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,mBAAmB,EACnB,iBAAiB,EACjB,kBAAkB,EAClB,wBAAwB,EACxB,gBAAgB,EAChB,aAAa,EACb,uBAAuB,EACvB,OAAO,EACP,IAAI,EACJ,MAAM,EACN,aAAa,EACb,iBAAiB,EACjB,SAAS,EACT,YAAY,EACZ,gBAAgB,EAChB,mBAAmB,EACnB,iBAAiB,EACjB,cAAc,EACd,mBAAmB,EACnB,wBAAwB,EACxB,kBAAkB,EAClB,yBAAyB,EACzB,YAAY,EACZ,iBAAiB,EACjB,6BAA6B,EAC7B,4BAA4B,EAC5B,YAAY,EACZ,YAAY,EACZ,0BAA0B,EAC1B,qBAAqB,EACrB,QAAQ,EACR,mBAAmB,EACnB,gBAAgB,EAEhB,QAAQ,EACR,0BAA0B,EAC1B,kBAAkB,EAClB,iBAAiB,EACjB,cAAc,EACd,yBAAyB,EAEzB,YAAY,EACZ,oBAAoB,EACpB,qBAAqB,EACrB,oBAAoB,EAEpB,iBAAiB,GAClB,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EACV,yBAAyB,EACzB,aAAa,EACb,uBAAuB,EAEvB,YAAY,EACZ,aAAa,EACb,aAAa,EACb,YAAY,EACZ,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,EAClB,4BAA4B,EAC5B,iBAAiB,EACjB,YAAY,EACZ,gBAAgB,EAEhB,gBAAgB,EAChB,oBAAoB,EACpB,mBAAmB,EAEnB,kBAAkB,EAClB,oBAAoB,EACpB,wBAAwB,EACxB,MAAM,EACN,iCAAiC,EACjC,0BAA0B,EAC1B,2BAA2B,EAC3B,uBAAuB,GACxB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,IAAI,aAAa,EACxB,oBAAoB,EACpB,8BAA8B,EAC9B,8BAA8B,EAC9B,QAAQ,EACR,gBAAgB,EACjB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EACL,OAAO,IAAI,gBAAgB,EAC3B,6BAA6B,GAC9B,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,EACL,OAAO,IAAI,0BAA0B,EACrC,iCAAiC,GAClC,MAAM,gCAAgC,CAAC;AACxC,OAAO,EACL,OAAO,IAAI,YAAY,EACvB,qBAAqB,EACrB,cAAc,EACd,aAAa,EACb,oBAAoB,GACrB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,mBAAmB,EACnB,iBAAiB,EACjB,kBAAkB,EAClB,wBAAwB,EACxB,gBAAgB,EAChB,aAAa,EACb,uBAAuB,EACvB,OAAO,EACP,IAAI,EACJ,MAAM,EACN,aAAa,EACb,iBAAiB,EACjB,SAAS,EACT,YAAY,EACZ,gBAAgB,EAChB,mBAAmB,EACnB,iBAAiB,EACjB,cAAc,EACd,mBAAmB,EACnB,wBAAwB,EACxB,kBAAkB,EAClB,yBAAyB,EACzB,YAAY,EACZ,iBAAiB,EACjB,6BAA6B,EAC7B,4BAA4B,EAC5B,YAAY,EACZ,YAAY,EACZ,0BAA0B,EAC1B,qBAAqB,EACrB,QAAQ,EACR,mBAAmB,EACnB,gBAAgB,EAEhB,QAAQ,EACR,0BAA0B,EAC1B,kBAAkB,EAClB,iBAAiB,EACjB,cAAc,EACd,yBAAyB,EAEzB,YAAY,EACZ,oBAAoB,EACpB,qBAAqB,EACrB,oBAAoB,EAEpB,iBAAiB,GAClB,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EACV,yBAAyB,EACzB,aAAa,EACb,uBAAuB,EAEvB,YAAY,EACZ,aAAa,EACb,aAAa,EACb,YAAY,EACZ,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,EAClB,4BAA4B,EAC5B,iBAAiB,EACjB,YAAY,EACZ,gBAAgB,EAEhB,gBAAgB,EAChB,oBAAoB,EACpB,mBAAmB,EAEnB,kBAAkB,EAClB,oBAAoB,EACpB,wBAAwB,EACxB,MAAM,EACN,iCAAiC,EACjC,0BAA0B,EAC1B,2BAA2B,EAC3B,uBAAuB,GACxB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC"}

package/dist/use-auth0-suspense.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { User } from '@auth0/auth0-spa-js';
+import { Auth0ContextInterface } from './auth0-context';
+/**
+ * The value returned by `useAuth0Suspense`: the full `useAuth0` interface minus
+ * `isLoading` and the internal `_initPromise`. `error` is
+ * retained for post-init failures such as `loginWithPopup`.
+ */
+export type Auth0SuspenseContextInterface<TUser extends User = User> = Omit<Auth0ContextInterface<TUser>, 'isLoading' | '_initPromise'>;
+/**
+ * ```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.
+ */
+declare const useAuth0Suspense: <TUser extends User = User>(context?: React.Context<Auth0ContextInterface<User>>) => Auth0SuspenseContextInterface<TUser>;
+export default useAuth0Suspense;
+//# sourceMappingURL=use-auth0-suspense.d.ts.map

package/dist/use-auth0-suspense.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-auth0-suspense.d.ts","sourceRoot":"","sources":["../src/use-auth0-suspense.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAqB,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAEtE;;;;GAIG;AACH,MAAM,MAAM,6BAA6B,CAAC,KAAK,SAAS,IAAI,GAAG,IAAI,IAAI,IAAI,CACzE,qBAAqB,CAAC,KAAK,CAAC,EAC5B,WAAW,GAAG,cAAc,CAC7B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,gBAAgB,GAAI,KAAK,SAAS,IAAI,GAAG,IAAI,EACjD,oDAAsB,KACrB,6BAA6B,CAAC,KAAK,CA0BrC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/package.json

@@ -1,8 +1,8 @@
 {
   "author": "Auth0",
   "name": "@versini/auth0-react-thin",
-  "version": "2.23.0",
-  "description": "Unofficial slim fork of @auth0/auth0-react@2.23.0 — bundle-size build, not affiliated with Auth0/Okta. See @versini/auth0-thin.",
+  "version": "2.24.0",
+  "description": "Unofficial slim fork of @auth0/auth0-react@2.24.0 — bundle-size build, not affiliated with Auth0/Okta. See @versini/auth0-thin.",
   "keywords": [
     "auth0",
     "fork",
@@ -34,7 +34,7 @@
   "dependencies": {
     "@auth0/auth0-spa-js": "^2.24.1"
   },
-  "forkedFrom": "@auth0/auth0-react@2.23.0",
+  "forkedFrom": "@auth0/auth0-react@2.24.0",
   "publishConfig": {
     "access": "public"
   }

package/src/auth0-context.tsx

@@ -474,6 +474,16 @@ export interface Auth0ContextInterface<TUser extends User = User>
    * ```
    */
   myAccount: MyAccountApiClient;
+
+  /**
+   * Internal. A promise that resolves when Auth0 initialization completes and
+   * rejects with the initialization error if it fails. Consumed by
+   * `useAuth0Suspense`, which also treats its absence as "no provider" — do not
+   * add a stub value for this field to `initialContext`. Not part of the
+   * supported public API.
+   * @ignore
+   */
+  _initPromise?: Promise<void>;
 }
 
 /**

package/src/auth0-provider.tsx

@@ -157,6 +157,32 @@ const defaultOnRedirectCallback = (appState?: AppState): void => {
   );
 };
 
+/**
+ * @ignore
+ */
+interface InitDeferred {
+  promise: Promise<void>;
+  resolve: () => void;
+  reject: (error: Error) => void;
+}
+
+/**
+ * @ignore
+ */
+const createInitDeferred = (): InitDeferred => {
+  let resolve!: () => void;
+  let reject!: (error: Error) => void;
+  const promise = new Promise<void>((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(() => undefined);
+  return { promise, resolve, reject };
+};
+
 /**
  * ```jsx
  * <Auth0Provider
@@ -194,6 +220,17 @@ const Auth0Provider = <TUser extends User = User>(opts: Auth0ProviderOptions<TUs
     () => providedClient ?? new Auth0Client(toAuth0ClientOptions(clientOpts))
   );
   const [state, dispatch] = useReducer(reducer<TUser>, initialAuthState  as AuthState<TUser>);
+  // 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.
+  const [initDeferred, setInitDeferred] = useState(createInitDeferred);
+  // 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.
+  const [initFailed, setInitFailed] = useState(false);
+  // 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.
+  const initRetried = useRef(false);
   const didInitialise = useRef(false);
 
   const handleError = useCallback((error: Error) => {
@@ -201,15 +238,15 @@ const Auth0Provider = <TUser extends User = User>(opts: Auth0ProviderOptions<TUs
     return error;
   }, []);
 
-  useEffect(() => {
-    if (didInitialise.current) {
-      return;
-    }
-    didInitialise.current = true;
-    (async (): Promise<void> => {
+  // 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.
+  const runInit = useCallback(
+    async (deferred: InitDeferred, allowRedirect: boolean): Promise<void> => {
       try {
         let user: TUser | undefined;
-        if (hasAuthParams() && !skipRedirectCallback) {
+        if (allowRedirect && hasAuthParams() && !skipRedirectCallback) {
           const { appState = {}, response_type, ...result } = await client.handleRedirectCallback();
           user = await client.getUser();
           appState.response_type = response_type;
@@ -222,11 +259,44 @@ const Auth0Provider = <TUser extends User = User>(opts: Auth0ProviderOptions<TUs
           user = await client.getUser();
         }
         dispatch({ type: 'INITIALISED', user });
+        deferred.resolve();
       } catch (error) {
-        handleError(loginError(error));
+        const err = loginError(error);
+        handleError(err);
+        setInitFailed(true);
+        deferred.reject(err);
       }
-    })();
-  }, [client, onRedirectCallback, skipRedirectCallback, handleError]);
+    },
+    [client, onRedirectCallback, skipRedirectCallback, handleError]
+  );
+
+  useEffect(() => {
+    if (didInitialise.current) {
+      return;
+    }
+    didInitialise.current = true;
+    // 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(() => {
+    if (!initFailed || initRetried.current || !state.isAuthenticated) {
+      return;
+    }
+    initRetried.current = true;
+    const retry = createInitDeferred();
+    setInitDeferred(retry);
+    void runInit(retry, false);
+  }, [initFailed, state.isAuthenticated, runInit]);
 
   const loginWithRedirect = useCallback(
     (opts?: RedirectLoginOptions): Promise<void> => {
@@ -485,6 +555,7 @@ const Auth0Provider = <TUser extends User = User>(opts: Auth0ProviderOptions<TUs
       mfa,
       passkey,
       myAccount,
+      _initPromise: initDeferred.promise,
     };
   }, [
     state,
@@ -508,6 +579,7 @@ const Auth0Provider = <TUser extends User = User>(opts: Auth0ProviderOptions<TUs
     mfa,
     passkey,
     myAccount,
+    initDeferred,
   ]);
 
   return <context.Provider value={contextValue}>{children}</context.Provider>;

package/src/index.tsx

@@ -7,6 +7,10 @@ export {
   ConnectedAccount
 } from './auth0-provider';
 export { default as useAuth0 } from './use-auth0';
+export {
+  default as useAuth0Suspense,
+  Auth0SuspenseContextInterface,
+} from './use-auth0-suspense';
 export { default as withAuth0, WithAuth0Props } from './with-auth0';
 export {
   default as withAuthenticationRequired,

package/src/use-auth0-suspense.tsx

@@ -0,0 +1,71 @@
+// Namespace import: `use` only exists as a named export from React 19, so
+// `import { use }` fails at link time for React 16-18 consumers even if they
+// never call this hook. Property access stays late-bound.
+import * as React from 'react';
+import { User } from '@auth0/auth0-spa-js';
+import Auth0Context, { Auth0ContextInterface } from './auth0-context';
+
+/**
+ * The value returned by `useAuth0Suspense`: the full `useAuth0` interface minus
+ * `isLoading` and the internal `_initPromise`. `error` is
+ * retained for post-init failures such as `loginWithPopup`.
+ */
+export type Auth0SuspenseContextInterface<TUser extends User = User> = Omit<
+  Auth0ContextInterface<TUser>,
+  'isLoading' | '_initPromise'
+>;
+
+/**
+ * ```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.
+ */
+const useAuth0Suspense = <TUser extends User = User>(
+  context = Auth0Context
+): Auth0SuspenseContextInterface<TUser> => {
+  if (typeof React.use !== 'function') {
+    throw new Error(
+      'useAuth0Suspense requires React 19 or later (React.use is unavailable).'
+    );
+  }
+
+  const ctx = React.useContext(context) as Auth0ContextInterface<TUser>;
+
+  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(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { isLoading, _initPromise, ...rest } = ctx;
+    return rest;
+  }, [ctx]);
+};
+
+export default useAuth0Suspense;