isLoading -> !isReady

README.md

@@ -59,7 +59,7 @@ ReactDOM.render(
 );
 ```
 
-Use the `useAuth0` hook in your components to access authentication state (`isLoading`, `isAuthenticated` and `user`) and authentication methods (`loginWithRedirect` and `logout`):
+Use the `useAuth0` hook in your components to access authentication state (`isReady`, `isAuthenticated` and `user`) and authentication methods (`loginWithRedirect` and `logout`):
 
 ```jsx
 // src/App.js
@@ -68,15 +68,15 @@ import { useAuth0 } from '@auth0/auth0-react';
 
 function App() {
   const {
-    isLoading,
+    isReady,
     isAuthenticated,
     error,
     user,
     loginWithRedirect,
     logout,
   } = useAuth0();
 
-  if (isLoading) {
+  if (!isReady) {
     return <div>Loading...</div>;
   }
   if (error) {

__tests__/auth-provider.test.tsx

@@ -37,9 +37,9 @@ describe('Auth0Provider', () => {
       () => useContext(Auth0Context),
       { wrapper }
     );
-    expect(result.current.isLoading).toBe(true);
+    expect(result.current.isReady).toBe(false);
     await waitForNextUpdate();
-    expect(result.current.isLoading).toBe(false);
+    expect(result.current.isReady).toBe(true);
     expect(clientMock.getTokenSilently).toHaveBeenCalled();
     expect(result.current.isAuthenticated).toBe(false);
   });
@@ -158,9 +158,9 @@ describe('Auth0Provider', () => {
     act(() => {
       result.current.loginWithPopup();
     });
-    expect(result.current.isLoading).toBe(true);
+    expect(result.current.isReady).toBe(false);
     await waitForNextUpdate();
-    expect(result.current.isLoading).toBe(false);
+    expect(result.current.isReady).toBe(true);
     expect(clientMock.loginWithPopup).toHaveBeenCalled();
     expect(result.current.isAuthenticated).toBe(true);
   });
@@ -179,9 +179,9 @@ describe('Auth0Provider', () => {
     act(() => {
       result.current.loginWithPopup();
     });
-    expect(result.current.isLoading).toBe(true);
+    expect(result.current.isReady).toBe(false);
     await waitForNextUpdate();
-    expect(result.current.isLoading).toBe(false);
+    expect(result.current.isReady).toBe(true);
     expect(clientMock.loginWithPopup).toHaveBeenCalled();
     expect(result.current.isAuthenticated).toBe(false);
     expect(() => {

__tests__/auth-reducer.test.tsx

@@ -11,7 +11,7 @@ describe('reducer', () => {
       reducer(initialAuthState, { type: 'INITIALISED', ...payload })
     ).toEqual({
       ...initialAuthState,
-      isLoading: false,
+      isReady: true,
       ...payload,
     });
   });
@@ -24,7 +24,7 @@ describe('reducer', () => {
       reducer(initialAuthState, { type: 'INITIALISED', ...payload })
     ).toEqual({
       ...initialAuthState,
-      isLoading: false,
+      isReady: true,
       ...payload,
     });
   });
@@ -35,7 +35,7 @@ describe('reducer', () => {
     };
     expect(reducer(initialAuthState, { type: 'ERROR', ...payload })).toEqual({
       ...initialAuthState,
-      isLoading: false,
+      isReady: true,
       ...payload,
     });
   });

__tests__/ssr.test.tsx

@@ -12,10 +12,10 @@ describe('In a Node SSR environment', () => {
     const wrapper = createWrapper();
     const {
       result: {
-        current: { isLoading, isAuthenticated, user, loginWithRedirect },
+        current: { isReady, isAuthenticated, user, loginWithRedirect },
       },
     } = renderHook(useAuth0, { wrapper });
-    expect(isLoading).toBeFalsy();
+    expect(isReady).toBeTruthy();
     expect(isAuthenticated).toBeFalsy();
     expect(user).toBeUndefined();
     await expect(loginWithRedirect).rejects.toThrowError(

src/auth-state.tsx

@@ -3,12 +3,12 @@ export type User = any; // eslint-disable-line @typescript-eslint/no-explicit-an
 export interface AuthState {
   error?: Error;
   isAuthenticated: boolean;
-  isLoading: boolean;
+  isReady: boolean;
   user?: User;
 }
 
 export const initialAuthState: AuthState = {
   isAuthenticated: false,
-  // In SSR mode the library will never check the session, so loading should be initialised as false
-  isLoading: typeof window !== 'undefined',
+  // In SSR mode the library will never check the session, so it should be initialised as ready
+  isReady: typeof window === 'undefined',
 };

src/reducer.tsx

@@ -14,20 +14,20 @@ export const reducer = (state: AuthState, action: Action): AuthState => {
     case 'LOGIN_POPUP_STARTED':
       return {
         ...state,
-        isLoading: true,
+        isReady: false,
       };
     case 'LOGIN_POPUP_COMPLETE':
     case 'INITIALISED':
       return {
         ...state,
         isAuthenticated: action.isAuthenticated,
         user: action.user,
-        isLoading: false,
+        isReady: true,
       };
     case 'ERROR':
       return {
         ...state,
-        isLoading: false,
+        isReady: true,
         error: action.error,
       };
   }

src/with-login-required.tsx

@@ -7,18 +7,18 @@ const withAuthenticationRequired = <P extends object>(
   Component: ComponentType<P>,
   onRedirecting: () => JSX.Element = defaultOnRedirecting
 ): FC<P> => (props: P): JSX.Element => {
-  const { isAuthenticated, isLoading, loginWithRedirect } = useAuth0();
+  const { isAuthenticated, isReady, loginWithRedirect } = useAuth0();
 
   useEffect(() => {
-    if (isLoading || isAuthenticated) {
+    if (!isReady || isAuthenticated) {
       return;
     }
     (async (): Promise<void> => {
       await loginWithRedirect({
         appState: { returnTo: window.location.pathname },
       });
     })();
-  }, [isLoading, isAuthenticated, loginWithRedirect]);
+  }, [isReady, isAuthenticated, loginWithRedirect]);
 
   return isAuthenticated ? <Component {...props} /> : onRedirecting();
 };

static/index.html

@@ -29,7 +29,7 @@
       const App = () => {
         const {
           isAuthenticated,
-          isLoading,
+          isReady,
           getIdTokenClaims,
           getAccessTokenSilently,
           getAccessTokenWithPopup,
@@ -40,7 +40,7 @@
         const [token, setToken] = useState(null);
         const [claims, setClaims] = useState(null);
 
-        if (isLoading) {
+        if (!isReady) {
           return <div>loading...</div>;
         }