@auth0/auth0-react 1.11.0 → 1.12.1

package/dist/index.d.ts

@@ -2,7 +2,7 @@ export { default as Auth0Provider, Auth0ProviderOptions, AppState, } from './aut
 export { default as useAuth0 } from './use-auth0';
 export { default as withAuth0, WithAuth0Props } from './with-auth0';
 export { default as withAuthenticationRequired, WithAuthenticationRequiredOptions, } from './with-authentication-required';
-export { default as Auth0Context, Auth0ContextInterface, RedirectLoginOptions, } from './auth0-context';
+export { default as Auth0Context, Auth0ContextInterface, initialContext, RedirectLoginOptions, } from './auth0-context';
 export { PopupLoginOptions, PopupConfigOptions, GetIdTokenClaimsOptions, GetTokenWithPopupOptions, LogoutOptions, LogoutUrlOptions, CacheLocation, GetTokenSilentlyOptions, IdToken, User, ICache, InMemoryCache, LocalStorageCache, Cacheable, } from '@auth0/auth0-spa-js';
 export { OAuthError } from './errors';
 //# sourceMappingURL=index.d.ts.map

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,QAAQ,GACT,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,oBAAoB,GACrB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EACvB,wBAAwB,EACxB,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,uBAAuB,EACvB,OAAO,EACP,IAAI,EACJ,MAAM,EACN,aAAa,EACb,iBAAiB,EACjB,SAAS,GACV,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,QAAQ,GACT,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,oBAAoB,GACrB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EACvB,wBAAwB,EACxB,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,uBAAuB,EACvB,OAAO,EACP,IAAI,EACJ,MAAM,EACN,aAAa,EACb,iBAAiB,EACjB,SAAS,GACV,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC"}

package/dist/use-auth0.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { User } from '@auth0/auth0-spa-js';
 import { Auth0ContextInterface } from './auth0-context';
 /**
@@ -22,6 +23,6 @@ import { Auth0ContextInterface } from './auth0-context';
  *
  * TUser is an optional type param to provide a type to the `user` field.
  */
-declare const useAuth0: <TUser extends User = User>() => Auth0ContextInterface<TUser>;
+declare const useAuth0: <TUser extends User = User>(context?: import("react").Context<Auth0ContextInterface<User>>) => Auth0ContextInterface<TUser>;
 export default useAuth0;
 //# sourceMappingURL=use-auth0.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"use-auth0.d.ts","sourceRoot":"","sources":["../src/use-auth0.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAqB,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAEtE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,QAAQ,+DAC4C,CAAC;AAE3D,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"use-auth0.d.ts","sourceRoot":"","sources":["../src/use-auth0.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3C,OAAqB,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAEtE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,QAAQ,6HAGuC,CAAC;AAEtD,eAAe,QAAQ,CAAC"}

package/dist/with-auth0.d.ts

@@ -19,8 +19,11 @@ export interface WithAuth0Props {
  * export default withAuth0(MyComponent);
  * ```
  *
- * Wrap your class components in this Higher Order Component to give them access to the Auth0Context
+ * Wrap your class components in this Higher Order Component to give them access to the Auth0Context.
+ *
+ * Providing a context as the second argument allows you to configure the Auth0Provider the Auth0Context
+ * should come from f you have multiple within your application.
  */
-declare const withAuth0: <P extends WithAuth0Props>(Component: React.ComponentType<P>) => React.ComponentType<Omit<P, "auth0">>;
+declare const withAuth0: <P extends WithAuth0Props>(Component: React.ComponentType<P>, context?: React.Context<Auth0ContextInterface<import("@auth0/auth0-spa-js").User>>) => React.ComponentType<Omit<P, "auth0">>;
 export default withAuth0;
 //# sourceMappingURL=with-auth0.d.ts.map

package/dist/with-auth0.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"with-auth0.d.ts","sourceRoot":"","sources":["../src/with-auth0.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAqB,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAEtE;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,qBAAqB,CAAC;CAC9B;AAED;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,SAAS,wGAYd,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"with-auth0.d.ts","sourceRoot":"","sources":["../src/with-auth0.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAqB,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAEtE;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,qBAAqB,CAAC;CAC9B;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,SAAS,4LAad,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/with-authentication-required.d.ts

@@ -1,5 +1,6 @@
 import React, { ComponentType, FC } from 'react';
 import { RedirectLoginOptions, User } from '@auth0/auth0-spa-js';
+import { Auth0ContextInterface } from './auth0-context';
 /**
  * Options for the withAuthenticationRequired Higher Order Component
  */
@@ -52,6 +53,12 @@ export interface WithAuthenticationRequiredOptions {
      * whether or not they are authorized to view the component.
      */
     claimCheck?: (claims?: User) => boolean;
+    /**
+     * The context to be used when calling useAuth0, this should only be provided if you are using multiple Auth0Providers
+     * within your application and you wish to tie a specific component to a Auth0Provider other than the Auth0Provider
+     * associated with the default Auth0Context.
+     */
+    context?: React.Context<Auth0ContextInterface>;
 }
 /**
  * ```js

package/dist/with-authentication-required.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"with-authentication-required.d.ts","sourceRoot":"","sources":["../src/with-authentication-required.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAa,EAAE,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAcjE;;GAEG;AACH,MAAM,WAAW,iCAAiC;IAChD;;;;;;;;;;;;;;;;OAgBG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,MAAM,CAAC,CAAC;IACnC;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IAClC;;;;;;;;;;;;;OAaG;IACH,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,IAAI,KAAK,OAAO,CAAC;CACzC;AAED;;;;;;;GAOG;AACH,QAAA,MAAM,0BAA0B,kEAErB,iCAAiC,gBAyC3C,CAAC;AAEF,eAAe,0BAA0B,CAAC"}
+{"version":3,"file":"with-authentication-required.d.ts","sourceRoot":"","sources":["../src/with-authentication-required.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAa,EAAE,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAEjE,OAAqB,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAatE;;GAEG;AACH,MAAM,WAAW,iCAAiC;IAChD;;;;;;;;;;;;;;;;OAgBG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,MAAM,CAAC,CAAC;IACnC;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,CAAC,OAAO,CAAC;IAClC;;;;;;;;;;;;;OAaG;IACH,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,IAAI,KAAK,OAAO,CAAC;IAExC;;;;OAIG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,qBAAqB,CAAC,CAAC;CAChD;AAED;;;;;;;GAOG;AACH,QAAA,MAAM,0BAA0B,kEAErB,iCAAiC,gBA4C3C,CAAC;AAEF,eAAe,0BAA0B,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "author": "Auth0",
   "name": "@auth0/auth0-react",
-  "version": "1.11.0",
+  "version": "1.12.1",
   "description": "Auth0 SDK for React Single Page Applications (SPA)",
   "keywords": [
     "auth0",
@@ -53,28 +53,29 @@
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^13.1.3",
     "@rollup/plugin-replace": "^4.0.0",
-    "@testing-library/jest-dom": "^5.16.3",
-    "@testing-library/react": "^13.0.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
     "@testing-library/react-hooks": "^7.0.2",
-    "@types/jest": "^27.4.1",
-    "@types/react": "^17.0.43",
-    "@types/react-dom": "^17.0.14",
-    "@typescript-eslint/eslint-plugin": "^5.17.0",
-    "@typescript-eslint/parser": "^5.17.0",
-    "browserstack-cypress-cli": "^1.1.2",
-    "cypress": "^9.5.3",
-    "eslint": "^8.12.0",
-    "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-hooks": "^4.4.0",
-    "husky": "^4.2.5",
-    "jest": "^27.5.1",
-    "jest-junit": "^13.0.0",
+    "@types/jest": "^29.2.3",
+    "@types/react": "^17.0.52",
+    "@types/react-dom": "^17.0.18",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
+    "browserstack-cypress-cli": "1.8.1",
+    "cypress": "^9.7.0",
+    "eslint": "^8.28.0",
+    "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "husky": "^4.3.8",
+    "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.3.1",
+    "jest-junit": "^15.0.0",
     "oidc-provider": "^7.10.6",
-    "prettier": "2.6.2",
+    "prettier": "2.8.0",
     "pretty-quick": "^3.1.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-test-renderer": "^18.0.0",
+    "react-test-renderer": "^18.2.0",
     "rollup": "^2.70.1",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-delete": "^2.0.0",
@@ -85,7 +86,7 @@
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.31.2",
     "start-server-and-test": "^1.14.0",
-    "ts-jest": "^27.1.4",
+    "ts-jest": "^29.0.3",
     "tslib": "^2.3.1",
     "typedoc": "^0.22.13",
     "typescript": "^4.6.3"
@@ -100,6 +101,6 @@
     }
   },
   "dependencies": {
-    "@auth0/auth0-spa-js": "^1.22.2"
+    "@auth0/auth0-spa-js": "^1.22.6"
   }
 }

package/src/auth0-context.tsx

@@ -66,9 +66,9 @@ export interface Auth0ContextInterface<TUser extends User = User>
    * the `auth0` cookie.
    */
   getAccessTokenSilently: {
-    (options: GetTokenSilentlyOptions & { detailedResponse: true }): Promise<
-      GetTokenSilentlyVerboseResponse
-    >;
+    (
+      options: GetTokenSilentlyOptions & { detailedResponse: true }
+    ): Promise<GetTokenSilentlyVerboseResponse>;
     (options?: GetTokenSilentlyOptions): Promise<string>;
     (options: GetTokenSilentlyOptions): Promise<
       GetTokenSilentlyVerboseResponse | string
@@ -190,7 +190,7 @@ const stub = (): never => {
 /**
  * @ignore
  */
-const initialContext = {
+export const initialContext = {
   ...initialAuthState,
   buildAuthorizeUrl: stub,
   buildLogoutUrl: stub,

package/src/auth0-provider.tsx

@@ -21,7 +21,10 @@ import {
   GetTokenSilentlyOptions,
   User,
 } from '@auth0/auth0-spa-js';
-import Auth0Context, { RedirectLoginOptions } from './auth0-context';
+import Auth0Context, {
+  Auth0ContextInterface,
+  RedirectLoginOptions,
+} from './auth0-context';
 import { hasAuthParams, loginError, tokenError } from './utils';
 import { reducer } from './reducer';
 import { initialAuthState } from './auth-state';
@@ -160,6 +163,24 @@ export interface Auth0ProviderOptions {
    * the Login Widget.
    */
   connection?: string;
+  /**
+   * Context to be used when creating the Auth0Provider, defaults to the internally created context.
+   *
+   * This allows multiple Auth0Providers to be nested within the same application, the context value can then be
+   * passed to useAuth0, withAuth0, or withAuthenticationRequired to use that specific Auth0Provider to access
+   * auth state and methods specifically tied to the provider that the context belongs to.
+   *
+   * When using multiple Auth0Providers in a single application you should do the following to ensure sessions are not
+   * overwritten:
+   *
+   * * Configure a different redirect_uri for each Auth0Provider, and set skipRedirectCallback for each provider to ignore
+   * the others redirect_uri
+   * * If using localstorage for both Auth0Providers, ensure that the audience and scope are different for so that the key
+   * used to store data is different
+   *
+   * For a sample on using multiple Auth0Providers review the [React Account Linking Sample](https://github.com/auth0-samples/auth0-link-accounts-sample/tree/react-variant)
+   */
+  context?: React.Context<Auth0ContextInterface>;
   /**
    * If you need to send custom parameters to the Authorization Server,
    * make sure to use the original parameter name.
@@ -236,6 +257,7 @@ const Auth0Provider = (opts: Auth0ProviderOptions): JSX.Element => {
     children,
     skipRedirectCallback,
     onRedirectCallback = defaultOnRedirectCallback,
+    context = Auth0Context,
     ...clientOpts
   } = opts;
   const [client] = useState(
@@ -403,11 +425,7 @@ const Auth0Provider = (opts: Auth0ProviderOptions): JSX.Element => {
     handleRedirectCallback,
   ]);
 
-  return (
-    <Auth0Context.Provider value={contextValue}>
-      {children}
-    </Auth0Context.Provider>
-  );
+  return <context.Provider value={contextValue}>{children}</context.Provider>;
 };
 
 export default Auth0Provider;

package/src/index.tsx

@@ -12,6 +12,7 @@ export {
 export {
   default as Auth0Context,
   Auth0ContextInterface,
+  initialContext,
   RedirectLoginOptions,
 } from './auth0-context';
 export {

package/src/use-auth0.tsx

@@ -24,7 +24,9 @@ import Auth0Context, { Auth0ContextInterface } from './auth0-context';
  *
  * TUser is an optional type param to provide a type to the `user` field.
  */
-const useAuth0 = <TUser extends User = User>(): Auth0ContextInterface<TUser> =>
-  useContext(Auth0Context) as Auth0ContextInterface<TUser>;
+const useAuth0 = <TUser extends User = User>(
+  context = Auth0Context
+): Auth0ContextInterface<TUser> =>
+  useContext(context) as Auth0ContextInterface<TUser>;
 
-export default useAuth0;  
+export default useAuth0;

package/src/with-auth0.tsx

@@ -21,18 +21,22 @@ export interface WithAuth0Props {
  * export default withAuth0(MyComponent);
  * ```
  *
- * Wrap your class components in this Higher Order Component to give them access to the Auth0Context
+ * Wrap your class components in this Higher Order Component to give them access to the Auth0Context.
+ *
+ * Providing a context as the second argument allows you to configure the Auth0Provider the Auth0Context
+ * should come from f you have multiple within your application.
  */
 const withAuth0 = <P extends WithAuth0Props>(
-  Component: ComponentType<P>
+  Component: ComponentType<P>,
+  context = Auth0Context
 ): ComponentType<Omit<P, keyof WithAuth0Props>> => {
   return function WithAuth(props): JSX.Element {
     return (
-      <Auth0Context.Consumer>
+      <context.Consumer>
         {(auth: Auth0ContextInterface): JSX.Element => (
           <Component {...(props as P)} auth0={auth} />
         )}
-      </Auth0Context.Consumer>
+      </context.Consumer>
     );
   };
 };

package/src/with-authentication-required.tsx

@@ -1,6 +1,7 @@
 import React, { ComponentType, useEffect, FC } from 'react';
 import { RedirectLoginOptions, User } from '@auth0/auth0-spa-js';
 import useAuth0 from './use-auth0';
+import Auth0Context, { Auth0ContextInterface } from './auth0-context';
 
 /**
  * @ignore
@@ -65,6 +66,13 @@ export interface WithAuthenticationRequiredOptions {
    * whether or not they are authorized to view the component.
    */
   claimCheck?: (claims?: User) => boolean;
+
+  /**
+   * The context to be used when calling useAuth0, this should only be provided if you are using multiple Auth0Providers
+   * within your application and you wish to tie a specific component to a Auth0Provider other than the Auth0Provider
+   * associated with the default Auth0Context.
+   */
+  context?: React.Context<Auth0ContextInterface>;
 }
 
 /**
@@ -80,14 +88,17 @@ const withAuthenticationRequired = <P extends object>(
   options: WithAuthenticationRequiredOptions = {}
 ): FC<P> => {
   return function WithAuthenticationRequired(props: P): JSX.Element {
-    const { user, isAuthenticated, isLoading, loginWithRedirect } = useAuth0();
     const {
       returnTo = defaultReturnTo,
       onRedirecting = defaultOnRedirecting,
       claimCheck = (): boolean => true,
       loginOptions,
+      context = Auth0Context,
     } = options;
 
+    const { user, isAuthenticated, isLoading, loginWithRedirect } =
+      useAuth0(context);
+
     /**
      * The route is authenticated if the user has valid auth and there are no
      * JWT claim mismatches.