1

I'm setting up a serverless Angular 7 application for work that uses Azure AD B2C with a custom login screen. The goal of this application is to allow users to log in through B2C inside our application, then route them to other pages within the application based on roles. I am able to log in successfully and am redirected to /index.html (correct behavior), but the index page continuously reloads with new state and token values, preventing anything on the web page from being clicked due to the refreshing. Any ideas on what to try to stop this refreshing?

I've tried setting login options, using a discovery document, checking for valid tokens. I've changed my redirect uri and have implemented/unimplemented my own routing numerous times. I've looked into websocket-dev-server reload issues as well and I don't believe that's where my error lies. Honestly I've tried almost every option related to this issue on here and github.

Using anything with discovery document results in a 404 not found message in regards to /.well-known/openid-configuration. Other options that I've tried have not changed the result.

I'm using implicit flow. I have a signed certificate installed. The results are identical when running on localhost and when running on the Azure endpoint. I am currently not using any routing paths for root (same results when I was).

app.component.ts

constructor(private oauthService: OAuthService) {
    this.configureWithNewApiConfig();
}

private configureWithNewApiConfig() {  
    this.configureAuth();
    this.oauthService.setStorage(sessionStorage);
    this.oauthService.tokenValidationHandler = new JwksValidationHandler();
    this.oauthService.initImplicitFlow();
 }

private configureAuth(): void {
this.oauthService.configure( {
      clientId: '9c3276bb-22c3-429f-a456-fcfcef3254d0',
      redirectUri: 'https://<url>storagedev.z13.web.core.windows.net/index.html',
      loginUrl: 'https://<url>.b2clogin.com/<url>.onmicrosoft.com/oauth2/v2.0/authorize?p=b2c_1_localaccount_signin',
      logoutUrl: 'https://<url>.b2clogin.com/<url>.onmicrosoft.com/oauth2/v2.0/logout?p=b2c_1_localaccount_signin',
      scope: 'openid https://<url>.onmicrosoft.com/<api-name>/user_impersonation',
      oidc: true,
      issuer: 'https://<url>.b2clogin.com/ab735adf-d58c-4607-b749-2c78ab372df4/v2.0/',
      tokenEndpoint: 'https://<url>.b2clogin.com/<url>.onmicrosoft.com/oauth2/v2.0/token?p=b2c_1_localaccount_signin',
      responseType: 'id_token token',
      clearHashAfterLogin: true,
      disableAtHashCheck: true,
      showDebugInformation: true,
      strictDiscoveryDocumentValidation: false, 
      jwks: {
        keys: [
          {
            "kid":"X5eXk4xyojNFum1kl2Ytv8dlNP4-c57dO6QGTVBwaNk",
            "nbf":1493763266,
            "use":"sig",
            "kty":"RSA",
            "e":"AQAB",
            "n":"tVKUtcx_n9rt5afY_2WFNvU6PlFMggCatsZ3l4RjKxH0jgdLq6CScb0P3ZGXYbPzXvmmLiWZizpb-h0qup5jznOvOr-Dhw9908584BSgC83YacjWNqEK3urxhyE2jWjwRm2N95WGgb5mzE5XmZIvkvyXnn7X8dvgFPF5QwIngGsDG8LyHuJWlaDhr_EPLMW4wHvH0zZCuRMARIJmmqiMy3VD4ftq4nS5s8vJL0pVSrkuNojtokp84AtkADCDU_BUhrc2sIgfnvZ03koCQRoZmWiHu86SuJZYkDFstVTVSR0hiXudFlfQ2rOhPlpObmku68lXw-7V-P7jwrQRFfQVXw"
          }
        ]
      },     
    });
  }

The expected results are that once logged in, a user should be able to stay on the index page without a reload loop.

Fiddler doesn't show any errors, and looking at the console in Chrome just shows an iteration of how many times the page has been navigated to. Results are the same across Firefox, Chrome, and IE.

It's entirely possible that this could be something unrelated that I'm overlooking. This is my first Angular app of this size that I'm having to make.

2
  • Can you post the code for your login redirection to /index.html?
    – Todarmal
    Apr 8, 2019 at 18:15
  • @Todarmal that would be the 'redirectUri' in the above snippet. I did have it in a route, but found that doing so made no difference, so I took the route out.
    – KBrowning
    Apr 8, 2019 at 18:24

1 Answer 1

0

The constant reload was caused by trying to load the custom B2C login screen immediately in either the constructor or the ngOnInit methods. While having the login screen load first before any other actions can happen is ideal for us, we will settle with the user going to a landing page first before logging in until further development can be made to fix this issue.

2
  • 1
    To fix these kinds of issues, I recommend this kind of approach where you delay navigation and making route guards with async observables - that way navigation will "hold" until the auth stuff has loaded, and you know if a user can go somewhere.
    – Jeroen
    May 2, 2019 at 11:38
  • 1
    I had used route guards, but the problem was being caused by something else. I ended up going with EasyAuth as the site will be accessed through azure function proxies, so there is no manual configuration required.
    – KBrowning
    May 3, 2019 at 12:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.