Configuration for Ionic 5 and Capacitor 2

[wieczorekmarcin]

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search for issues before submitting
- [x] feature request

Versions.

Ionic:

   Ionic CLI                     : 6.5.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.901.0
   @angular-devkit/schematics    : 9.1.0
   @angular/cli                  : 9.1.0
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 2.0.1
   @capacitor/core : 2.0.1

Utility:

   cordova-res : 0.11.0
   native-run  : 1.0.0

System:

   NodeJS : v13.12.0 (/usr/local/bin/node)
   npm    : 6.14.4
   OS     : Linux 5.3

"keycloak-js": "^9.0.3",
"keycloak-angular": "^7.2.0",

Is there any way to set up keycloak-angular with Ionic 5 and Capacitor 2? If so, could I have a configuration example? I think I tried everything (adapters, onLoad and flow types) and I was unable to log in and log out correctly using keycloak.

Thank you in advance for your help.

[jonkoops]

@wieczorekmarcin are you getting any error in your console?

I am not familiar with these platforms but if they operate in an environment without access the DOM it will not work as the library we depend on keycloak-js does not support this.

[wieczorekmarcin]

This time I initialized keycloak-angular with ng Bootstrap. I haven't set up redirectURI either - previously it was the address for my mobile application with the custom scheme, e.g. myapp: // callback. This time I received other results:

1. default adapter:

   • without redirectURI: the application starts in the browser window
   • with redirectURI myapp: // callback return to the application with errors:

     Channel not fired: onDOMContentLoaded
     Ionic Native: deviceready did not fire within 5000ms. This can happen when plugins are in an inconsistent state. Try removing plugins from plugins / and reinstalling them.

2. cordova-native adapter

   • with redirectURI and without the same error

     vendor.js: 43187 ERROR Error: Uncaught (in promise): ReferenceError: universalLinks is not defined
     ReferenceError: universalLinks is not defined

     Universal Links Plugin does not exist for Capacitor, instead there is Deeplinks Plugin https://ionicframework.com/docs/native/deeplinks

3. codova adapter

   • redirectURI is not supported for this adapter After starting the application, the redirection to the Keycloak Login Form works correctly. Then it redirects me back to the application, but I see errors in the console:

     TypeError: Cannot read property 'code' of undefined
         at processCallback (: 8100 / vendor.js: 118056)
         at Channel. <anonymous> (: 8100 / vendor.js: 118694)
         at Channel.fire (: 8100 / capacitor-runtime.js: 1844)
         at InAppBrowser._eventHandler (: 8100 / capacitor-runtime.js: 2767)
         at cb (: 8100 / capacitor-runtime.js: 2832)
         at Object.callbackFromNative (: 8100 / capacitor-runtime.js: 1338)
         at <anonymous>: 1: 9
     capacitor.handleError @ capacitor-runtime.js: 362

     I can make authorized requests (with the correct authorization header). Everything except this error looks ok.

[jonkoops]

@wieczorekmarcin It looks like this is a larger problem combining Capacitor with keycloak-js see this thread in the mailing list.

I'd recommend creating an issue in the Keycloak issue tracker, the team tends to respond to those as well.

For now I am going to close this issue here, as there is not much we can do until this is resolved upstream.

[jonkoops]

@wieczorekmarcin It's possible to create your own adapter for Capacitor, for more information on how to pass in a custom adapter to Keycloak see: https://github.com/keycloak/keycloak/pull/7168

[enlight3d]

Did anybody manage to do this ? I'm currently searching for a library working with Keycloak for a Ionic 5 + capacitor app

[broth-eu]

Any news on this?

[wieczorekmarcin]

There is to ways that I found:

1. Create your own adapter for Capacitor:

   const keycloak = new Keycloak(...)
   keycloak.init({
   ...,
   adapter: {
    // custom adapter implementation
   }
   })

2. Use configuration below (works for me for with Ionic5 + Capacitor)

   
   const keycloakOptions: KeycloakOptions = {
   config: {
       url: 'http://localhost:9080/auth',
       realm: 'jhipster',
       clientId: 'web_app'
   },
   initOptions: {
       onLoad: 'login-required',
       checkLoginIframe: false
   },
   enableBearerInterceptor: true,
   bearerExcludedUrls: ['/assets']
   };

export const environment = { production: false, keycloakOptions, ... };

export class AppModule implements DoBootstrap { async ngDoBootstrap(app) { try { await keycloakService.init(environment.keycloakOptions); app.bootstrap(AppComponent); } catch (error) { console.error('Keycloak init failed', error); } } }

I hope this helps you!

[tuxflo]

Sorry for replying to an already closed issue but could you give me some hints/helpful links or documentation on how to create the custom adapter (custom adapter implementation). I just convinced some people to use keycloak for our ionic app instead of doing authentication on our own and didn't realize that it isn't that easy with capacitor.

[christian-kocke]

@wieczorekmarcin could you share the code for your custom capacitor adapter ?

[hmoazzem]

@jonkoops @christian-kocke @wieczorekmarcin @tuxflo @enlight3d @broth-eu, have you managed to solve this? I've a kinda working demo at https://github.com/edgeflare/edge-ui, but it's certainly not fit for production. Please help us improve https://github.com/edgeflare/edge-ui/blob/master/src/app/keycloak.service.ts. Also, I'm attempting a framework agnostic Capacitor adaptor https://github.com/edgeflare/edge-ui/blob/master/docs/capacitor-keycloak-adapter.ts