feat: use User class defined in auth0-spa-js (#236)

* feat: use User class defined in auth0-spa-js

* feat: export User class

* fix: test

Co-authored-by: Tatsushi Kiryu <[email protected]>

Author: tkiryu

__tests__/auth-provider.test.tsx

@@ -414,12 +414,12 @@ describe('Auth0Provider', () => {
     );
     await waitForNextUpdate();
 
-    expect(result.current.user.name).toEqual('foo');
+    expect(result.current.user?.name).toEqual('foo');
     clientMock.getUser.mockResolvedValue({ name: 'bar', updated_at: '2' });
     await act(async () => {
       await result.current.getAccessTokenSilently();
     });
-    expect(result.current.user.name).toEqual('bar');
+    expect(result.current.user?.name).toEqual('bar');
   });
 
   it('should update auth state after getAccessTokenSilently fails', async () => {
@@ -471,12 +471,12 @@ describe('Auth0Provider', () => {
     );
     await waitForNextUpdate();
     const memoized = result.current.getAccessTokenSilently;
-    expect(result.current.user.name).toEqual('foo');
+    expect(result.current.user?.name).toEqual('foo');
     clientMock.getUser.mockResolvedValue({ name: 'bar', updated_at: '2' });
     await act(async () => {
       await result.current.getAccessTokenSilently();
     });
-    expect(result.current.user.name).toEqual('bar');
+    expect(result.current.user?.name).toEqual('bar');
     expect(result.current.getAccessTokenSilently).toBe(memoized);
   });
 

__tests__/auth-reducer.test.tsx

@@ -5,7 +5,7 @@ describe('reducer', () => {
   it('should initialise when authenticated', async () => {
     const payload = {
       isAuthenticated: true,
-      user: 'Bob',
+      user: { name: 'Bob' },
     };
     expect(
       reducer(initialAuthState, { type: 'INITIALISED', ...payload })

__tests__/with-authentication-required.test.tsx

@@ -2,10 +2,9 @@ import '@testing-library/jest-dom/extend-expect';
 import React from 'react';
 import withAuthenticationRequired from '../src/with-authentication-required';
 import { render, screen, waitFor } from '@testing-library/react';
-import { Auth0Client } from '@auth0/auth0-spa-js';
+import { Auth0Client, User } from '@auth0/auth0-spa-js';
 import Auth0Provider from '../src/auth0-provider';
 import { mocked } from 'ts-jest/utils';
-import { User } from '../src/auth-state';
 
 const mockClient = mocked(new Auth0Client({ client_id: '', domain: '' }));
 
@@ -43,8 +42,8 @@ describe('withAuthenticationRequired', () => {
   it('should not allow access to claims-restricted components', async () => {
     const MyComponent = (): JSX.Element => <>Private</>;
     const WrappedComponent = withAuthenticationRequired(MyComponent, {
-      claimCheck: (claims: User) =>
-        claims['https://my.app.io/jwt/roles']?.includes('ADMIN'),
+      claimCheck: (claims?: User) =>
+        claims?.['https://my.app.io/jwt/roles']?.includes('ADMIN'),
     });
     /**
      * A user with USER and MODERATOR roles.
@@ -72,8 +71,8 @@ describe('withAuthenticationRequired', () => {
   it('should allow access to restricted components when JWT claims present', async () => {
     const MyComponent = (): JSX.Element => <>Private</>;
     const WrappedComponent = withAuthenticationRequired(MyComponent, {
-      claimCheck: (claim: User) =>
-        claim['https://my.app.io/jwt/claims']?.ROLE?.includes('ADMIN'),
+      claimCheck: (claim?: User) =>
+        claim?.['https://my.app.io/jwt/claims']?.ROLE?.includes('ADMIN'),
     });
     /**
      * User with ADMIN role.

src/auth-state.tsx

@@ -1,4 +1,4 @@
-export type User = any; // eslint-disable-line @typescript-eslint/no-explicit-any
+import { User } from '@auth0/auth0-spa-js';
 
 /**
  * The auth state which, when combined with the auth methods, make up the return object of the `useAuth0` hook.

src/auth0-context.tsx

@@ -10,9 +10,10 @@ import {
   PopupConfigOptions,
   RedirectLoginOptions as Auth0RedirectLoginOptions,
   RedirectLoginResult,
+  User,
 } from '@auth0/auth0-spa-js';
 import { createContext } from 'react';
-import { AuthState, initialAuthState, User } from './auth-state';
+import { AuthState, initialAuthState } from './auth-state';
 
 export interface RedirectLoginOptions extends BaseLoginOptions {
   /**

src/index.tsx

@@ -24,5 +24,6 @@ export {
   CacheLocation,
   GetTokenSilentlyOptions,
   IdToken,
+  User,
 } from '@auth0/auth0-spa-js';
 export { OAuthError } from './errors';

src/reducer.tsx

@@ -1,4 +1,5 @@
-import { AuthState, User } from './auth-state';
+import { User } from '@auth0/auth0-spa-js';
+import { AuthState } from './auth-state';
 
 type Action =
   | { type: 'LOGIN_POPUP_STARTED' }

src/use-auth0.tsx

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { User } from './auth-state';
+import { User } from '@auth0/auth0-spa-js';
 import Auth0Context, { Auth0ContextInterface } from './auth0-context';
 
 /**
@@ -25,6 +25,6 @@ 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);
+  useContext(Auth0Context) as Auth0ContextInterface<TUser>;
 
 export default useAuth0;

src/with-authentication-required.tsx

@@ -1,7 +1,6 @@
 import React, { ComponentType, useEffect, FC } from 'react';
-import { RedirectLoginOptions } from '@auth0/auth0-spa-js';
+import { RedirectLoginOptions, User } from '@auth0/auth0-spa-js';
 import useAuth0 from './use-auth0';
-import { User } from './auth-state';
 
 /**
  * @ignore
@@ -65,7 +64,7 @@ export interface WithAuthenticationRequiredOptions {
    * Check the user object for JWT claims and return a boolean indicating
    * whether or not they are authorized to view the component.
    */
-  claimCheck?: (claims: User) => boolean;
+  claimCheck?: (claims?: User) => boolean;
 }
 
 /**