{"id":26410996,"url":"https://github.com/edgeflare/keycloak-angular-capacitor","last_synced_at":"2025-03-17T20:20:09.437Z","repository":{"id":187853587,"uuid":"677710415","full_name":"edgeflare/keycloak-angular-capacitor","owner":"edgeflare","description":"Keycloak in-app browser integration in Capacitor and Angular based native apps","archived":false,"fork":false,"pushed_at":"2023-08-15T14:30:18.000Z","size":7600,"stargazers_count":9,"open_issues_count":2,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-10T17:58:47.561Z","etag":null,"topics":["android","angular","capacitor","ionic","ios","keycloak"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/edgeflare.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-08-12T11:29:41.000Z","updated_at":"2025-01-29T10:29:58.000Z","dependencies_parsed_at":"2023-08-12T11:56:56.835Z","dependency_job_id":null,"html_url":"https://github.com/edgeflare/keycloak-angular-capacitor","commit_stats":null,"previous_names":["edgeflare/keycloak-angular-capacitor"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edgeflare%2Fkeycloak-angular-capacitor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edgeflare%2Fkeycloak-angular-capacitor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edgeflare%2Fkeycloak-angular-capacitor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/edgeflare%2Fkeycloak-angular-capacitor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/edgeflare","download_url":"https://codeload.github.com/edgeflare/keycloak-angular-capacitor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244102783,"owners_count":20398386,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","angular","capacitor","ionic","ios","keycloak"],"created_at":"2025-03-17T20:20:08.897Z","updated_at":"2025-03-17T20:20:09.432Z","avatar_url":"https://github.com/edgeflare.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# KeycloakAngularCapacitor\n\n## About\n\u003e ### This is attempt to open Keycloak login page in mobile device's embedded (in-app) browser on [Angular](https://angular.io/) and [Capacitor](https://capacitorjs.com/) based native apps. If you reliably integrate Keycloak, please create PRs.\n\n[Auth demo on YouTube](https://youtu.be/YLQTsziDJug)\n\n![Auth demo](./docs/demo.gif?raw=true)\n\n## Similar projects\n- https://www.npmjs.com/package/keycloak-angular (doesn't work on mobile)\n- https://github.com/manfredsteyer/angular-oauth2-oidc (no instructions for mobile)\n- https://github.com/JohannesBauer97/keycloak-ionic-example (opens in device's default browser instead of in-app browser, causing sub-optimal user experience)\n\n## Installation\n\n```sh\nnpm install --save keycloak-js @edgeflare/keycloak-angular-capacitor @capacitor/app @capacitor/browser @capacitor/core\n```\n\n## Setup\n\nUpdate `src/app/app.module.ts`\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\n\nimport { AppRoutingModule } from './app-routing.module';\nimport { AppComponent } from './app.component';\nimport { KEYCLOAK_CONFIG, KeycloakAngularCapacitorModule } from '@edgeflare/keycloak-angular-capacitor';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    AppRoutingModule,\n    KeycloakAngularCapacitorModule\n  ],\n  providers: [\n    {\n      provide: KEYCLOAK_CONFIG,\n      useValue: {\n        url: 'http://localhost:8080',\n        realm: 'demo-realm',\n        clientId: 'demo-app-client',\n        redirectUri: 'customscheme://auth', // custom url scheme as documented in https://capacitorjs.com/docs/apis/app\n        redirectUriWeb: 'http://localhost:4200'\n      }\n    }\n  ],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n\u003e `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.\n\nInitialize Keycloak in `src/app/app.component.ts`\n\n```ts\nimport { Component } from '@angular/core';\nimport { App } from '@capacitor/app';\nimport { KeycloakAngularCapacitorService } from '@edgeflare/keycloak-angular-capacitor';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss']\n})\nexport class AppComponent {\n  constructor(\n    private kc: KeycloakAngularCapacitorService,\n  ) {\n    this.kc.init();\n\n    App.addListener('appUrlOpen', (data) =\u003e {\n      const params = new URLSearchParams(new URL(data.url).hash.substring(1));\n      const code = params.get('code');\n\n      if (code) {\n        this.kc.login({ code }).then(() =\u003e {\n          console.log(\"Login successful\");\n        }).catch(error =\u003e {\n          console.error(\"Login failed\", error);\n        });\n      }\n    });\n  }\n\n  // Optional. Can be called in whichever component the KeycloakAngularCapacitorService is injected\n\n  login() {\n    this.kc.login();\n  }\n\n  logout() {\n    this.kc.logout();\n  }\n\n  loadUserProfile() {\n    return this.kc.loadUserProfile();\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedgeflare%2Fkeycloak-angular-capacitor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fedgeflare%2Fkeycloak-angular-capacitor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fedgeflare%2Fkeycloak-angular-capacitor/lists"}