Keycloak-angular: question: secure ionic3 mobile app for mobile devices (ios and android) using the hybrid flow

[spagop]

sorry to use this channel issues to ask this question:
I'm working on a sample ionic 3 mobile app demo that I would like to secure with keycloak using the hybrid flow see https://www.keycloak.org/docs/latest/securing_apps/index.html#hybrid-apps-with-cordova.
I have already seen that you can configure in the init method of keycloak-angular framework options flow = 'hybrid' and onLoad = 'check-sso'. What I could not figure out was how I can configure the following options with keycloak-angular as in this example https://github.com/keycloak/keycloak/blob/master/examples/cordova-native/www/index.html of keycloak:

adapter: 'cordova-native',
redirectUri: 'android-app: // ...'

I would be very grateful if there was a solution with keycloak-angular

thanks for your support

[mauriciovigolo]

Hey @spagop, how are you?

I didn't create an ionic app using keycloak-angular, however it shouldn't be a problem, as the keycloak-js adapter offers support to cordova applications.
From the example you mentioned, the important part is here:

keycloak.init({
  adapter: 'cordova-native',
  responseMode: 'query',
  onLoad: 'check-sso',
  redirectUri: 'android-app://org.keycloak.examples.cordova/https/keycloak-cordova-example.github.io/login'
});

From keycloak docs: https://www.keycloak.org/docs/latest/securing_apps/index.html#hybrid-apps-with-cordova.

The next release from keycloak-angular I will deliver new examples and I will add an ionic app also, okay?

Tks!

[indiana-jonas]

Hi

Just a comment to this (as Im trying to do the same). KeycloakInitOptions doesn't currently support adapter and redirectUri properties.

Cheers

Jonas

[spagop]

Thanks @mauriciovigolo for your answer.

as @indiana-jonas already mentioned adapter and redirectUri options are not implemented in the current keycloak-angular. Please correct me if I'm wrong.
I would appreciate it, if keycloak-angular can be extend to support adapter and redirectUri options.

Regards

[mauriciovigolo]

@spagop and @indiana-jonas (great nick by the way :smile:)

The properties are really missing and I will add they on the next release. I tried to create an ionic app to give you an example and test the library on ionic. I didn't finished it yet, because there are some missing points and the information available is not so good.

Meanwhile you could create your app using the as any trick from typescript:

await keycloak.init({
          config: environment.keycloak,
          initOptions: {
            adapter: 'cordova-native',
            responseMode: 'query',
            onLoad: 'check-sso',
            redirectUri:
              'android-app://com.github.keycloak-angular/http/keycloak-angular-example.github.com/login'
          } as any,
          bearerExcludedUrls: []
        });

Just for notice, I couldn't make cordova-native adapter work, but I will try to create an example about it.

[rogerg93]

@mauriciovigolo Anything new regarding this bug? I would really like to have this feature as well.

[spagop]

Hi @mauriciovigolo any news to this feature request

[ataraxus]

just stumbled over this.. .any hints how to workaround this issue? I'm also trying to get this running with ionic on android. Same issue

[ataraxus]

Hey guys for anybody how to use keycloak-angular with a ionic v4/v5 app. I did a lucky punch. You'll need following dependencies:

ionic cordova plugin add cordova-plugin-inappbrowser --save
npm install @ionic-native/in-app-browser --save

and then also you need to init keycloak client with following initOptions:

keycloakService.init({ config: keycloakConfig, 
        initOptions:{flow:'standard', responseMode:'fragment', checkLoginIframe:true, onLoad:'login-required'}, 
        enableBearerInterceptor: true });

i have to admit, i don't fully understand why this is working and the defaults dont work, so maybe someone could have a more detailed look and share the insight.

[spagop]

@ataraxus good to know that it worked for you. the defaults config works for me on ionic 3, but I have problem with the logout.

I am also interested in to know whether logout with a redirect-uri can work in android or ios device for you?

Will be great to have an example using the "cordova-native" adapter to login/logout/change-password.

[PatrickJung94]

@ataraxus Thanks for this. I had trouble with the standard browser logic not redirecting back to my app. After just installing the inappbrowser the login flow worked as expected. I thought this might be the solution at one point and after reading your comment it is confirmed to solve my problem!

[jonkoops]

These types have been mainlined into keycloak-js and the missing fields have been added as well. Therefore I am closing this issue.