Setup Angular Project

Create new Angular Project

Create a new Angular project using the ng new, Let us called it demo:

        ng new demo
        ? Would you like to add Angular routing? Yes
        ? Which stylesheet format would you like to use? SCSS   [                ]
        CREATE demo/ (1022 bytes)
        CREATE demo/.editorconfig (274 bytes)
        CREATE demo/.gitignore (631 bytes)
        CREATE demo/angular.json (3638 bytes)
        CREATE demo/package.json (1256 bytes)
        CREATE demo/e2e/src/app.e2e-spec.ts (637 bytes)
        CREATE demo/e2e/src/app.po.ts (301 bytes)
        ✔ Packages installed successfully.
            Successfully initialized git.

Change directory into the demo folder and install an Angular OpenID Connect Client and Bootstrap for styling:

        cd demo
        npm install angular-oauth2-oidc --save
        npm install bootstrap jquery popper --save

Integrate Bootstrap into your Angular project within angular.json:


      "styles": [
      "scripts": [


Create a basic container to hold the different components. Open app.component.html and replace it with the following:

            <div class="container border shadow p-3 mt-5">

Create a component called profile which will display the logged in users' information:

            ng generate component profile
            CREATE src/app/profile/profile.component.scss (0 bytes)
            CREATE src/app/profile/profile.component.html (22 bytes)
            CREATE src/app/profile/profile.component.spec.ts (635 bytes)
            CREATE src/app/profile/profile.component.ts (280 bytes)
            UPDATE src/app/app.module.ts (479 bytes)

Create a component called logout which will be the page the user is shown once they log out:

            ng generate component logout
            CREATE src/app/logout/logout.component.scss (0 bytes)
            CREATE src/app/logout/logout.component.html (21 bytes)
            CREATE src/app/logout/logout.component.spec.ts (628 bytes)
            CREATE src/app/logout/logout.component.ts (276 bytes)
            UPDATE src/app/app.module.ts (561 bytes)

Open logout.component.html and add a friendly message:

            <p>Thank you for logging out. Click here to visit your <a href="../profile">profile</a> again.</p>

Create a component called pagenotfound which will be the page the user is shown when an unknown path is accessed:

            ng generate component pagenotfound
            CREATE src/app/pagenotfound/pagenotfound.component.scss (0 bytes)
            CREATE src/app/pagenotfound/pagenotfound.component.html (27 bytes)
            CREATE src/app/pagenotfound/pagenotfound.component.spec.ts (670 bytes)
            CREATE src/app/pagenotfound/pagenotfound.component.ts (300 bytes)
            UPDATE src/app/app.module.ts (1083 bytes)

Open pagenotfound.component.html and add a friendly message:

            <p>Page not found</p>

Create a component called redirect which will be the component that Keycloak will re-direct the user back to after authentication and includes the OAuth code. This OAuth code will then be exchanged for access and identity tokens from Keycloak:

            ng generate component redirect
            CREATE src/app/redirect/redirect.component.scss (0 bytes)
            CREATE src/app/redirect/redirect.component.html (23 bytes)
            CREATE src/app/redirect/redirect.component.spec.ts (642 bytes)
            CREATE src/app/redirect/redirect.component.ts (284 bytes)
            UPDATE src/app/app.module.ts (651 bytes)

Within app-routing.module.ts configure the routing by importing the previously created components and configuring the routes:


            import { ProfileComponent } from './profile/profile.component';
            import { LogoutComponent } from './logout/logout.component';
            import { RedirectComponent } from './redirect/redirect.component';
            import { PagenotfoundComponent } from './pagenotfound/pagenotfound.component';

            const routes: Routes = [
                { path: 'profile', component: ProfileComponent},
                { path: 'logout', component: LogoutComponent},
                { path: 'callback', component: RedirectComponent},
                { path: '**', component: PagenotfoundComponent}

            imports: [RouterModule.forRoot(routes)],
            exports: [RouterModule]
            export class AppRoutingModule { }


Next Steps

Create Authentication Service