jy95 / keycloak-capacitor Goto Github PK

License: MIT License

TypeScript 17.10% JavaScript 82.90%

keycloak-capacitor's Introduction

keycloak-capacitor

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: keycloak/keycloak#10174

Original (v19.0.1) Implementation:

https://github.com/keycloak/keycloak/blob/19.0/adapters/oidc/js/src/keycloak.js

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

Install package

npm i keycloak-capacitor

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

Install package

npm i keycloak-capacitor

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!');
    };

}

keycloak-capacitor's People

Contributors

Stargazers

Watchers

Forkers

matevzrobic

keycloak-capacitor's Issues

Question: comparison with keycloak-angular

Question Question(s):

First, I'm accustomed to keycloak-angular on the web side of things and am wanting to create mobile app w/ ionic.
keycloak-angular provides a Service which you initialize up front as a provider.

This service provides several useful behaviors:

It automatically refreshes the token when needed
It automatically injects the Authorization header in HTTP requests (using angular's HttpInjector)
It remembers from instance to instance if the user is still logged in

Does keycloak-capacitor offer any of these automatic behaviors? Or, is it left up to the user to make the necessary call on the keycloak object to refresh the token, and set up our own HttpInterceptor, etc?

Thanks!

Question: Why use cordova-plugin-browsertab instead of cordova-plugin-inappbrowser

@jy95 - I wanted to ask why you used cordova-plugin-browsertab instead of cordova-plugin-inappbrowser.

browsertab doesn't offer any customizations of the browser interface, whereas inappbrowser does, and there is example of passing the caller-defined options into inappbrowser.open(...) in keycloak-js already.

Was it just a decision based on wanting to get something up and going quickly or was there a technical reason?

Android looks fine, but I've noticed on iOS that there are some undesirable elements of the browser interface that break the illusion that you're in a native app.. most egregious being the Share button and the Safari button in the bottom right that will open the url in external Safari. I can live with this, but it was some polish I was trying to clean up.

Thanks in advance for the info and history on it.

implement for ionic react

could you please add an example when work with ionic-react?. I face an issue when try to read angular code?

Upgrade the ng-example? Latest combination of packages aren't working?

Would it be possible to upgrade the ng-example to the latest packages (e.g. capacitor) and latest keycloak? I too am using ionic w/ keycloak and this package. But I've upgraded my app's dependencies to the latest packages (including ionic v7) and something isn't working. I've re-created a minimal example and it's similarly not working.

The problem seems to be when keycloak redirects back to the app on iOS, using a custom URL scheme, that the app does get resumed, but it essentially ignores the query string information. At least the keycloak service doesn't indicate that the user is logged in upon returning back to the app. What part is supposed to notice that it came back to the app via the custom url scheme, there's a query string representing the state that must be used to obtain the refresh token, etc.?

My own example works when the adapter is "default" and I test in a browser, but when using the capacitor adapter and iOS, it does not.

I'm at a loss for the problem. I came here to try and run its example, but can't get it even to install the npm packages at this point.

Any help would be appreciated.

jy95 / keycloak-capacitor Goto Github PK

keycloak-capacitor's Introduction

keycloak-capacitor

Adapter: capacitor-native

Prerequisites

Usage

Adapter: capacitor

Prerequisites

Usage

keycloak-capacitor's People

Contributors

Stargazers

Watchers

Forkers

keycloak-capacitor's Issues

Recommend Projects

Recommend Topics

Recommend Org