Angular-auth-oidc-client: IsAuthenticated returns false

[chriswalsh12]

Hi
I have integrated the sample-code-flow-azuread sample into my code. I have used the following config:

stsServer: 'https://login.microsoftonline.com/{my azure AD tenant Id}/v2.0',
authWellknownEndpoint: 'https://login.microsoftonline.com/{my azure AD tenant Id}/v2.0',
redirectUrl: window.location.origin,
clientId: '{my app id}',
scope: 'openid profile email api://{my app id}/access_as_user',
responseType: 'code',
silentRenew: false,
maxIdTokenIatOffsetAllowedInSeconds: 600,
issValidationOff: true,
autoUserinfo: false,
silentRenewUrl: window.location.origin + '/silent-renew.html',
logLevel: LogLevel.Debug

I get redirected to the MS login page and I sign in and get redirected back to my localhost page. However, when I call IsAuthenticated it returns false and I get a debug message on the console saying "Wanted to read '{app id}_authzData' but nothing was found". When I call login in again it redirects me back to the main page.

Can anyone help as I have been trying to get this to work for a couple of weeks now and am banging my head against a brick wall?

Thanks

[damienbod]

Hi @chriswalsh12

Need some more info. Do you see anything in the F12 Browser console, network logs? When the STS redirects back to your application, the callback logic needs to run, so that callback route should not be authenticated or have a guard running on it. When the callbacl logic completes correctly, the isAuthenticagted will be set to true. Your callback logic is failing for some reason, which should be visible in the console logs of the browser.

Hope this helps, greetings Damien

[chriswalsh12]

Hi Damien

Thanks so much for your response. Where is the callback logic? Should I have it in my code or is it in the package?

I have clicked login again (which calls oidcSecurityService.authorize) and checked the network log and browser console. On the network log it shows a call to localhost with three parameters (code, state and session state). It then calls out to the stsServer as follows (have replaced long ids for readability):

https://login.microsoftonline.com/{tenantid}/oauth2/v2.0/authorize?client_id={clientId}&redirect_uri=https%3A%2F%2Flocalhost%3A5001&response_type=code&scope=openid%20profile%20email%20api%{api string}access_as_user&nonce={nonce}&state={state}&code_challenge={code_challenge}code_challenge_method=S256

I get a 302 redirect on this call back to localhost:5001 and it my home page loads normally. The console log is as follows (again, long strings removed for readability):

BEGIN Authorize OIDC Flow, no auth data VM1243 vendor.js:114351
Authorize created. adding myautostate: {autostate characters} VM1242 vendor.js:114351
false main.js:1820
Navigated to https://localhost:5001/?code={code}&state={state}&session_state={session_state}
DevTools failed to load SourceMap: Could not load content for https://unpkg.com/feather.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
Angular is running in the development mode. Call enableProdMode() to enable the production mode. core.js:40853
[WDS] Live Reloading enabled. client:52

I haven't put any guards on any of my routes yet so am confident that is not the problem.

I have also tried adding a call to oidcSecurityService.checkAuth in my ngOnInit of my AppComponent which doesn't fix it.

When I try and check the value of isAuthenticated with "this.oidcSecurityService.isAuthenticated$.subscribe((result) => console.log(result))" I get a console message of 'Wanted to read '{tenant id}_authzData' but nothing was found'.

When I add the auto login logic in your example it just goes round in an infinite loop and I get CORS errors in the console.

Would appreciate any more help you can provide on this.

Thanks

[chriswalsh12]

Hi

I am still struggling with getting this to work. I have made various adjustments and am now stuck on a CORS error when the app tries to get the token:

Access to XMLHttpRequest at 'https://login.microsoftonline.com/{tenantId}/oauth2/v2.0/token' from origin 'https://localhost:5001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
angular-auth-oidc-client.js:156 OidcService code request https://login.microsoftonline.com/{tenantId}/v2.0 [HttpErrorResponse]

Any ideas how to fix this?

Thanks
Chris

[chriswalsh12]

Hi Damien
I am closing this as I have fixed the issue. I had configured the application in AAD to have both a Web and SPA configuration. When I deleted the web part it worked. So sorry to have bothered you.
Thanks
Chris

[damienbod]

@chriswalsh12

No problem, sorry I didn't answer you better! It's cool you created the issue, this will help others, and me for future reference.

Greetings Damien

[chriswalsh12]

No worries. Thanks for all of your blog posts and responses on this as it has really helped me.
Chris

[mpaolor]

@chriswalsh12 Hi Chris, I have the same problem that you stated in your first post. How did you solve it?
I have an angular 11 application trying to get authorization and communicate with net core 3.1 api.

I'm rather new with Azure and Azure AD and I followed @damienbod tutorials at:

• https://damienbod.com/2020/05/29/login-and-use-asp-net-core-api-with-azure-ad-auth-and-user-access-tokens/
• https://damienbod.com/2020/06/08/angular-spa-with-an-asp-net-core-api-using-azure-ad-auth-and-user-access-tokens/

Could it be that the ui app registration (that I don't really need) somehow inteferes?

thank you in advance

[chriswalsh12]

Hi

This was a while ago now so am struggling to remember but for me it was definitely due to a clash between the configuration of the within Azure AD. I think I had set up the application registration incorrectly on AD. If you follow the @damienbod example to the letter it will definitely work.

What is the exact issue you are getting?

Thanks

[mpaolor]

i followed the example to the letter (or made mistakes that i'm not aware of) but I had the same error that you had at the beginning:

config:

stsServer: 'https://login.microsoftonline.com/{my azure AD tenant Id}/v2.0',
authWellknownEndpoint: 'https://login.microsoftonline.com/{my azure AD tenant Id}/v2.0',
redirectUrl: window.location.origin,
clientId: '{my app id}',
scope: 'openid profile email api://{my app id}/access_as_user',
responseType: 'code',
silentRenew: true,
maxIdTokenIatOffsetAllowedInSeconds: 600,
issValidationOff: true,
autoUserinfo: false,
silentRenewUrl: window.location.origin + '/silent-renew.html',
logLevel: LogLevel.Debug

and same behaviour as you: redirected to the MS login page and I sign in and get redirected back to my localhost page. when i try to get the token for an api call I get a debug message on the console saying "Wanted to read '{app id}_authzData' but nothing was found".

i "solved" it using the msal library from microsoft...

[chriswalsh12]

I'm pretty sure that this was fixed for me by changing the config of the app registration in AAD. I think I had two platform configs setup. Might be worth checking that. I was put off using MSAL as it seemed to be in flux and wanted a library that supported the auth flow.

[damienbod]

I'll probably add documentation for the App registrations for SPA public clients and App App registration APIs. a lot seem to have problems here. The Microsoft.Identity.Web docs have improved here.

Also the issValidationOff: false would be more secure and should be possible for your tenant.

Greetings Damien