CustomProvider - Keycloak - ERROR: JS: back to main page with error - JS: incomplete

[rosinedesmet]

Make sure to check the demo app(s) for sample usage: done

Make sure to check the existing issues in this repository: done

If the demo apps cannot help and there is no issue for your problem, tell us about it

Please, ensure your title is less than 63 characters long and starts with a capital
letter.

Which platform(s) does your issue occur on?

• Android
• Android versions: 12
• emulator or device: both

Please, provide the following version numbers that your issue occurs with:

• CLI: tns version 8.4.0
• Cross-platform modules: /
• Runtime(s): /
• Plugin(s):

{
  "name": "xxx",
  "main": "./src/main.ts",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@angular/animations": "~15.0.0",
    "@angular/common": "~15.0.0",
    "@angular/compiler": "~15.0.0",
    "@angular/core": "~15.0.0",
    "@angular/forms": "~15.0.0",
    "@angular/platform-browser": "~15.0.0",
    "@angular/platform-browser-dynamic": "~15.0.0",
    "@angular/router": "~15.0.0",
    "@nativescript/angular": "~15.0.0",
    "@nativescript/core": "~8.4.0",
    "@nativescript/theme": "~3.0.2",
    "keycloak-angular": "^13.0.0",
    "keycloak-js": "^20.0.2",
    "nativescript-oauth2": "^3.0.10",
    "rxjs": "~7.5.0",
    "zone.js": "~0.11.5"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~15.0.0",
    "@angular/compiler-cli": "~15.0.0",
    "@nativescript/android": "8.4.0",
    "@nativescript/schematics": "^11.2.0",
    "@nativescript/types": "~8.4.0",
    "@nativescript/webpack": "~5.0.12",
    "@ngtools/webpack": "~15.0.0",
    "typescript": "~4.8.4"
  }
}

Please, tell us how to recreate the issue in as much detail as possible.

Describe the steps to reproduce it.

When clicking on the login button, my authentification is not loaded and I have the following error. It seems like my authentification does not have the time to load !

  JS: WebView loadStarted http://xx.xxx.xxx.xxx:8080/realms/x/protocol/openid-connect/auth?...response_mode=query&state=abcd
  JS: back to main page with error:
  JS: incomplete
  JS: Error: incomplete
  JS: WebView loadFinished http://xx.xxx.xxx.xxx:8080/realms/x/protocol/openid-connect/auth?client_id=...scope=openid&response_mode=query&state=abcd

(When typing the url in Chrome without going through nativescript I do not have any problem)

Is there any code involved?

• provide a code example to recreate the problem
• (EVEN BETTER) provide a .zip with application or refer to a repository with application where the problem is reproducible.

1. Implement the demo angular code (code)

2. Define a configureOAuthProviderMyCustomProvider as below in the auth-providers-helper.ts file

export function configureOAuthProviderMyCustomProvider(): TnsOaProvider {
  const keycloakProviderOptions: KeycloakProviderOptions = {
      openIdSupport: "oid-none",
      clientId: "xx",
      redirectUri: "http://xx.xxx.xxx.xxx:8080/",
      keycloakBaseUrl: 'http://xx.xxx.xxx.xxx:8080', 
      clientSecret: "x",
      realm: 'xx',
      scopes: ["openid"],
  };
  const keycloakProvider = new KeycloakProvider(
    keycloakProviderOptions
  );
  return keycloakProvider;
}

2. Define KeycloakProviderOptions and KeycloakProvider as in this issue

export interface KeycloakProviderOptions extends TnsOaUnsafeProviderOptions {
    realm: string;
    keycloakBaseUrl: string;
}

export class KeycloakProvider implements TnsOaProvider {
    authority: string;
    authorizeEndpoint: string;
    cookieDomains: string[];
    providerType: TnsOaProviderType;
    tokenEndpoint: string;
    tokenEndpointBase: string;

    openIdSupport: string;

    constructor(public options: KeycloakProviderOptions) {
        const realm = options.realm;

        this.openIdSupport = "oid-none";
        this.providerType = "keycloak";
        this.authority = options.keycloakBaseUrl;
        this.tokenEndpointBase = options.keycloakBaseUrl;
        this.authorizeEndpoint = '/realms/'+realm+'/protocol/openid-connect/auth';
        this.tokenEndpoint = '/realms/'+realm+'/protocol/openid-connect/token';
        this.cookieDomains = [realm];
    }

    parseTokenResult(jsonData): ITnsOAuthTokenResult {
        return jsonData;
    }
}

3. Click on the button login (cf. demo-angular). The GIF is below

Thank you in advance for your responses ! 🙏