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.

KBrowning
  • 11
  • 4
  • Can you post the code for your login redirection to `/index.html`? – Todarmal Apr 08 '19 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 08 '19 at 18:24

1 Answers1

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.

KBrowning
  • 11
  • 4
  • 1
    To fix these kinds of issues, I recommend [this kind of approach](https://github.com/jeroenheijmans/sample-angular-oauth2-oidc-with-auth-guards/blob/3cf6dde02138fb43bf44b984dda2df9bfd4da057/src/app/core/auth.service.ts#L91) where you delay navigation and making [route guards with async observables](https://github.com/jeroenheijmans/sample-angular-oauth2-oidc-with-auth-guards/blob/3cf6dde02138fb43bf44b984dda2df9bfd4da057/src/app/core/auth-guard.service.ts#L18) - that way navigation will "hold" until the auth stuff has loaded, and you _know_ if a user can go somewhere. – Jeroen May 02 '19 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 03 '19 at 12:21