Angular Msal Access Token Retrieval

Question

I have been trying to get an access token from MSAL in Angular but seem to be winding myself in knots and hoping somebody could clear up the correct process for doing so.

I am currently using the following to try and get a token.

 this.msal.acquireTokenSilent({ scopes }).then((response) => {
                console.log(response.accessToken);
            });
        }, (error) => {
            if (error instanceof ClientAuthError) {
                this.msal.loginRedirect({ scopes });
            }
            if (error instanceof InteractionRequiredAuthError) {
                this.msal.acquireTokenRedirect({ scopes });
            }
            if (error instanceof HttpErrorResponse && error.status === 401) {
                this.msal.acquireTokenRedirect({ scopes });
            }
        });

This works if you are logged into Azure, however if you are not logged in then it falls into the ClientAuthError and redirects you to login. After logging in you are redirected to the original page and need to click the same login button again.

Is there a way to get an access token at the point of logging in, instead of having to login and then call acquireTokenSilent afterwards?

alphaz18 alphaz18 · Accepted Answer · 2020-06-22T23:23:09

in msal js, by default if you call acquiretokenredirect it does a second redirect. which will make you lose the "token" on the second redirect. what you can do is prevent it from doing the second redirect by putting "navigateToLoginRequestUrl" to false in the auth config. then you should be able to get the token and use it.

Angular Msal Access Token Retrieval

1 Answers