Skip to content

JohannesBauer97/keycloak-ionic

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

59 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Deprecated

This package is not maintained anymore.

You can use manfredsteyer/angular-oauth2-oidc to connect with Keycloak.

Example using angular-oauth2-oidc with Keycloak and Ionic (Capacitor): JohannesBauer97/keycloak-ionic-example


keycloak-ionic

This is an extended version of the existing keycloak.js Adapter. It's the same code, I try to keep it up-to-date. The version of keyloak and this package match. The only difference are 2 more adapters for capacitor. It's possible to provide custom adapters, but the original library implements a lot of private methods, which are not accessible with custom adapters. Therefore, duplicate implementations are required for custom adapters.

There is an open discussion about implementing the capacitor adapter in the original library here: https://groups.google.com/g/keycloak-dev/c/_D62KbWTuvc/m/4-1EJ-68BAAJ

Original (v13.0.0) Implementation:

Official Documentation:

Extensions:

  • Added capacitor adapter
  • Added capacitor-native adapter

Adapter: capacitor-native

Adapter to use the system browser.

Prerequisites

  • Setup your iOS App to work with universal links (see official docs linked above)
  • Setup your Android App to work with deep links

The adapter will directly access Capacitors app api to listen to iOS (universal links) and Android deep links. Also the native browser will be opened for the login/logout/register and account management pages.

Usage

  1. Install package
npm i keycloak-ionic
  1. Use it
public keycloak: Keycloak.KeycloakInstance;

constructor()
{

    this.keycloak = Keycloak({
        clientId: 'webapp',
        realm: 'master',
        url: 'http://localhost:8080/auth/'
    });
    this.keycloak.init({
        adapter: 'capacitor-native',
        responseMode: 'query',
        redirectUri: 'http://localhost:8100'
    });

    // Test if it works, when coming back from this.keycloak.login();
    this.keycloak.onAuthSuccess = () => {
        console.log('authenticated!');
    };

}

Adapter: capacitor

Adapter to use an inApp browser

Prerequisites

  • Install cordova-plugin-browsertab
  • Setup your iOS App to work with universal links (see official docs linked above)
  • Setup your Android App to work with deep links

The adapter will directly access Capacitors app api to listen to iOS (universal links) and Android deep links. Also the inApp browser will be opened for the login/logout/register and account management pages.

Usage

  1. Install package
npm i keycloak-ionic
  1. Use it

Check out the examples folder.

public keycloak: Keycloak.KeycloakInstance;

constructor()
{

    this.keycloak = Keycloak({
        clientId: 'webapp',
        realm: 'master',
        url: 'http://localhost:8080/auth/'
    });
    this.keycloak.init({
        adapter: 'capacitor',
        responseMode: 'query',
        redirectUri: 'http://localhost:8100'
    });

    // Test if it works, when coming back from this.keycloak.login();
    this.keycloak.onAuthSuccess = () => {
        console.log('authenticated!');
    };

}

About

Keycloak Capacitor Adapter for Ionicframework

Resources

License

Stars

Watchers

Forks