Error authenticating with Azure AD B2C OAuth2 provider

[jjgriff93]

Issue type

I'm submitting a ... (check one with "x")

• [X ] bug report
• [ ] feature request
• [ ] question about the decisions made in the repository

Issue description

Current behavior: I'm trying to implement Azure AD B2C as an authentication provider in the ngx-admin starter kit. I've followed the docs for implementing an OAuth2 provider, and have created an authentication strategy with all the required fields.

All goes well when clicking the login button, I am directed to the microsoft log in, however after signing in and redirected back to my app, I get 'This application does not have sufficient permissions against this web resource'.

After some testing, I've found that the reason for this is because Azure AD B2C expects the responseType parameter to have id_token instead of token in line with OAuth2 authentication standards. However, following the Nebular docs, for the responseType parameter in the authentication strategy, we're told to put NbOAuth2ResponseType.TOKEN. After checking what this substitutes in, I can see that this provides a string of token, not id_token, which is causing my issue.

I can't see any way to override this however. When I try and replace NbOAuth2ResponseType.TOKEN with 'id_token' and testing, the login button will no longer work, and in the JavaScript console I get:

ERROR TypeError: Cannot read property 'call' of undefined
    at NbOAuth2AuthStrategy.push../node_modules/@nebular/auth/strategies/oauth2/oauth2-strategy.js.NbOAuth2AuthStrategy.isRedirectResult (oauth2-strategy.js:174)
    at NbOAuth2AuthStrategy.push../node_modules/@nebular/auth/strategies/oauth2/oauth2-strategy.js.NbOAuth2AuthStrategy.authenticate (oauth2-strategy.js:137)
    at NbAuthService.push../node_modules/@nebular/auth/services/auth.service.js.NbAuthService.authenticate (auth.service.js:112)
    at NbOAuth2LoginComponent.push../src/app/@theme/components/auth/nb-oauth2-login/nb-oauth2-login.component.ts.NbOAuth2LoginComponent.login (main.js:1202)
    at Object.eval [as handleEvent] (NbOAuth2LoginComponent.html:2)
    at handleEvent (core.js:11115)
    at callWithDebugContext (core.js:12212)
    at Object.debugHandleEvent [as handleEvent] (core.js:11915)
    at dispatchEvent (core.js:8582)
    at core.js:9026

Expected behavior: Not receiving an error after clicking the login button, or having the option for NbOAuth2ResponseType.IDTOKEN in the nebular/auth library.

Steps to reproduce:

1. Downloading ngx-admin sample app
2. Following documentation for implementing OAuth: https://akveo.github.io/nebular/docs/auth/configuring-google-oauth2#complete-example
3. Filling out the strategy parameters in core.module.ts like so:

   strategies: [
     NbOAuth2AuthStrategy.setup({
       name: 'AzureADB2C',
       clientId: 'id-from-Azure-portal',
         clientSecret: '',
         authorize: {
           // tslint:disable-next-line:max-line-length
           endpoint: 'https://login.microsoftonline.com/tfp/apps-auth-endpoint',
           responseType: NbOAuth2ResponseType.TOKEN, // 'id_token',
           scope: 'https://mytenant.onmicrosoft.com/api/profile openid',
           redirectUri: 'https://localhost:5001/auth/callback',
         },
         redirect: {
           success: '/',
         },
     }),
   ],

4. Running the app, navigating to /auth and clicking the log in button

[jjgriff93]

As a workaround I've had to temporarily change token to id_token in the nebular auth module (file: oauth2-strategy.options.js, line 10) - which obviously will be overriden whenever I update the packages

[nnixaa]

Hey @jjgriff93, thanks for a detailed description.

You are right, currently only two OAuth2 response types are supported out of the box - token and code and there is no simple process to add a new one (like id_token which I believe is not a part of the specification per se, but is allowed as a user-defined type https://tools.ietf.org/html/rfc6749#section-8.4).

The reason why you are getting the error after providing a custom responseType is that here https://github.com/akveo/nebular/blob/fd9509562542fce280f1f1d917fc7ab39f0b4dab/src/framework/auth/strategies/oauth2/oauth2-strategy.ts#L219 the strategy is trying to call a particular redirect handler based on its name (https://github.com/akveo/nebular/blob/fd9509562542fce280f1f1d917fc7ab39f0b4dab/src/framework/auth/strategies/oauth2/oauth2-strategy.ts#L141), which it obviously is failing to do as there is no such handler there.

We should to think about a way to allow extension of this functoinality, but currently I can see two possible workarounds:

• redefine enum value like this (NbOAuth2ResponseType as any)['TOKEN'] = 'id_token' somewhere before your strategy configuration. This, of course more of a hack rather then solution, but it should temporary fix the issue.
• extend the default NbAuthOAuth2Strategy and add a new response type with all the handlers.

[jjgriff93]

Thanks @nnixaa , that first workaround has worked perfectly. Have replied to you on the other related issue re the redirecting, so we can close this one off. Thanks again!

[stubbsy345]

I have just posted another issue with the same error. It appears this fix works only in the development build. The error recurs when switched into production mode. Any ideas why this might be?

[stubbsy345]

I believe jjgriff93's overwrite of the enum value is not reassigning the value when in production mode. I have tried removing buildOptimizer from production build as this has had previous problems affecting enums. However, this has no effect in this case and still get the same error as above.

[jjgriff93]

Interesting @stubbsy345 I've just tested this and get the same behaviour, not working with -prod build. @nnixaa any ideas what could be causing this?

[nnixaa]

Hey @jjgriff93, could you post the error?

[stubbsy345]

@nnixaa it is exactly the same as the error in the original post on this thread. It appears your solution for overwriting the enum does not work when built in production.