Ionic Keycloak Authentication

Ionic Setup

These plugins are required to be setup when using this plugin:

• Deep Links for openning the app after the login process in the browser page

# The scheme "app" here would be used to open back the app. 
# Some may also use the host "io.ionic.starter" to do it, depending on the configuration
# of the Keycloak
ionic cordova plugin add ionic-plugin-deeplinks --variable URL_SCHEME=app --variable DEEPLINK_SCHEME=https --variable DEEPLINK_HOST=io.ionic.starter --variable ANDROID_PATH_PREFIX=/
npm install @ionic-native/deeplinks

• Browser Tab provides an interface to in-app browser tabs that exist on some mobile platforms

ionic cordova plugin add cordova-plugin-browsertab
npm install @ionic-native/browser-tab

• In App Browser launches in app browser

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

• Install the keycloak adapter

npm install keycloak-js@7.0.1

And then import it in the AppModule:

import {NgModule} from '@angular/core';
import {environment} from '../environments/environment';
import {KeycloakAuthModule} from 'ionic-keycloak/dist/lib/ionic-keycloak.module';
...

@NgModule({
    imports: [
    ...
    KeycloakAuthModule.forRoot({
        jwtModuleOptions: {
            getToken: () => JSON.parse(localStorage.getItem('token')),
            setToken: (value) => localStorage.setItem('token', value ? JSON.stringify(value) : null),
        },
        deepLinksConfig: {
            // Not optional: Here is the reference of the scheme, which was used for the deeplinks before.
            deepLinkingScheme: 'app'
        },
        keycloakConfig: environment.keycloakConfig
    })
    ],
    ...
})
export class AppModule {
}

Cordova Setup

First, add this to your config.xml to make the app open only one instance on every browser tab opened.

<widget>
    <preference name="AndroidLaunchMode" value="singleTask" />
</widget>

Then, add this to directly recognize the keycloak url auth.XXXX.XXX when it's on https on IOS

<universal-links>
        <host name="auth.XXXX.XXX" scheme="https">
            <path url="/" />
        </host>
</universal-links>

Configuration Options

Keycloak configuration

 keycloakConfig: {
        realm: 'XXXX.xx',
        url: 'https://auth.XXXX.XXX',
        'ssl-required': 'external',
        'enable-cors': true,
        clientId: 'XXXX',
        credentials: {
            secret: 'XXXXXXXX-xxXX-Xxxx-XXXX-XxXxXXXXXxxx'
        },
        'confidential-port': 0
    }