Error from Azure Static Web site "npm install @azure/msal-angular": could not resolve dependency: peer rxjs@"^7.0.0" from @azure/msal-angular@3.0.8

Question

Error from Azure Static Web site "npm install @azure/msal-angular": could not resolve dependency: peer rxjs@"^7.0.0" from @azure/msal-angular@3.0.8

Siegfried Heintze 1,721

I have created an azure static web app using the vscode extension and selecting the angular flavor. I followed these instructions https://learn.microsoft.com/en-us/azure/static-web-apps/get-started-portal?tabs=angular&pivots=github

I would like to add Azure AD authentication to my new web site using this tutorial: https://learn.microsoft.com/en-us/entra/identity-platform/tutorial-v2-angular-auth-code#create-your-project

However, when I execute this step `npm install @azure/msal-browser @azure/msal-angular I get this error:


npm install @azure/msal-angular
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: angular-basic@0.0.0
npm ERR! Found: rxjs@6.6.7
npm ERR! node_modules/rxjs
npm ERR!   rxjs@"~6.6.6" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer rxjs@"^7.0.0" from @azure/msal-angular@3.0.8
npm ERR! node_modules/@azure/msal-angular
npm ERR!   @azure/msal-angular@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! C:\Users\shein\AppData\Local\npm-cache\_logs\2023-11-07T03_47_19_606Z-eresolve-report.txt
npm ERR! A complete log of this run can be found in: C:\Users\xxxxx\AppData\Local\npm-cache\_logs\2023-11-07T03_47_19_606Z-debug-0.log

How can I proceed with adding MSAL.js so I can implement authentication?

VenkateshDodda-MSFT 14,206 Reputation points Microsoft Employee

2023-11-08T11:56:12.2833333+00:00

Hello @Siegfried Heintze ,

Following up to see if you have a chance to check my previous response and helped. Do let us know if you have any further questions on this.
Siegfried Heintze 1,721 Reputation points

2023-11-13T19:22:08.29+00:00

I am eagerly awaiting Venkatesh's (or anyone's) reply!
VenkateshDodda-MSFT 14,206 Reputation points Microsoft Employee

2023-11-20T01:28:11.45+00:00

Hello @Siegfried Heintze ,

Following up to see if you have a chance to check my previous response and helped. Do let us know if you have any further questions on this.

VenkateshDodda-MSFT 14,206 Reputation points Microsoft Employee

2023-11-08T11:56:12.2833333+00:00

Hello @Siegfried Heintze ,

Following up to see if you have a chance to check my previous response and helped. Do let us know if you have any further questions on this.
Siegfried Heintze 1,721 Reputation points

2023-11-13T19:22:08.29+00:00

I am eagerly awaiting Venkatesh's (or anyone's) reply!
VenkateshDodda-MSFT 14,206 Reputation points Microsoft Employee

2023-11-20T01:28:11.45+00:00

Hello @Siegfried Heintze ,

Following up to see if you have a chance to check my previous response and helped. Do let us know if you have any further questions on this.

Answer 1

VenkateshDodda-MSFT 14,206 Microsoft Employee

@Siegfried Heintze Thanks for reaching out to Microsoft Q&A, apologize for any inconvenience caused on this,

Based on the shared information I have understand that you are trying to implement the Azure AD authentication in Azure static Apps.

In Azure Static web Apps all the configurations like (Routing, Authentication, Authorization etc.,) should be defined in the staticwebapp.config.json file. Also, static web Apps supports both built-in authentication and custom identity provider authentication like (Microsoft Entra ID, Apple, Google etc.,).

Refer to the below documentation for more information about configuring authentication in static webapps:

Configure Built-In Authentication
Configure Custom Authentication in static WebApps.
Configure Authentication in Static WebApps using AzureAD B2C.

Feel free to reach back to me if you have any further questions on this.

Siegfried Heintze 1,721 Reputation points

2023-11-09T04:23:22.2533333+00:00

Thanks Venkatesh!

Does this new approach described in your link make using the MSAL.js wrappers like @azure/msal-browser obsolete? Does this new approach work for all the options like angular, react, blazor and vue?

I'll give it a try. Maybe I can try it tomorrow.

Siegfried
VenkateshDodda-MSFT 14,206 Reputation points Microsoft Employee

2023-11-09T08:17:32.71+00:00

@Siegfried Heintze The above-mentioned method is the recommended way to enable the authentication in static webapps and it is applicable for all the frameworks.
Siegfried Heintze 1,721 Reputation points

2023-11-10T20:50:52.9733333+00:00
I have made some trivial enhancements to the default angular code where I print out the current date in addition to "Hello World". Having pushed this I see this on localhost:4200 as well as in the azure web site.

Questions:

I have edited the config file as described here: https://learn.microsoft.com/en-us/azure/active-directory-b2c/configure-authentication-in-azure-static-app#31-add-an-openid-connect-identity-provider . Is it safe to put a secret here? (A) This will be pushed to a public repo. What could someone do with this secret? (B) Will this secret be present in the browser resident code?

I'm not clear on https://learn.microsoft.com/en-us/azure/active-directory-b2c/configure-authentication-in-azure-static-app#step-4-check-the-azure-static-web-app. I have made the changes to the config file. However I don't see where it says to do a "git push". So they say to go tohttps://xxxxxxxxxxxxxxxx.4.azurestaticapps.net/.auth/login/aadb2c and I just see my same "Hello World" and the current date time. What should I be seeing here? Do I need to "git commit & push"?

I'm confused because I don't see any instructions on creating a tool bar with a "Login" button and a new page indicating my login was successful. Is this magically generated for me when I push? I'm guessing it is not magically generated. Are there some instructions for creating a little "login" button? (Perhaps I could salvage some code from this old example: https://learn.microsoft.com/en-us/entra/identity-platform/tutorial-v2-angular-auth-code#create-your-project?) What function would the "login" button call to log in?

Can I demonstrate authentication locally with Azure AD using "swa start" before I push my secret to a public repo? So long as I adust the redirection on the portal registration, this has worked for all the other Azure AD authentication examples.

Should I see anything at http://localhost:4200/.auth/login/aadb2c?

Thanks

Siegfried
VenkateshDodda-MSFT 14,206 Reputation points Microsoft Employee

2023-11-15T08:26:21.8766667+00:00
@Siegfried Heintze Thanks for your follow up questions.

These Secrets "AADB2C_PROVIDER_CLIENT_ID,AADB2C_PROVIDER_CLIENT_SECRET" you have to add them as application settings to your static webapp in the portal under configuration blade. and these secrets won't be get stored in the repository.

In static webapp you will be storing your code in the repository either in GitHub or Azure devOps and all the build, publish actions will be taken care by GitHub Actions so that is the reason it is suggested to git commit and push to make sure that all the changes that you made will reflect when the user browse to the root url of the static webapps. By default, when authentication enabled on the static webapp if the user tries to request the root url of the webapp the request will get redirected to login endpoint based on the specific identity provider ( example here you are using Azure AD B2C the login endpoint will https://witty-island-11111111.azurestaticapps.net/.auth/login/aadb2c.) and on successful authentication the user will be able to see your application content.

Under step4# in configure the application and edit the UI section in this tutorial in src/app/app.component.html file login button related code is present and also this tutorial related to Azure AD B2C authentication in static webapps doesnt have any code related to login button.

As per my investigations, if you are running your static webapp in local you will be able to configure this Azure AD b2c authentication before pushing to repo.

Should I see anything at http://localhost:4200/.auth/login/aadb2c? --> You won't be seeing anything. Once the authentication is done, we will be passing the token to this endpoint.

Feel free to reach back to me if you have any further questions on this.
Siegfried Heintze 1,721 Reputation points

2023-11-15T21:05:53.9466667+00:00

Oh shucks! Shame on me for not reading step 3 more carefully. OK, I've made those settings and I have pushed the staticwebapp.config.json and I go to the https://xxxxxxx.4.azurestaticapps.net/.auth/login/aadb2c and I get a 404 error.

Since I forgot to hit the "save" button when creating the application settings and then pushed the new staticwebapp.config.json and got the 404 error when going to the /.auth/login/aadb2c. So added those settings again and hit save.

Now on app service, I can push the restart button but I see no restart button here! So I made a minor change to app.component.ts (updated by built-at timestamp) and pushed again hoping this would restart it. No luck. Still I got a 404 error (but I see my timestamp was updated).

Unlike azure app service, I could not find any logs to look at. I tried to configure appinsights and I see it says: "App Insights is only applicable to Static Web Apps with at least one function. Add a function to your app to enable App Insights". I suppose I could add a function but I would really prefer to see authentication work first. I see there is a "Logs" tab for the resource group. Are these logs I want? I looked under queries but there was no entry for azure static web apps.

(6) How do I debug this 404 without any logs?

I was looking for some clues and started reading https://learn.microsoft.com/en-us/azure/static-web-apps/configuration and I see they are discussing roles.

(7) Do these roles work with Azure AD B2C? It used to be that only Azure AD B2B had roles and I was using an extension attribute to implement roles in Azure AD B2C. Can I use the roles feature in the routing feature with Azure AD B2C? I see there is a manage roles feature which will send an invitation.. but this does not look like the Azure AD B2C.

Thanks!

Siegfried
VenkateshDodda-MSFT 14,206 Reputation points Microsoft Employee

2023-11-17T06:51:20.07+00:00
@Siegfried Heintze Thanks for your follow up queries.

Similar to app service static web apps won't have any start or stop button in the portal.

If you want to make sure that your changes got deployed, you need to trigger a new GitHub action.

You can run the Availability and performance detector Under Diagnose and solve problems blade in your static webapp from Azure Portal to know more/identify/troubleshoot 4XX errors.

As per my investigations, these roles work for all the identity providers and in documentation it called out that these are not applicable to specific identity providers.

Feel free to reach back to me if you have any further questions on this.
Siegfried Heintze 1,721 Reputation points

2023-11-21T23:41:31.1233333+00:00

Maybe I found the problem: When I go to configuration and management I see that the app settings are being ignored. Why is this the default? How do I change this?

I did az staticwebapp appsettings list -n xxxxxxxxxxxxxxxAzureFunc002 -g rg_xxxxAngular

and everything looks good. I cannot find any place to tell it to use the app settings.
VenkateshDodda-MSFT 14,206 Reputation points Microsoft Employee

2023-11-22T15:03:38.0433333+00:00

@Siegfried Heintze Thanks for your follow questions on this.

To test this out, I have created a sample app with angular framework enabled Azure AD authentication to it.

I have created the app settings AZURE_CLIENT_ID, AZURE_CLIENT_SECRET in the portal in application settings under configuration menu but when I ran the configuration and management detector under the diagnose and solve problems.
I am also seeing the same as shown in the earlier shared image. I am checking with internal team on this.
Siegfried Heintze 1,721 Reputation points

2023-11-22T16:34:39.64+00:00

Can you make azure static web sites using the portal? I cannot: https://learn.microsoft.com/en-us/answers/questions/1381837/error-when-following-azure-static-web-app-tutorial

I can make them using the VSCode extension however.

So when you follow those instructions, can you authenticate your azure static web site?

What exactly do you recommend I look at for the "diagnose and solve problems" tab?

Previously I went to the Availability & Performance tab and set it to one hour and reproduce the 404 error and nothing appeared on the chart. However this morning I see my spikes from yesterday from the 404 errors on the 24 hr chart. I'm not seeing anything helpful on this chart.

So I go to content deployment and it says no deployments in the last 24 hours. I just updated my "built-at" timestamp in app.component.ts and did a git push. No errors in the github action logs. Time stamp displays correctly in the browser. The content Deployment display on the portal says no deployments were attempted. I guess this is really slow. I will update posting this later today after it has had some more time.

Update: OK, here it is, finally! I don't see anything interesting here either. Do you?

So now I go to the Configuration and management:

Nothing new here either. When I click on the link I circled in red it takes to the instructions on how to add app settings but I have already done that.
Siegfried Heintze 1,721 Reputation points

2023-11-22T19:42:31.1633333+00:00

Venkatesh: I've been thinking. Can I email you the specifics and have you check out my azure static web site in Azure? If it was working and since it is B2C, you should be able to login. I could give you my public github repo too and you could take a look.

Alternatively, do you have a free azure support ticket you could grant me?

If not, maybe I would buy one so I could have a teams conversation with a support engineer. Maybe the same support engineer could also address my problems with creating azure static web sites in the portal?

Thanks

Siegfried
VenkateshDodda-MSFT 14,206 Reputation points Microsoft Employee

2023-11-23T12:01:01.0366667+00:00

Siegfried Heintze Thanks for your response, Please send an email with the above-mentioned details and link of this thread to AzCommunity@microsoft.com with subject line as "ATTN: Venkatesh" so I can check and assist you further on this.

Error from Azure Static Web site "npm install @azure/msal-angular": could not resolve dependency: peer rxjs@"^7.0.0" from @azure/msal-angular@3.0.8

1 answer

Activity