diff --git a/lib/msal-react/src/MsalProvider.tsx b/lib/msal-react/src/MsalProvider.tsx index 6adc7a4249..08e4e35c25 100644 --- a/lib/msal-react/src/MsalProvider.tsx +++ b/lib/msal-react/src/MsalProvider.tsx @@ -32,8 +32,8 @@ export const MsalProvider: FunctionComponent = ({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 index fd2cb49b1c..0de4c3f52d 100644 --- a/lib/msal-react/src/useMsalAuthentication.ts +++ b/lib/msal-react/src/useMsalAuthentication.ts @@ -19,7 +19,7 @@ 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(null); const [error, setError] = useState(null); @@ -27,27 +27,25 @@ export function useMsalAuthentication( const login = useCallback((loginType: InteractionType, request?: PopupRequest|RedirectRequest|SsoSilentRequest): Promise => { 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 index 2312e0c9d7..3d1146b92d 100644 --- 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 = () => ( - + ); UseMsalAuthenticationHook.story = { name: "useMsalAuthentication" }; +export const UseMsalAuthenticationHookSilently = () => ( + + + +); +UseMsalAuthenticationHookSilently.story = { name: "useMsalAuthentication with ssoSilent" }; + const UseMsalExample = () => { const context = useMsal(); @@ -62,7 +69,7 @@ const UseIsAuthenticatedExample = () => { return ( -

The

useIsAuthenticated()
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.

+

The

useIsAuthenticated()
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.

{isAuthenticated && ( @@ -80,12 +87,12 @@ const UseIsAuthenticatedExample = () => { ); }; -const UseMsalAuthenticationEample = () => { +const UseMsalAuthenticationExample = () => { useMsalAuthentication(InteractionType.Popup); return ( -

The

useMsalAuthentication()
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.

+

The

useMsalAuthentication()
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.

Authenticating...

@@ -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 ( -

The

useMsalAuthentication()
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.

+

The

useMsalAuthentication()
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.

Authenticating...