I have an Angular app with the oidc client for authentication and the code works fine with Chrome and Edge but when I try to authenticate using Safari it works after several retries/errors and with Firefox it simply does not work. The error I get is this:
Error: Uncaught (in promise): Error: No matching state found in storage
x</t.prototype.processSigninResponse/<@webpack-internal:///../../../../oidc-client/lib/oidc-client.min.js:1:5057
ZoneDelegate.prototype.invoke@webpack-internal:///../../../../zone.js/dist/zone.js:388:17
onInvoke@webpack-internal:///../../../core/esm5/core.js:4947:24
ZoneDelegate.prototype.invoke@webpack-internal:///../../../../zone.js/dist/zone.js:387:17
Zone.prototype.run@webpack-internal:///../../../../zone.js/dist/zone.js:138:24
scheduleResolveOrReject/<@webpack-internal:///../../../../zone.js/dist/zone.js:858:52
ZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:421:17
onInvokeTask@webpack-internal:///../../../core/esm5/core.js:4938:24
ZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:420:17
Zone.prototype.runTask@webpack-internal:///../../../../zone.js/dist/zone.js:188:28
drainMicroTaskQueue@webpack-internal:///../../../../zone.js/dist/zone.js:595:25
Stack trace:
resolvePromise@webpack-internal:///../../../../zone.js/dist/zone.js:809:31
resolvePromise@webpack-internal:///../../../../zone.js/dist/zone.js:775:17
scheduleResolveOrReject/<@webpack-internal:///../../../../zone.js/dist/zone.js:858:17
ZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:421:17
onInvokeTask@webpack-internal:///../../../core/esm5/core.js:4938:24
ZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:420:17
Zone.prototype.runTask@webpack-internal:///../../../../zone.js/dist/zone.js:188:28
drainMicroTaskQueue@webpack-internal:///../../../../zone.js/dist/zone.js:595:25
It looks to me that it has to do the way the browser manages the storage but I'm not sure if that's something else going on. The versions I have:
"@angular/animations": "5.2.1",
"@angular/common": "5.2.1",
"@angular/compiler": "5.2.1",
"@angular/core": "5.2.1",
"@angular/forms": "5.2.1",
"@angular/http": "5.2.1",
"@angular/platform-browser": "5.2.1",
"@angular/platform-browser-dynamic": "5.2.1",
"@angular/platform-server": "5.2.1",
"@angular/router": "5.2.1",
"@ng-bootstrap/ng-bootstrap": "1.0.0",
"@nguniversal/express-engine": "5.0.0-beta.5",
"@nguniversal/module-map-ngfactory-loader": "5.0.0-beta.5",
"bootstrap": "4.0.0-beta.2",
"core-js": "2.5.3",
"font-awesome": "4.7.0",
"oidc-client": "1.4.1",
"rxjs": "5.5.6",
"zone.js": "0.8.20"
The code that processes the authentication callback is super simple:
completeAuthentication(): Promise<void> {
if (isPlatformBrowser(this.platformId)) {
return this.manager.signinRedirectCallback()
.then(user => {
this.user = user;
});
}
}
where manager
is a UserManager
instance:
@Injectable()
export class AuthService {
private manager: UserManager;
private user: User = null;
constructor(@Inject(PLATFORM_ID) private platformId: Object) {
if (isPlatformBrowser(platformId)) {
this.manager = new UserManager(getClientSettings());
this.manager.getUser().then(user => {
this.user = user;
});
}
Any ideas why the same code is failing on different browsers?
I realized I was executing the redirect independently of the actual completeAuthentication()
promise therefore I got failures. I simply added it on the then
and everything worked pretty nicely.