Add TUser type param to useAuth0 hook

README.md

@@ -77,7 +77,7 @@ function App() {
  user,
  loginWithRedirect,
  logout,
- } = useAuth0();
+ } = useAuth0<{ name: string }>();
 
  if (isLoading) {
  return <div>Loading...</div>;

examples/cra-react-router/src/Nav.tsx

@@ -3,7 +3,9 @@ import { useHistory, Link } from 'react-router-dom';
 import { useAuth0 } from '@auth0/auth0-react';
 
 export function Nav() {
- const { isAuthenticated, user, loginWithRedirect, logout } = useAuth0();
+ const { isAuthenticated, user, loginWithRedirect, logout } = useAuth0<{
+ name: string;
+ }>();
  const history = useHistory();
  const [pathname, setPathname] = useState(() => history.location.pathname);
 

src/auth-state.tsx

@@ -3,11 +3,11 @@ export type User = any; // eslint-disable-line @typescript-eslint/no-explicit-an
 /**
  * The auth state which, when combined with the auth methods, make up the return object of the `useAuth0` hook.
  */
-export interface AuthState {
+export interface AuthState<TUser extends User = User> {
  error?: Error;
  isAuthenticated: boolean;
  isLoading: boolean;
- user?: User;
+ user?: TUser;
 }
 
 /**

src/auth0-context.tsx

@@ -11,7 +11,7 @@ import {
  RedirectLoginOptions as Auth0RedirectLoginOptions,
 } from '@auth0/auth0-spa-js';
 import { createContext } from 'react';
-import { AuthState, initialAuthState } from './auth-state';
+import { AuthState, initialAuthState, User } from './auth-state';
 
 export interface RedirectLoginOptions extends BaseLoginOptions {
  /**
@@ -36,7 +36,8 @@ export interface RedirectLoginOptions extends BaseLoginOptions {
 /**
  * Contains the authenticated state and authentication methods provided by the `useAuth0` hook.
  */
-export interface Auth0ContextInterface extends AuthState {
+export interface Auth0ContextInterface<TUser extends User = User>
+ extends AuthState<TUser> {
  /**
  * ```js
  * const token = await getAccessTokenSilently(options);

src/use-auth0.tsx

@@ -1,4 +1,5 @@
 import { useContext } from 'react';
+import { User } from './auth-state';
 import Auth0Context, { Auth0ContextInterface } from './auth0-context';
 
 /**
@@ -16,11 +17,14 @@ import Auth0Context, { Auth0ContextInterface } from './auth0-context';
  * loginWithRedirect,
  * loginWithPopup,
  * logout,
- * } = useAuth0();
+ * } = useAuth0<TUser>();
  * ```
  *
  * Use the `useAuth0` hook in your components to access the auth state and methods.
+ *
+ * TUser is an optional type param to provide a type to the `user` field.
  */
-const useAuth0 = (): Auth0ContextInterface => useContext(Auth0Context);
+const useAuth0 = <TUser extends User = User>(): Auth0ContextInterface<TUser> =>
+ useContext(Auth0Context);
 
 export default useAuth0;