akveo / akveo/ngx-admin

Error authenticating with Azure AD B2C OAuth2 provider

Open
#1,757 8 comments 0 reactions 0 assignees View on GitHub
enhancement P2: important
Dominant language
TypeScript
Stars
25.7k
Forks
7.9k
PR merge metrics
No merged PRs in 30d

Description

### 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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.