Keycloak provider for nativescript-oauth2 inside svelte native

Readme.MD

Keycloak provider for nativescript-oauth2 inside a svelte native application

Following the discussion at alexziskind1/nativescript-oauth2#8 I just needed to create the KeycloakProvider and use it.

To login on a button click you can use something like

    const onButtonTap = (args: EventData) => {
        const client = new TnsOAuthClient('keycloak');

        client.loginWithCompletion((tokenResult: ITnsOAuthTokenResult, error) => {
            if (error) {
                console.error("back to main page with error: ");
                console.error(error);
            } else {
                console.log("back to main page with access token: ");
                console.log(tokenResult);
            }
            });
    }

app.ts

/*
In NativeScript, the app.ts file is the entry point to your application.
You can use this file to perform app-level initialization, but the primary
purpose of the file is to pass control to the app’s first module.
*/
import { svelteNative } from "svelte-native";
import App from  "./App.svelte";

import { configureOAuthProviders } from "./auth/auth-service";
configureOAuthProviders();

svelteNative(App, {});

auth-service.ts

import { TnsOaProvider } from 'nativescript-oauth2/providers';
import { KeycloakProvider, KeycloakProviderOptions } from '~/auth/keycloak.provider';
import { configureTnsOAuth } from 'nativescript-oauth2';

export function configureOAuthProviders() {
    const myCustomProvider = configureOAuthProviderMyCustomProvider();
    configureTnsOAuth([myCustomProvider]);
}
function configureOAuthProviderMyCustomProvider(): TnsOaProvider {
    const keycloakProviderOptions: KeycloakProviderOptions = {
        openIdSupport: "oid-none",
        clientId: "erpjs",
        redirectUri: "erpjs://erpjs",
        keycloakBaseUrl: 'http://192.168.13.193:8080/auth', // "https://localhost:8080/auth",
        clientSecret: "ignore",
        realm: 'erpjs',
        scopes: ["email"],
    };
    return new KeycloakProvider(
        keycloakProviderOptions
    );
}

keycloak.provider.ts

import { TnsOaProvider, TnsOaProviderType, TnsOaUnsafeProviderOptions } from 'nativescript-oauth2/providers';
import { ITnsOAuthTokenResult } from 'nativescript-oauth2';

export interface KeycloakProviderOptions extends TnsOaUnsafeProviderOptions {
    realm: string;
    keycloakBaseUrl: string;
}

export class KeycloakProvider implements TnsOaProvider {
    authority: string;
    authorizeEndpoint: string;
    cookieDomains: string[];
    providerType: TnsOaProviderType;
    tokenEndpoint: string;
    tokenEndpointBase: string;

    openIdSupport: string;

    constructor(public options: KeycloakProviderOptions) {
        const realm = options.realm;

        this.openIdSupport = "oid-none";
        this.providerType = "keycloak";
        this.authority = options.keycloakBaseUrl;
        this.tokenEndpointBase = options.keycloakBaseUrl;
        this.authorizeEndpoint = '/realms/'+realm+'/protocol/openid-connect/auth';
        this.tokenEndpoint = '/realms/'+realm+'/protocol/openid-connect/token';
        this.cookieDomains = [realm];
    }

    parseTokenResult(jsonData): ITnsOAuthTokenResult {
        return jsonData;
    }
}