@auth0/auth0-react 2.3.0 → 2.5.0

package/src/auth0-provider.tsx

@@ -28,7 +28,7 @@ import {
   deprecateRedirectUri,
 } from './utils';
 import { reducer } from './reducer';
-import { initialAuthState } from './auth-state';
+import { initialAuthState, type AuthState } from './auth-state';
 
 /**
  * The state of the application before the user was redirected to the login page.
@@ -41,7 +41,7 @@ export type AppState = {
 /**
  * The main configuration to instantiate the `Auth0Provider`.
  */
-export interface Auth0ProviderOptions extends Auth0ClientOptions {
+export interface Auth0ProviderOptions<TUser extends User = User> extends Auth0ClientOptions {
   /**
    * The child nodes your Provider has wrapped
    */
@@ -51,7 +51,7 @@ export interface Auth0ProviderOptions extends Auth0ClientOptions {
    * It uses `window.history` but you might want to overwrite this if you are using a custom router, like `react-router-dom`
    * See the EXAMPLES.md for more info.
    */
-  onRedirectCallback?: (appState?: AppState, user?: User) => void;
+  onRedirectCallback?: (appState?: AppState, user?: TUser) => void;
   /**
    * By default, if the page url has code/state params, the SDK will treat them as Auth0's and attempt to exchange the
    * code for a token. In some cases the code might be for something else (another OAuth SDK perhaps). In these
@@ -83,7 +83,7 @@ export interface Auth0ProviderOptions extends Auth0ClientOptions {
    *
    * 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>;
+  context?: React.Context<Auth0ContextInterface<TUser>>;
 }
 
 /**
@@ -116,7 +116,7 @@ const defaultOnRedirectCallback = (appState?: AppState): void => {
   window.history.replaceState(
     {},
     document.title,
-    appState?.returnTo || window.location.pathname
+    appState?.returnTo ?? window.location.pathname
   );
 };
 
@@ -132,7 +132,7 @@ const defaultOnRedirectCallback = (appState?: AppState): void => {
  *
  * Provides the Auth0Context to its child components.
  */
-const Auth0Provider = (opts: Auth0ProviderOptions) => {
+const Auth0Provider = <TUser extends User = User>(opts: Auth0ProviderOptions<TUser>) => {
   const {
     children,
     skipRedirectCallback,
@@ -143,7 +143,7 @@ const Auth0Provider = (opts: Auth0ProviderOptions) => {
   const [client] = useState(
     () => new Auth0Client(toAuth0ClientOptions(clientOpts))
   );
-  const [state, dispatch] = useReducer(reducer, initialAuthState);
+  const [state, dispatch] = useReducer(reducer<TUser>, initialAuthState  as AuthState<TUser>);
   const didInitialise = useRef(false);
 
   const handleError = useCallback((error: Error) => {
@@ -158,7 +158,7 @@ const Auth0Provider = (opts: Auth0ProviderOptions) => {
     didInitialise.current = true;
     (async (): Promise<void> => {
       try {
-        let user: User | undefined;
+        let user: TUser | undefined;
         if (hasAuthParams() && !skipRedirectCallback) {
           const { appState } = await client.handleRedirectCallback();
           user = await client.getUser();
@@ -198,7 +198,7 @@ const Auth0Provider = (opts: Auth0ProviderOptions) => {
       const user = await client.getUser();
       dispatch({ type: 'LOGIN_POPUP_COMPLETE', user });
     },
-    [client]
+    [client, handleError]
   );
 
   const logout = useCallback(
@@ -272,7 +272,27 @@ const Auth0Provider = (opts: Auth0ProviderOptions) => {
     [client]
   );
 
-  const contextValue = useMemo<Auth0ContextInterface<User>>(() => {
+  const getDpopNonce = useCallback<Auth0Client['getDpopNonce']>(
+    (id) => client.getDpopNonce(id),
+    [client]
+  );
+
+  const setDpopNonce = useCallback<Auth0Client['setDpopNonce']>(
+    (nonce, id) => client.setDpopNonce(nonce, id),
+    [client]
+  );
+
+  const generateDpopProof = useCallback<Auth0Client['generateDpopProof']>(
+    (params) => client.generateDpopProof(params),
+    [client]
+  );
+
+  const createFetcher = useCallback<Auth0Client['createFetcher']>(
+    (config) => client.createFetcher(config),
+    [client]
+  );
+
+  const contextValue = useMemo<Auth0ContextInterface<TUser>>(() => {
     return {
       ...state,
       getAccessTokenSilently,
@@ -282,6 +302,10 @@ const Auth0Provider = (opts: Auth0ProviderOptions) => {
       loginWithPopup,
       logout,
       handleRedirectCallback,
+      getDpopNonce,
+      setDpopNonce,
+      generateDpopProof,
+      createFetcher,
     };
   }, [
     state,
@@ -292,6 +316,10 @@ const Auth0Provider = (opts: Auth0ProviderOptions) => {
     loginWithPopup,
     logout,
     handleRedirectCallback,
+    getDpopNonce,
+    setDpopNonce,
+    generateDpopProof,
+    createFetcher,
   ]);
 
   return <context.Provider value={contextValue}>{children}</context.Provider>;

package/src/errors.tsx

@@ -6,7 +6,7 @@
  */
 export class OAuthError extends Error {
   constructor(public error: string, public error_description?: string) {
-    super(error_description || error);
+    super(error_description ?? error);
 
     // https://github.com/Microsoft/TypeScript-wiki/blob/master/Breaking-Changes.md#extending-built-ins-like-error-array-and-map-may-no-longer-work
     Object.setPrototypeOf(this, OAuthError.prototype);

package/src/index.tsx

@@ -36,6 +36,8 @@ export {
   PopupTimeoutError,
   AuthenticationError,
   MissingRefreshTokenError,
-  GenericError
+  GenericError,
+  UseDpopNonceError,
+  type FetcherConfig
 } from '@auth0/auth0-spa-js';
 export { OAuthError } from './errors';

package/src/reducer.tsx

@@ -9,7 +9,7 @@ type Action =
         | 'LOGIN_POPUP_COMPLETE'
         | 'GET_ACCESS_TOKEN_COMPLETE'
         | 'HANDLE_REDIRECT_COMPLETE';
-      user?: User;
+      user: User | undefined;
     }
   | { type: 'LOGOUT' }
   | { type: 'ERROR'; error: Error };
@@ -17,7 +17,7 @@ type Action =
 /**
  * Handles how that state changes in the `useAuth0` hook.
  */
-export const reducer = (state: AuthState, action: Action): AuthState => {
+export const reducer = <TUser extends User = User>(state: AuthState<TUser>, action: Action): AuthState<TUser> => {
   switch (action.type) {
     case 'LOGIN_POPUP_STARTED':
       return {
@@ -29,7 +29,7 @@ export const reducer = (state: AuthState, action: Action): AuthState => {
       return {
         ...state,
         isAuthenticated: !!action.user,
-        user: action.user,
+        user: action.user as TUser | undefined,
         isLoading: false,
         error: undefined,
       };
@@ -41,7 +41,7 @@ export const reducer = (state: AuthState, action: Action): AuthState => {
       return {
         ...state,
         isAuthenticated: !!action.user,
-        user: action.user,
+        user: action.user as TUser | undefined,
       };
     case 'LOGOUT':
       return {

package/src/utils.tsx

@@ -47,7 +47,7 @@ export const deprecateRedirectUri = (options?: any) => {
     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 = options.authorizationParams ?? {};
     options.authorizationParams.redirect_uri = options.redirectUri;
     delete options.redirectUri;
   }

package/src/with-authentication-required.tsx

@@ -117,11 +117,11 @@ const withAuthenticationRequired = <P extends object>(
       const opts = {
         ...loginOptions,
         appState: {
-          ...(loginOptions && loginOptions.appState),
+          ...loginOptions?.appState,
           returnTo: typeof returnTo === 'function' ? returnTo() : returnTo,
         },
       };
-      (async (): Promise<void> => {
+      void (async (): Promise<void> => {
         await onBeforeAuthentication();
         await loginWithRedirect(opts);
       })();