Add in progress check

jitendraP-ashutec · Oct 20, 2020 · df621c3 · df621c3
1 parent 0617b5c
commit df621c3
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 20 deletions.
diff --git a/lib/msal-react/src/MsalProvider.tsx b/lib/msal-react/src/MsalProvider.tsx
@@ -32,8 +32,8 @@ export const MsalProvider: FunctionComponent<MsalProviderProps> = ({instance, ch
                     setLoginInProgress(true);
                     break;
                 case EventType.LOGIN_SUCCESS:
-                    setLoginInProgress(false);
                     setAccounts(instance.getAllAccounts());
+                    setLoginInProgress(false);
                     break;
                 case EventType.LOGIN_FAILURE:
                     setLoginInProgress(false);

diff --git a/lib/msal-react/src/useMsalAuthentication.ts b/lib/msal-react/src/useMsalAuthentication.ts
@@ -19,35 +19,33 @@ export function useMsalAuthentication(
     authenticationRequest?: PopupRequest|RedirectRequest|SsoSilentRequest, 
     accountIdentifier?: AccountIdentifiers
 ): MsalAuthenticationResult {
-    const msal = useMsal();
+    const { instance, loginInProgress } = useMsal();
     const isAuthenticated = useIsAuthenticated(accountIdentifier);
     const [result, setResult] = useState<AuthenticationResult|null>(null);
     const [error, setError] = useState<AuthError|null>(null);
 
     const login = useCallback((loginType: InteractionType, request?: PopupRequest|RedirectRequest|SsoSilentRequest): Promise<AuthenticationResult|null> => {
         switch (loginType) {
             case InteractionType.Popup:
-                return msal.instance.loginPopup(request as PopupRequest);
+                return instance.loginPopup(request as PopupRequest);
             case InteractionType.Redirect:
                 // This promise is not expected to resolve due to full frame redirect
-                return msal.instance.loginRedirect(request as RedirectRequest).then(null);
+                return instance.loginRedirect(request as RedirectRequest).then(null);
             case InteractionType.Silent:
-                return msal.instance.ssoSilent(request as SsoSilentRequest);
+                return instance.ssoSilent(request as SsoSilentRequest);
             default:
                 throw "Invalid interaction type provided.";
         }
-    }, [msal, authenticationRequest, interactionType]);
+    }, [instance, authenticationRequest, interactionType]);
 
     useEffect(() => {
-        /*
-         * TODO: Check whether login is already in progress
-         */
-        if (!isAuthenticated) {
+        if (!isAuthenticated && !loginInProgress) {
             login(interactionType, authenticationRequest)
                 .then(result => setResult(result))
                 .catch(error => setError(error));
         }
-    }, [isAuthenticated]);
+
+    }, [isAuthenticated, loginInProgress]);
 
     return { login, result, error };
 }
diff --git a/lib/msal-react/stories/hooks.stories.tsx b/lib/msal-react/stories/hooks.stories.tsx
@@ -38,11 +38,18 @@ UseIsAuthenticatedHook.story = { name: "useIsAuthenticated" };
 
 export const UseMsalAuthenticationHook = () => (
     <MsalProvider instance={msalInstance}>
-        <UseMsalAuthenticationEample />
+        <UseMsalAuthenticationExample />
     </MsalProvider>
 );
 UseMsalAuthenticationHook.story = { name: "useMsalAuthentication" };
 
+export const UseMsalAuthenticationHookSilently = () => (
+    <MsalProvider instance={msalInstance}>
+        <UseSilentMsalAuthenticationExample />
+    </MsalProvider>
+);
+UseMsalAuthenticationHookSilently.story = { name: "useMsalAuthentication with ssoSilent" };
+
 const UseMsalExample = () => {
     const context = useMsal();
 
@@ -62,7 +69,7 @@ const UseIsAuthenticatedExample = () => {
 
     return (
         <React.Fragment>
-            <p>The <pre style={{display: "inline"}}>useIsAuthenticated()</pre> hook will tell you if there is at least one authenticated account. The hook also accepts an optional "username" argument, and will indicate whether the given user is authenticated.</p>
+            <p>The <pre style={{display: "inline"}}>useIsAuthenticated()</pre> hook will tell you if there is at least one authenticated account. The hook also accepts optional username and homeAccountId arguments, and will indicate whether the given user is authenticated.</p>
 
             <p>
                 {isAuthenticated && (
@@ -80,12 +87,12 @@ const UseIsAuthenticatedExample = () => {
     );
 };
 
-const UseMsalAuthenticationEample = () => {
+const UseMsalAuthenticationExample = () => {
     useMsalAuthentication(InteractionType.Popup);
 
     return (
         <React.Fragment>
-            <p>The <pre style={{display: "inline"}}>useMsalAuthentication()</pre> hook initiates the authentication process. It accepts optional parameters for a specific "username", or a custom "loginHandler" function which initiates a custom authentication flow using the MSAL API.</p>
+            <p>The <pre style={{display: "inline"}}>useMsalAuthentication()</pre> hook initiates the authentication process. You must specify what interaction type to use for authentication. It also accepts optional parameters to identify if a specific user is signed in and a request object passed to the MSAL API for authentication, if necessary.</p>
             <UnauthenticatedTemplate>
                 <p><b>Authenticating...</b></p>
             </UnauthenticatedTemplate>
@@ -98,15 +105,18 @@ const UseMsalAuthenticationEample = () => {
     );
 };
 
-const UseSilentMsalAuthenticationEample = () => {
+const UseSilentMsalAuthenticationExample = () => {
     const {login, error} = useMsalAuthentication(InteractionType.Silent);
-    if (error) {
-        login(InteractionType.Popup);
-    }
+
+    React.useEffect(() => {
+        if(error) {
+            login(InteractionType.Popup);
+        }
+    }, [error]);
 
     return (
         <React.Fragment>
-            <p>The <pre style={{display: "inline"}}>useMsalAuthentication()</pre> hook initiates the authentication process. It accepts optional parameters for a specific "username", or a custom "loginHandler" function which initiates a custom authentication flow using the MSAL API.</p>
+            <p>The <pre style={{display: "inline"}}>useMsalAuthentication()</pre> hook initiates the authentication process. You must specify what interaction type to use for authentication. It also accepts optional parameters to identify if a specific user is signed in and a request object passed to the MSAL API for authentication, if necessary.</p>
             <UnauthenticatedTemplate>
                 <p><b>Authenticating...</b></p>
             </UnauthenticatedTemplate>