0.0.4 • Published 2 years ago

@edgeflare/keycloak-angular-capacitor v0.0.4

Weekly downloads
-
License
-
Repository
-
Last release
2 years ago

KeycloakAngularCapacitor

About

This is attempt to open Keycloak login page in mobile device's embedded (in-app) browser on Angular and Capacitor based native apps. If you reliably integrate Keycloak, please create PRs.

Auth demo on YouTube

Auth demo

Similar projects

Installation

npm install --save keycloak-js @capacitor/app @capacitor/browser @capacitor/core @edgeflare/keycloak-angular-capacitor

Setup

Update src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { KEYCLOAK_CONFIG, KeycloakAngularCapacitorModule } from 'keycloak-angular-capacitor';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    KeycloakAngularCapacitorModule
  ],
  providers: [
    {
      provide: KEYCLOAK_CONFIG,
      useValue: {
        url: 'http://localhost:8080',
        realm: 'demo-realm',
        clientId: 'demo-app-client',
        redirectUri: 'customscheme://auth', // custom url scheme as documented in https://capacitorjs.com/docs/apis/app
        redirectUriWeb: 'http://localhost:4200'
      }
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

customscheme://auth needs to be added in Keycloak client's Valid redirect URIs and Valid post logout redirect URIs. customscheme can be any lowercase characters, usually your mobile app name.

Initialize Keycloak in src/app/app.component.ts

import { Component } from '@angular/core';
import { App } from '@capacitor/app';
import { KeycloakAngularCapacitorService } from 'keycloak-angular-capacitor';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor(
    private kc: KeycloakAngularCapacitorService,
  ) {
    this.kc.init();

    App.addListener('appUrlOpen', (data) => {
      const params = new URLSearchParams(new URL(data.url).hash.substring(1));
      const code = params.get('code');

      if (code) {
        this.kc.login({ code }).then(() => {
          console.log("Login successful");
        }).catch(error => {
          console.error("Login failed", error);
        });
      }
    });
  }

  // Optional. Can be called in whichever component the KeycloakAngularCapacitorService is injected

  login() {
    this.kc.login();
  }

  logout() {
    this.kc.logout();
  }

  loadUserProfile() {
    this.hasAttemptedToLoadProfile = true;
    return this.kc.loadUserProfile();
  }
0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago