OAuth2 implementation flow

[StiviiK]

Hey there, i have a problem on how to implement properly the authentication flow with OAuth2.

E-Mail/Password flow

1. User enters creds ->
2. POST http://API_URL/login ->
3. Api verifys the creds and responds with an JWT Token (Nebular class: NbAuthJWTToken, this token been generated by the backend generated and is required for all api calls) ->
4. Angular stores the token in localStorage -> done.

Wanted OAuth2 flow (similar to E-Mail/Password)

1. User presses OAuth2 login button ->
2. User gets redirected to auth provider ->
3. auth provider redirects after successfull auth to callback url (with an access code) ->
4. POST http://API_URL/oauth/login ->
5. Api verifys the access code and responds with an JWT Token (this token been generated by the backend and is required for all api calls) ->
6. Angular stores the token in localStorage -> done.

My Problem currently are the points 1-5 working as expected, my backend gets called with
{ grant_type: 'authorization_code', code: '...', client_id: '...' } which is perfectly fine, i'll repsond with folowing json
{ data: { token: "BACKEND JWT TOKEN" } } (which works perfectly fine with E-Mail/Password)
and NebularAuth wraps this respond into an NbOAuth2Token, where the payload is the response from the Backend. But i want that my backend-token is stored in localStorage like with E-Mail/Password without wrapping into an NbOAuth2Token.

This is how my Strategy is implemented:

NbOAuth2AuthStrategy.setup({
  name: 'azuread',
  clientId: '[...]',
  clientSecret: '',
  authorize: {
    endpoint: 'https://login.microsoftonline.com/[...]/oauth2/authorize',
    responseType: NbOAuth2ResponseType.CODE,
    scope: '',
  },
  token: {
    endpoint: `${ApiService.API_URL}/auth/oauth2/token`,
    grantType: NbOAuth2GrantType.AUTHORIZATION_CODE,
    class: NbAuthOAuth2Token, // i tried here NbAuthJWTToken, but this causes an error
  },
  redirect: {
    success: '/pages/dashboard',
    failure: '/pages/error',
  },
}),

I hope you can understand my Problem. Thanks.

[nnixaa]

Hi @StiviiK, could you elaborate on this part But i want that my backend-token is stored in localStorage like with E-Mail/Password without wrapping into an NbOAuth2Token. please?

Also, have you tried the NbAuthOAuth2JWTToken token?

[StiviiK]

could you elaborate on this part

Yeah sure, it was a bit incomprehensive, so with E-Mail strategy my LocalStorage looks like this: as value is the correct JWT Token, provided by my backend. For Example in my JWTTokenInterceptor i can intercept my token in any request like this: Or as another example my JWTRoleProvider:

But when using OAauth the hole code breaks as my LocalStorage entry looks like this: And this breaks, at first my code from above but also when I adjust my code the type-saftey from Typescript breaks as i have to interpret the Token as any or as a own class because i need the methods.

Also, have you tried the NbAuthOAuth2JWTToken token?

Same result.

And btw. I'm using akveo/ngx-admin in case this matters anyhow.

[StiviiK]

With Email strategy the jwt token gets correctly decocded:

With OAuth2 strategy its broken:

[StiviiK]

This isn't a problem of nebular, i just have understod OAuth2 wrong. So i'll close this.