@versini/auth0-react-thin 2.19.0

package/src/utils.tsx

@@ -0,0 +1,74 @@
+import { OAuthError } from './errors';
+
+const CODE_RE = /[?&](?:connect_)?code=[^&]+/;
+const STATE_RE = /[?&]state=[^&]+/;
+const ERROR_RE = /[?&]error=[^&]+/;
+
+interface WithError {
+  error: string;
+}
+
+interface WithErrorAndDescription {
+  error: string;
+  error_description: string;
+}
+
+export const hasAuthParams = (searchParams = window.location.search): boolean =>
+  (CODE_RE.test(searchParams) || ERROR_RE.test(searchParams)) &&
+  STATE_RE.test(searchParams);
+
+const normalizeErrorFn =
+  (fallbackMessage: string) =>
+  (error: unknown): Error => {
+    if (error instanceof Error) {
+      return error;
+    }
+    // try to check errors of the following form: {error: string; error_description?: string}
+    if (
+      error !== null &&
+      typeof error === 'object' &&
+      'error' in error &&
+      typeof (error as WithError).error === 'string'
+    ) {
+      if (
+        'error_description' in error &&
+        typeof (error as WithErrorAndDescription).error_description === 'string'
+      ) {
+        const e = error as WithErrorAndDescription;
+        return new OAuthError(e.error, e.error_description);
+      }
+      const e = error as WithError;
+      return new OAuthError(e.error);
+    }
+    return new Error(fallbackMessage);
+  };
+
+export const loginError = normalizeErrorFn('Login failed');
+
+export const tokenError = normalizeErrorFn('Get access token failed');
+
+/**
+ * @ignore
+ * Helper function to map the v1 `redirectUri` option to the v2 `authorizationParams.redirect_uri`
+ * and log a warning.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const deprecateRedirectUri = (options?: any) => {
+  if (options?.redirectUri) {
+    console.warn(
+      'Using `redirectUri` has been deprecated, please use `authorizationParams.redirect_uri` instead as `redirectUri` will be no longer supported in a future version'
+    );
+    options.authorizationParams = options.authorizationParams ?? {};
+    options.authorizationParams.redirect_uri = options.redirectUri;
+    delete options.redirectUri;
+  }
+
+  if (options?.authorizationParams?.redirectUri) {
+    console.warn(
+      'Using `authorizationParams.redirectUri` has been deprecated, please use `authorizationParams.redirect_uri` instead as `authorizationParams.redirectUri` will be removed in a future version'
+    );
+    options.authorizationParams.redirect_uri =
+      options.authorizationParams.redirectUri;
+    delete options.authorizationParams.redirectUri;
+  }
+};

package/src/with-auth0.tsx

@@ -0,0 +1,44 @@
+import React, { ComponentType } from 'react';
+import Auth0Context, { Auth0ContextInterface } from './auth0-context';
+
+/**
+ * Components wrapped in `withAuth0` will have an additional `auth0` prop
+ */
+export interface WithAuth0Props {
+  auth0: Auth0ContextInterface;
+}
+
+/**
+ * ```jsx
+ * class MyComponent extends Component {
+ *   render() {
+ *     // Access the auth context from the `auth0` prop
+ *     const { user } = this.props.auth0;
+ *     return <div>Hello {user.name}!</div>
+ *   }
+ * }
+ * // Wrap your class component in withAuth0
+ * export default withAuth0(MyComponent);
+ * ```
+ *
+ * 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>,
+  context = Auth0Context
+): ComponentType<Omit<P, keyof WithAuth0Props>> => {
+  return function WithAuth(props): React.JSX.Element {
+    return (
+      <context.Consumer>
+        {(auth: Auth0ContextInterface): React.JSX.Element => (
+          <Component {...(props as P)} auth0={auth} />
+        )}
+      </context.Consumer>
+    );
+  };
+};
+
+export default withAuth0;

package/src/with-authentication-required.tsx

@@ -0,0 +1,141 @@
+import React, { ComponentType, useEffect, FC } from 'react';
+import useAuth0 from './use-auth0';
+import Auth0Context, {
+  Auth0ContextInterface,
+  RedirectLoginOptions,
+} from './auth0-context';
+
+/**
+ * @ignore
+ */
+const defaultOnRedirecting = (): React.JSX.Element => <></>;
+
+/**
+* @ignore
+*/
+const defaultOnBeforeAuthentication = async (): Promise<void> => {/* noop */ };
+
+/**
+ * @ignore
+ */
+const defaultReturnTo = (): string =>
+  `${window.location.pathname}${window.location.search}`;
+
+/**
+ * Options for the withAuthenticationRequired Higher Order Component
+ */
+export interface WithAuthenticationRequiredOptions {
+  /**
+   * ```js
+   * withAuthenticationRequired(Profile, {
+   *   returnTo: '/profile'
+   * })
+   * ```
+   *
+   * or
+   *
+   * ```js
+   * withAuthenticationRequired(Profile, {
+   *   returnTo: () => window.location.hash.substr(1)
+   * })
+   * ```
+   *
+   * Add a path for the `onRedirectCallback` handler to return the user to after login.
+   */
+  returnTo?: string | (() => string);
+  /**
+   * ```js
+   * withAuthenticationRequired(Profile, {
+   *   onRedirecting: () => <div>Redirecting you to the login...</div>
+   * })
+   * ```
+   *
+   * Render a message to show that the user is being redirected to the login.
+   */
+  onRedirecting?: () => React.JSX.Element;
+  /**
+   * ```js
+   * withAuthenticationRequired(Profile, {
+   *   onBeforeAuthentication: () => { analyticsLibrary.track('login_triggered'); }
+   * })
+   * ```
+   *
+   * Allows executing logic before the user is redirected to the login page.
+   */
+  onBeforeAuthentication?: () => Promise<void>;
+  /**
+   * ```js
+   * withAuthenticationRequired(Profile, {
+   *   loginOptions: {
+   *     appState: {
+   *       customProp: 'foo'
+   *     }
+   *   }
+   * })
+   * ```
+   *
+   * Pass additional login options, like extra `appState` to the login page.
+   * This will be merged with the `returnTo` option used by the `onRedirectCallback` handler.
+   */
+  loginOptions?: RedirectLoginOptions;
+  /**
+   * 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
+ * const MyProtectedComponent = withAuthenticationRequired(MyComponent);
+ * ```
+ *
+ * When you wrap your components in this Higher Order Component and an anonymous user visits your component
+ * they will be redirected to the login page; after login they will be returned to the page they were redirected from.
+ */
+const withAuthenticationRequired = <P extends object>(
+  Component: ComponentType<P>,
+  options: WithAuthenticationRequiredOptions = {}
+): FC<P> => {
+  return function WithAuthenticationRequired(props: P): React.JSX.Element {
+    const {
+      returnTo = defaultReturnTo,
+      onRedirecting = defaultOnRedirecting,
+      onBeforeAuthentication = defaultOnBeforeAuthentication,
+      loginOptions,
+      context = Auth0Context,
+    } = options;
+
+    const { isAuthenticated, isLoading, loginWithRedirect } =
+      useAuth0(context);
+
+    useEffect(() => {
+      if (isLoading || isAuthenticated) {
+        return;
+      }
+      const opts = {
+        ...loginOptions,
+        appState: {
+          ...loginOptions?.appState,
+          returnTo: typeof returnTo === 'function' ? returnTo() : returnTo,
+        },
+      };
+      void (async (): Promise<void> => {
+        await onBeforeAuthentication();
+        await loginWithRedirect(opts);
+      })();
+    }, [
+      isLoading,
+      isAuthenticated,
+      loginWithRedirect,
+      onBeforeAuthentication,
+      loginOptions,
+      returnTo,
+    ]);
+
+    return isAuthenticated ? <Component {...props} /> : onRedirecting();
+  };
+};
+
+export default withAuthenticationRequired;