{"_id":"@atheneasolutions/ng-login-keycloak","name":"@atheneasolutions/ng-login-keycloak","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.3":{"name":"@atheneasolutions/ng-login-keycloak","version":"1.0.3","peerDependencies":{"@angular/common":"^17.3.0","@angular/core":"^17.3.0"},"dependencies":{"@capacitor/preferences":"^6.0.0","@ngx-translate/core":"^15.0.0","@ngx-translate/http-loader":"^8.0.0","angular-oauth2-oidc":"^17.0.2","angular-oauth2-oidc-jwks":"^17.0.2","jwt-decode":"^4.0.0","tslib":"^2.3.0"},"sideEffects":false,"publishConfig":{"access":"public"},"module":"fesm2022/atheneasolutions-ng-login-keycloak.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2022":"./esm2022/atheneasolutions-ng-login-keycloak.mjs","esm":"./esm2022/atheneasolutions-ng-login-keycloak.mjs","default":"./fesm2022/atheneasolutions-ng-login-keycloak.mjs"}},"_id":"@atheneasolutions/ng-login-keycloak@1.0.3","gitHead":"76283c94d57d37cc951415754e390fe01d723efa","description":"Login redirect to keycloak.","_nodeVersion":"23.7.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-Xsb2DM6BFkWo6Ln90NFeflGpsxv+ANmIX0xx+2Ujcb/P/qHxh+ggjVY2HXNN27XZJjiXaLmLuURSOwxgCe890w==","shasum":"40d586efeb89e8b40b4da9894bde6135f8752e4b","tarball":"https://registry.npmjs.org/@atheneasolutions/ng-login-keycloak/-/ng-login-keycloak-1.0.3.tgz","fileCount":30,"unpackedSize":154550,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIB1QfX8+h2kurf5YcOFzJ0CFU17gCzSgDlCmbXceQgV0AiADbL3vh9cNWq/B3vKzuO2DwtT/18wfLFUZQ1afnvP1yQ=="}]},"_npmUser":{"name":"atheneasolutions","email":"apps@atheneasolutions.com"},"directories":{},"maintainers":[{"name":"atheneasolutions","email":"apps@atheneasolutions.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ng-login-keycloak_1.0.3_1739443664668_0.8768181248954916"},"_hasShrinkwrap":false}},"time":{"created":"2025-02-13T10:47:44.563Z","1.0.3":"2025-02-13T10:47:44.899Z","modified":"2025-02-13T10:47:45.187Z"},"maintainers":[{"name":"atheneasolutions","email":"apps@atheneasolutions.com"}],"description":"Login redirect to keycloak.","readme":"# Athenea Login Keycloak\n\nLogin redirect to keycloak.\n\n## Installation\n\n```bash\nnpm i @ccspt/ng-keycloak\n\n```\n\n## Usage\n\nTo use it, navigate to the `assets` folder and create a file named `sso.config.json` with the following content:\n\n```json\n{\n    \"issuer\": \"{my_issuer}\",\n    \"redirectUri\": \"/login-redirect\",\n    \"logoutUrl\": \"/login-redirect\",\n    \"clientId\": \"{my_clientId}\",\n    \"responseType\": \"code\",\n    \"scope\": \"openid email profile\",\n    \"showDebugInformation\": true,\n    \"allowedRoles\": [] //roles allowed tu enter app\n}\n```\n\nNext, go to `app.module.ts` and add the following import:\n\n```typescript\nAtheneaLoginKeycloakModule.forRoot('assets/sso.config.json', 'ca')\n```\n\n`'ca'` refers to the default language we want, but if we change it in the code at any point, it will also change in the library.\n\nNow, go to the translation files and add the following:\n\n```json\n//ca.json\n\"redirect_page\": {\n    \"title\": \"T'estem redirigint a la pàgina.\",\n    \"content\": {\n        \"1\": \"En cas de no fer-se la redirecció o aquesta trigui molt,\",\n        \"2\": \"fes click\",\n        \"3\": \"aquí\",\n        \"4\": \"o contacta amb nosaltres.\"\n    }\n},\n````\n```json\n//en.json\n\"redirect_page\": {\n    \"title\": \"We are redirecting you to the page.\",\n    \"content\": {\n        \"1\": \"If the redirection is not done or it takes a long time,\",\n        \"2\": \"click\",\n        \"3\": \"here\",\n        \"4\": \"or contact us.\"\n    }\n},\n```\n```json\n//es.json\n\"redirect_page\": {\n      \"title\": \"Te estamos redirigiendo a la página.\",\n      \"content\": {\n          \"1\": \"En caso de no hacerse la redirección o ésta tarde mucho,\",\n          \"2\": \"haz click\",\n          \"3\": \"aquí\",\n          \"4\": \"o contacta con nosotros.\"\n      }\n  },\n```\n\nThe text can be changed, but the translation keys should not be changed.\n\nAlso, in the `assets` folder, in the `img` directory, we need to add the `logoLogin.svg` file, which will be the logo that appears on the redirection page, and the `background.png` file, which will be the application's background by adding the following scss to `global.scss`:\n\n```scss\n.bg-brand-logo{\n    --background: var(--brand-bg) no-repeat center/cover fixed;\n}\n```\n\nAnd the following variable to `variables.scss`:\n\n```scss\n--brand-bg: url(\"../assets/img/background.png\");\n```\n\nFinally, go to the `app-routing.module.ts` file, import the library, and add the following routes:\n\n```typescript\nimport { AtheneaLoginKeycloakGuardService, LoginRedirectPageComponent } from 'athenea-login-keycloak';\n\n{\n  path: '**',\n  redirectTo: 'login-redirect',\n  pathMatch: 'full'\n},\n{\n  path: 'login-redirect',\n  component: LoginRedirectPageComponent\n},\n```\n\nAdditionally, on the first page of our application, we need to add the GuardService from the library:\n\n```typescript\n{\n  path: 'home',\n  loadChildren: () => import('./pages/home/home.module').then( m => m.HomePageModule),\n  canActivate: [AtheneaLoginKeycloakGuardService]\n}\n\n```\n\nA complete example of this file is as follows:\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { PreloadAllModules, RouterModule, Routes } from '@angular/router';\nimport { AtheneaLoginKeycloakGuardService, LoginRedirectPageComponent } from 'athenea-login-keycloak';\n\nconst routes: Routes = [\n  {\n    path: 'home',\n    loadChildren: () => import('./pages/home/home.module').then( m => m.HomePageModule),\n    canActivate: [AtheneaLoginKeycloakGuardService]\n  },\n  {\n    path: '**',\n    redirectTo: 'login-redirect',\n    pathMatch: 'full'\n  },\n  {\n    path: 'login-redirect',\n    component: LoginRedirectPageComponent\n  },\n];\n\n@NgModule({\n  imports: [\n    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })\n  ],\n  exports: [RouterModule]\n})\nexport class AppRoutingModule { }\n```\n\nAnd now we need to add the following to `app.component.ts`:\n\n```typescript\nimport { ChangeDetectorRef, Component } from '@angular/core';\nimport { Router } from '@angular/router';\nimport { TranslateService } from '@ngx-translate/core';\nimport { AtheneaLoginKeycloakService, ConfigService } from 'athenea-login-keycloak';\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 as: AtheneaLoginKeycloakService,\n    private translate: TranslateService,\n    public router: Router,\n    private keycloakService: ConfigService,\n    private cdr: ChangeDetectorRef\n  ) {\n    this.init();\n    translate.setDefaultLang('ca');\n    translate.use('ca');\n  }\n\n  private async init() {\n    try {\n      const response = await this.authService.initOAuth();\n      if (response) {\n        await this.rolesService.checkRoles();\n        if (!this.rolesService.correctRoles) {\n          // action if it does not have roles\n        } else {\n          this.router.navigate(['/home']);\n        }\n      } else {\n        this.router.navigate(['/login-redirect']);\n      }\n    } catch (error) {\n      console.error('Error during initialization', error);\n    }\n  }\n}\n```\n\nAnd to be able to log out of the application, we need to add the following function to the corresponding button:\n\n```typescript\nconstructor(\n  public authService: AtheneaLoginKeycloakService\n) { }\n\nlogout() {\n  this.authService.logout();\n}\n```\n\n```html\n<ion-button color=\"primary\" slot=\"icon-only\" (click)=\"logout()\">\n  <ion-icon name=\"power-outline\" class=\"logout\"></ion-icon>\n</ion-button>\n```\n\n## License\n\nISC","readmeFilename":"README.md"}