From 6124b40bb39f3c1ce5ed716da38557aa921d2c1c Mon Sep 17 00:00:00 2001
From: James Monger <jameskmonger@hotmail.co.uk>
Date: Thu, 15 Apr 2021 12:05:59 +0100
Subject: [PATCH 1/4] Add TUser type param to useAuth0 hook

---
 README.md             | 2 +-
 src/auth-state.tsx    | 4 ++--
 src/auth0-context.tsx | 5 +++--
 src/use-auth0.tsx     | 8 ++++++--
 4 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 82ff44e4..a0d25337 100644
--- a/README.md
+++ b/README.md
@@ -77,7 +77,7 @@ function App() {
     user,
     loginWithRedirect,
     logout,
-  } = useAuth0();
+  } = useAuth0<{ name: string }>();
 
   if (isLoading) {
     return <div>Loading...</div>;
diff --git a/src/auth-state.tsx b/src/auth-state.tsx
index e6d28643..1b63fc1d 100644
--- a/src/auth-state.tsx
+++ b/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;
 }
 
 /**
diff --git a/src/auth0-context.tsx b/src/auth0-context.tsx
index 686e6f5a..aed66d58 100644
--- a/src/auth0-context.tsx
+++ b/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);
diff --git a/src/use-auth0.tsx b/src/use-auth0.tsx
index 28950fa5..91319211 100644
--- a/src/use-auth0.tsx
+++ b/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;

From b191e102c0f06a9f13930af6492d484e4e72cb02 Mon Sep 17 00:00:00 2001
From: James Monger <jameskmonger@hotmail.co.uk>
Date: Thu, 15 Apr 2021 12:10:52 +0100
Subject: [PATCH 2/4] Undo formatting changes


From 1aefc1dacd4f4813ceb18ea4f59d19bb9a877286 Mon Sep 17 00:00:00 2001
From: James Monger <jameskmonger@hotmail.co.uk>
Date: Thu, 15 Apr 2021 12:11:55 +0100
Subject: [PATCH 3/4] add to cra example

---
 examples/cra-react-router/src/Nav.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/examples/cra-react-router/src/Nav.tsx b/examples/cra-react-router/src/Nav.tsx
index 78571c79..512d8c70 100644
--- a/examples/cra-react-router/src/Nav.tsx
+++ b/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);
 

From 3cefa9a4d0204871ecb990841c79f32191896af1 Mon Sep 17 00:00:00 2001
From: James Monger <jameskmonger@hotmail.co.uk>
Date: Thu, 15 Apr 2021 18:24:11 +0100
Subject: [PATCH 4/4] add typescript-specific readme

---
 README.md | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index a0d25337..1ce8488a 100644
--- a/README.md
+++ b/README.md
@@ -77,7 +77,7 @@ function App() {
     user,
     loginWithRedirect,
     logout,
-  } = useAuth0<{ name: string }>();
+  } = useAuth0();
 
   if (isLoading) {
     return <div>Loading...</div>;
@@ -103,6 +103,14 @@ function App() {
 export default App;
 ```
 
+If you're using TypeScript, you can pass a type parameter to `useAuth0` to specify the type of `user`:
+
+```ts
+const { user } = useAuth0<{ name: string }>();
+
+user.name; // is a string
+```
+
 ### Use with a Class Component
 
 Use the `withAuth0` higher order component to add the `auth0` property to Class components: