Closed

Angular can't read AccessToken when encryption enabled #9138

adhamawadhi created 12 days ago

Angular app first time login is work fine, but when refresh the page there is an error occured due to reading AccessToken which is encrypted in line remember-me.service.ts

ERROR SyntaxError: Unexpected token 'õ', "õ¿Ø]&¶`"... is not valid JSON
    at JSON.parse (&lt;anonymous&gt;)

Steps to reproduce

Enable OpenIddict Token Encryption
Login in angular for first time (it wokrs fine)
Open explorer Console devleoper
Refresh the page ( press F5)
you can see Exception in Consol tab

Suggestion to Solve I can see the id_token is available to read same as access_token when encryption enabled. Try read access_token when error occured read id_token if exists.

Go to accepted answer

6 Answer(s)

0

maliming created 12 days ago
Support Team Fullstack Developer

hi

Have you set the DisableAccessTokenEncryption = false in the authsever project?

Thanks.

https://abp.io/support/questions/6562/How-to-implement-the-token-encryption-in-OpenIdDict#answer-3a105090-f2eb-80e3-6fae-d3b99bdca2ce
0

adhamawadhi created 11 days ago

Yes, and it works fine. But I need it encrypted
0

maliming created 11 days ago
Support Team Fullstack Developer

ok, I will ask our angular Team.

Thanks.

sumeyye.kurtulus created 10 days ago

Support Team Angular Expert

Hello, it currently works as expected as you have mentioned. However, if encryption is required, you’ll need to apply a workaround until we release an official fix for that.

In the meantime, you can override the related service just to skip the error. Here’s a suggested approach:

// new-remember-me.service.ts
export class NewRememberMeService extends RememberMeService {
  readonly #rememberMe = 'remember_me';

  override getFromToken(accessToken: string): boolean {
    const tokenBody = accessToken.split('.')[1].replace(/-/g, '+').replace(/_/g, '/');
    try {
      const decoded = JSON.parse(atob(tokenBody));
      return Boolean(decoded[this.#rememberMe]);
    } catch {
      return false;
    }
  }
}

You need to add this provider to the app.module.ts :

{ provide: RememberMeService, useClass: NewRememberMeService },

We appreciate your patience and cooperation while we work on a permanent solution.

0

adhamawadhi created 9 days ago

OK, thanks for your help.

1
0

sumeyye.kurtulus created 8 days ago
Support Team Angular Expert

I'm glad to hear the workaround resolved the issue.