MSAL localhost

So let's say that you have MSAL configured and it works perfectly in production however it fails in your development (localhost) environment. As a matter of fact you get a javascript error message such as the following.

Unsafe JavaScript attempt to initiate navigation for frame with origin 'https://myurl.azurewebsites.net' from frame with URL 'http://localhost:8080/login'. The frame attempting navigation is neither same-origin with the target, nor is it the target's parent or opener.

well my dear friend odds are you most likely made the same bonehead move that I did, especially if on your older laptop it worked perfectly, but fails on your new one. I'll cut to the chase, you need to specify the correct redirect url when defining your IdentityContext:

  IdentityService: new IdentityService(

    new IdentityContext(

      process.env.VUE_APP_CLIENT_ID, 

      process.env.VUE_APP_REDIRECT_URL,                   

      `https://login.microsoftonline.com/${process.env.VUE_APP_TENANT_ID}`))

as you can most like deduce i am using vue.js environment variables to hold my values, but you know which files do not get pushed to your repo, the ones that end in .local, and which ones does your local machine use? the ones that end in .local. 

trust me if this solved your problem you are feeling a lot less silly than I did when I figured it out.

all i had to do was open my .env.dev file

VUE_APP_TITLE=DEV-remote
VUE_APP_CLIENT_ID=00000000-957e-4ae1-a64a-ab186e161727
VUE_APP_REDIRECT_URL=https://myurl.azurewebsites.net
VUE_APP_PROFILE_MATCHCER_API_URL=https://myurl.azurewebsites.net/api/v1

and change it to

VUE_APP_TITLE=DEV-remote
VUE_APP_CLIENT_ID=00000000-957e-4ae1-a64a-ab186e161727
VUE_APP_REDIRECT_URL=https://localhost:8080
VUE_APP_PROFILE_MATCHCER_API_URL=https://myurl.azurewebsites.net/api/v1

and all was well in the world again