Bug: ERR_STATES_NOT_MATCH when web app is hosted at same server

[klot-git]

Capacitor version:

Run npx cap doctor:
Capacitor Doctor
Latest Dependencies:
@capacitor/cli: 2.1.0
@capacitor/core: 2.1.0
@capacitor/android: 2.1.0
@capacitor/electron: 2.1.0
@capacitor/ios: 2.1.0
Installed Dependencies:
@capacitor/electron not installed
@capacitor/cli 2.1.0
@capacitor/core 2.1.0
@capacitor/android 2.1.0
@capacitor/ios 2.0.1
[success] Android looking great! �👌
[error] Xcode is not installed

Library version:

• 2.0.0

OAuth Provider:

• Other: Identity Server 4
  Server is hosted at: https://nomina-med.azurewebsites.net

Your Plugin Configuration

{
export const environment = {
  production: true,
  SERVER_HOST: 'https://nomina-med.azurewebsites.net',
};
export const oauthOptions = {
  appId: 'NOMINA.APP.WEB',
  authorizationBaseUrl: environment.SERVER_HOST + '/connect/authorize',
  accessTokenEndpoint: environment.SERVER_HOST + '/connect/token',
  scope: 'nomina',
  resourceUrl: environment.SERVER_HOST + '/identity',
  refreshToken: null, // used only to refresh access token
  web: {
    responseType: 'token', // implicit flow
    accessTokenEndpoint: '', 
    redirectUrl: environment.SERVER_HOST + '/app/signin-back',
    windowOptions: 'height=500, width=500, left=0,top=0',
  }
}
}

Affected Platform(s):

• Web

Current Behavior

The Identity Server and the Ionic Web application is hosted at the same server:
https://nomina-med.azurewebsites.net (server)
https://nomina-med.azurewebsites.net/app (ionic app)
When the user tries to sign in, the ionic app opens the new window to authenticate but immediately closes it, it with the following error: OAuth rejected Error: ERR_STATES_NOT_MATCH

When the ionic app and the Identity Server is hosted at different servers, everything works fine (ex: localhost:5000 and localhost:8100).

Expected Behavior

When the user tries to sign in, the ionic app should open the new window
, the Identity Server will provide the authentication options, the user will provide his credentials, and only then, the window should be closed.

Other Information

The library seems to expect that the Authentication provider is hosted at a different server, and relays on the "DOMException: Blocked a frame..." to wait to close the authentication window.
When hosted at the same server, the exception is never throwed and it closes the window before the user provide his credentials.

I believe changing the line 67 of the web.ts would solve the issue:

if (href != null && href.indexOf(this.webOptions.redirectUrl) >= 0) {

[ropstah]

@moberwasserlechner - this has nothing to do with IdentityServer (you added the label).

I'm experiencing the same issue with our local openid endpoint and this is due to what @klot-git describes: app and openid are hosted on the same endpoint.

He also provides a suggestion for a fix:

I believe changing the line 67 of the web.ts would solve the issue:
if (href != null && href.indexOf(this.webOptions.redirectUrl) >= 0) {

[ropstah]

@klot-git I just tried your suggested fix but that doesn't seem to resolve it in my case.

[moberwasserlechner]

I applied @klot-git solution to the web impl. Thx for that.

[ssrbh3]

Hey @ropstah, Have you been able to resolve that issue ? I am having the same problem and @klot-git's change didnt work for me either.
What is really strange in my case is that after the user clicks on azure sign in and manually clicks back on my web app tab on browser it seems to work fine without complaning about ERR_STATES_NOT_MATCH