@auth0/auth0-react 1.11.0 → 2.0.0-beta.0

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,9 @@
 import React, { ComponentType, useEffect, FC } from 'react';
-import { RedirectLoginOptions, User } from '@auth0/auth0-spa-js';
 import useAuth0 from './use-auth0';
+import Auth0Context, {
+  Auth0ContextInterface,
+  RedirectLoginOptions,
+} from './auth0-context';
 
 /**
  * @ignore
@@ -61,10 +64,11 @@ export interface WithAuthenticationRequiredOptions {
    */
   loginOptions?: RedirectLoginOptions;
   /**
-   * Check the user object for JWT claims and return a boolean indicating
-   * whether or not they are authorized to view the component.
+   * 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.
    */
-  claimCheck?: (claims?: User) => boolean;
+  context?: React.Context<Auth0ContextInterface>;
 }
 
 /**
@@ -80,22 +84,18 @@ 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;
 
-    /**
-     * The route is authenticated if the user has valid auth and there are no
-     * JWT claim mismatches.
-     */
-    const routeIsAuthenticated = isAuthenticated && claimCheck(user);
+    const { isAuthenticated, isLoading, loginWithRedirect } =
+      useAuth0(context);
 
     useEffect(() => {
-      if (isLoading || routeIsAuthenticated) {
+      if (isLoading || isAuthenticated) {
         return;
       }
       const opts = {
@@ -110,13 +110,13 @@ const withAuthenticationRequired = <P extends object>(
       })();
     }, [
       isLoading,
-      routeIsAuthenticated,
+      isAuthenticated,
       loginWithRedirect,
       loginOptions,
       returnTo,
     ]);
 
-    return routeIsAuthenticated ? <Component {...props} /> : onRedirecting();
+    return isAuthenticated ? <Component {...props} /> : onRedirecting();
   };
 };