Initialized flag on useAuth0 hook

README.md

@@ -274,22 +274,33 @@ import {useAuth0} from 'react-native-auth0';
 
 #### Login
 
-Use the `authorize` method to redirect the user to the Auth0 [Universal Login](https://auth0.com/docs/authenticate/login/auth0-universal-login) page for authentication. The `user` property is populated with details about the authenticated user.
+Use the `authorize` method to redirect the user to the Auth0 [Universal Login](https://auth0.com/docs/authenticate/login/auth0-universal-login) page for authentication. 
 
-If `user` is `null`, no user is currently authenticated.
+- The `isLoading` property is set to true once the authentication state of the user is known to the SDK.
+- The `user` property is populated with details about the authenticated user. If `user` is `null`, no user is currently authenticated. 
+- The `error` property is populated if any error occurs.
 
 ```js
 const Component = () => {
-  const {authorize, user} = useAuth0();
+  const {authorize, user, isLoading, error} = useAuth0();
 
   const login = async () => {
     await authorize();
   };
 
+  if(isLoading) {
+    return (
+      <View>
+        <Text>SDK is Loading</Text>
+      </View>
+    )
+  }
+
   return (
     <View>
       {!user && <Button onPress={login} title="Log in" />}
       {user && <Text>Logged in as {user.name}</Text>}
+      {error && <Text>{error.message}</Text>}
     </View>
   );
 };

src/hooks/__tests__/use-auth0.spec.js

@@ -81,6 +81,41 @@ describe('The useAuth0 hook', () => {
     expect(result.current.clearSession).toBeDefined();
   });
 
+  it('isLoading is true until initialization finishes', async () => {
+    const {result, waitForNextUpdate} = renderHook(() => useAuth0(), {wrapper});
+    expect(result.current.isLoading).toBe(true);
+
+    await waitForNextUpdate();
+    expect(mockAuth0.credentialsManager.getCredentials).not.toBeCalled();
+    expect(mockAuth0.credentialsManager.hasValidCredentials).toBeCalledTimes(1);
+    expect(result.current.user).toBeNull();
+    expect(result.current.isLoading).toBe(false);
+  });
+
+  it('isLoading flag set on start up with valid credentials', async () => {
+    mockAuth0.credentialsManager.hasValidCredentials.mockResolvedValue(true);
+
+    const {result, waitForNextUpdate} = renderHook(() => useAuth0(), {wrapper});
+    expect(result.current.isLoading).toBe(true);
+
+    await waitForNextUpdate();
+    expect(result.current.user).not.toBeNull();
+    expect(result.current.isLoading).toBe(false);
+  });
+
+  it('isLoading flag set on when error is thrown while initializing', async () => {
+    const errorToThrow = new Error('Error getting credentials');
+    mockAuth0.credentialsManager.hasValidCredentials.mockResolvedValue(true);
+    mockAuth0.credentialsManager.getCredentials.mockRejectedValue(errorToThrow);
+
+    const {result, waitForNextUpdate} = renderHook(() => useAuth0(), {wrapper});
+    expect(result.current.isLoading).toBe(true);
+
+    await waitForNextUpdate();
+    expect(result.current.error).toBe(errorToThrow);
+    expect(result.current.isLoading).toBe(false);
+  });
+
   it('does not initialize the user on start up without valid credentials', async () => {
     const {result, waitForNextUpdate} = renderHook(() => useAuth0(), {wrapper});
 
@@ -92,6 +127,7 @@ describe('The useAuth0 hook', () => {
 
   it('initializes the user on start up with valid credentials', async () => {
     mockAuth0.credentialsManager.hasValidCredentials.mockResolvedValue(true);
+    mockAuth0.credentialsManager.getCredentials.mockResolvedValue(mockCredentials);
 
     const {result, waitForNextUpdate} = renderHook(() => useAuth0(), {wrapper});
 

src/hooks/auth0-context.js

@@ -7,6 +7,7 @@ const stub = () => {
 const initialContext = {
   error: null,
   user: null,
+  isLoading: true,
   authorize: stub,
   clearSession: stub,
   getCredentials: stub,

src/hooks/auth0-provider.js

@@ -10,6 +10,7 @@ import {idTokenNonProfileClaims} from '../jwt/utils';
 const initialState = {
   user: null,
   error: null,
+  isLoading: true,
 };
 
 /**
@@ -48,10 +49,13 @@ const Auth0Provider = ({domain, clientId, children}) => {
       let user = null;
 
       if (await client.credentialsManager.hasValidCredentials()) {
-        const credentials = await client.credentialsManager.getCredentials();
-
-        if (credentials) {
-          user = getIdTokenProfileClaims(credentials.idToken);
+        try {
+          const credentials = await client.credentialsManager.getCredentials();
+          if (credentials) {
+            user = getIdTokenProfileClaims(credentials.idToken);
+          }
+        } catch (error) {
+          dispatch({type: 'ERROR', error});
         }
       }
 

src/hooks/reducer.js

@@ -10,10 +10,10 @@ const reducer = (state, action) => {
       return {...state, error: null, user: null};
 
     case 'ERROR':
-      return {...state, error: action.error};
+      return {...state, isLoading: false, error: action.error};
 
     case 'INITIALIZED':
-      return {...state, user: action.user};
+      return {...state, isLoading: false, user: action.user};
   }
 };
 

src/hooks/use-auth0.js

@@ -5,6 +5,7 @@ import Auth0Context from './auth0-context';
  * @typedef {Object} Auth0ContextInterface
  * @property {Object} user The user profile as decoded from the ID token after authentication
  * @property {Object} error An object representing the last exception
+ * @property {boolean} isLoading A flag that is true until the state knows that a user is either logged in or not
  * @property {Function} authorize Authorize the user using Auth0 Universal Login. See {@link WebAuth#authorize}
  * @property {Function} clearSession Clears the user's web session, credentials and logs them out. See {@link WebAuth#clearSession}.
  * @property {Function} getCredentials Gets the user's credentials from the native credential store. See {@link CredentialsManager#getCredentials}
@@ -20,6 +21,7 @@ import Auth0Context from './auth0-context';
  *   // State
  *   error,
  *   user,
+ *   isLoading,
  *   // Methods
  *   authorize,
  *   clearSession,