{"id":20260137,"url":"https://github.com/syedabdullahrahman/demo-project","last_synced_at":"2025-07-13T01:37:01.536Z","repository":{"id":131248687,"uuid":"468886312","full_name":"syedabdullahrahman/demo-project","owner":"syedabdullahrahman","description":"Angular Keycloak Integration","archived":false,"fork":false,"pushed_at":"2025-02-18T14:44:36.000Z","size":970,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-24T22:42:11.528Z","etag":null,"topics":["angular","keycloak","keycloak-installation","keycloak-integration","securing-angular","security"],"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/syedabdullahrahman.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-03-11T20:09:28.000Z","updated_at":"2025-02-28T14:23:31.000Z","dependencies_parsed_at":"2024-08-27T20:59:54.611Z","dependency_job_id":"e6b5c7c0-4381-487b-b246-7196d8b1795f","html_url":"https://github.com/syedabdullahrahman/demo-project","commit_stats":null,"previous_names":["syedabdullahrahman/demo-project"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syedabdullahrahman%2Fdemo-project","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syedabdullahrahman%2Fdemo-project/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syedabdullahrahman%2Fdemo-project/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syedabdullahrahman%2Fdemo-project/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/syedabdullahrahman","download_url":"https://codeload.github.com/syedabdullahrahman/demo-project/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248325452,"owners_count":21084929,"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":["angular","keycloak","keycloak-installation","keycloak-integration","securing-angular","security"],"created_at":"2024-11-14T11:18:08.535Z","updated_at":"2025-04-11T01:33:47.712Z","avatar_url":"https://github.com/syedabdullahrahman.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Keycloak Angular integration\n\nThis project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.2.5.\n\n## Overview\n\nThis Angular project is a CRUD application that allows users to create, read, update, and delete tutorials. It integrates with Keycloak for user authentication d authorization.\n\n## Keycloak setup\n\n1. Run the following command to pull the Keycloak image from Docker Hub:\n\n```bash\ndocker pull quay.io/keycloak/keycloak:latest\n```\n\n\n2. **Run the Keycloak Container**\n\n   Use the following command to start a Keycloak container:\n\n   ```bash\n   docker run -d \\\n     --name keycloak \\\n     -p 8080:8080 \\\n     -e KEYCLOAK_USER=admin \\\n     -e KEYCLOAK_PASSWORD=admin \\\n     quay.io/keycloak/keycloak:latest start-dev\n   ```\n\n3. **Access the Keycloak Admin Console**\n\n    Open your web browser and navigate to `http://localhost:8080/auth`. \n    Log in using the admin credentials you provided (username: `admin`, password: `admin`).\n\n    For this tutorial, the realm we created was called `Tutorial-web`,\n    and the selected client ID was `angular-fe-client`.\n\n\n## Stopping and Removing the Container\n\n To stop the Keycloak container, run:\n\n ```bash\n docker stop keycloak\n ```\n\n To remove the container, run:\n\n ```bash\n docker rm keycloak\n ```\n\n\n## Keycloak Integration\n\nKeycloak is used for managing authentication and authorization. Follow these steps to configure Keycloak for this project:\n\n1. **Install Keycloak Angular Library**\n\n   Install the Keycloak Angular library using npm:\n\n   ```bash\n   npm install keycloak-angular keycloak-js\n   ```\n\n2. **Configure Keycloak**\n\n   Create a `keycloak.service.ts` file in your `src/app` directory to configure Keycloak:\n\n   ```typescript\n   import { Injectable } from '@angular/core';\n   import { KeycloakService } from 'keycloak-angular';\n\n   @Injectable({\n     providedIn: 'root'\n   })\n   export class KeycloakAuthService {\n     constructor(private keycloakService: KeycloakService) {}\n\n     async init() {\n       try {\n         await this.keycloakService.init({\n           config: {\n             url: 'https://\u003cKEYCLOAK_SERVER\u003e/auth',\n             realm: '\u003cREALM_NAME\u003e',\n             clientId: '\u003cCLIENT_ID\u003e'\n           },\n           initOptions: {\n             onLoad: 'check-sso',\n             checkLoginIframe: false\n           }\n         });\n       } catch (error) {\n         console.error('Keycloak initialization failed', error);\n       }\n     }\n   }\n   ```\n\n   Replace `\u003cKEYCLOAK_SERVER\u003e`, `\u003cREALM_NAME\u003e`, and `\u003cCLIENT_ID\u003e` with your Keycloak server URL, realm name, and client ID respectively.\n\n3. **Initialize Keycloak**\n\n   In your `app.module.ts`, import and initialize the Keycloak service:\n\n   ```typescript\n   import { APP_INITIALIZER, NgModule } from '@angular/core';\n   import { BrowserModule } from '@angular/platform-browser';\n   import { AppComponent } from './app.component';\n   import { KeycloakAuthService } from './keycloak.service';\n   import { KeycloakAngularModule, KeycloakService } from 'keycloak-angular';\n\n   export function initializeKeycloak(keycloakAuthService: KeycloakAuthService) {\n     return () =\u003e keycloakAuthService.init();\n   }\n\n   @NgModule({\n     declarations: [\n       AppComponent\n     ],\n     imports: [\n       BrowserModule,\n       KeycloakAngularModule\n     ],\n     providers: [\n       KeycloakAuthService,\n       {\n         provide: APP_INITIALIZER,\n         useFactory: initializeKeycloak,\n         deps: [KeycloakAuthService],\n         multi: true\n       }\n     ],\n     bootstrap: [AppComponent]\n   })\n   export class AppModule { }\n   ```\n\n4. **Protect Routes**\n\n   To protect your routes, use the Keycloak `AuthGuard`:\n\n   ```typescript\n   import { Injectable } from '@angular/core';\n   import { CanActivate, Router } from '@angular/router';\n   import { KeycloakService } from 'keycloak-angular';\n\n   @Injectable({\n     providedIn: 'root'\n   })\n   export class AuthGuard implements CanActivate {\n     constructor(private keycloakService: KeycloakService, private router: Router) {}\n\n     async canActivate(): Promise\u003cboolean\u003e {\n       if (this.keycloakService.isLoggedIn()) {\n         return true;\n       } else {\n         await this.keycloakService.login();\n         return false;\n       }\n     }\n   }\n   ```\n\n   Apply the `AuthGuard` to routes you want to protect in your routing module:\n\n   ```typescript\n   import { NgModule } from '@angular/core';\n   import { RouterModule, Routes } from '@angular/router';\n   import { TutorialListComponent } from './tutorial-list/tutorial-list.component';\n   import { TutorialEditComponent } from './tutorial-edit/tutorial-edit.component';\n   import { AuthGuard } from './auth.guard';\n\n   const routes: Routes = [\n     { path: 'tutorials', component: TutorialListComponent, canActivate: [AuthGuard] },\n     { path: 'edit/:id', component: TutorialEditComponent, canActivate: [AuthGuard] },\n     // other routes...\n   ];\n\n   @NgModule({\n     imports: [RouterModule.forRoot(routes)],\n     exports: [RouterModule]\n   })\n   export class AppRoutingModule { }\n   ```\n\n## Development server\n\nRun `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.\n\n## Code scaffolding\n\nRun `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.\n\n## Build\n\nRun `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.\n\n## Running unit tests\n\nRun `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).\n\n## Running end-to-end tests\n\nRun `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end sting capabilities.\n\n## Further help\n\nTo get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyedabdullahrahman%2Fdemo-project","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsyedabdullahrahman%2Fdemo-project","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyedabdullahrahman%2Fdemo-project/lists"}