Display Logged-in User Profile

Update Profile Component with User Information

Let’s now add code to display the logged in users' information on the profile page as well as a logout button. The logout button will utilise the previously created AuthenticationService to log the user out via Keycloak. Let’s update and profile.component.html and profile.component.ts respectively:

            <h2>Welcome {{ claims["name"] }}!</h2>
            <hr>

            <h4>Your identifier is {{ claims["preferred_username"] }} </h4>
            
            <h4> Your email is {{ claims["email"] }} </h4>
            
            <div class="p-3 m-3 rounded" *ngIf="roles !== undefined"> {{ roles }}</div>
            
            <div class="p-2">
            
            <h2>OAuth Client Details</h2>
            </div>
            <div class="alert alert-primary" role="alert">
            
            <p><b>Keycloak Client ID:</b> {{ clientId }}</p>
            
            <p><b>Keycloak Realm:</b> {{ issuer }}</p>
            
            </div>
            <div class="row">
            
            <div class="col d-flex justify-content-center">
            
            <button class="btn btn-primary m-1" (click)="logout()">Logout</button>
            
            <button class="btn btn-primary m-1" (click)="getClaims()">Get Claims from AccessToken</button>
            
            </div>
            </div>

        

            import { Component, OnInit } from '@angular/core';
            import { OAuthService } from 'angular-oauth2-oidc';
            import { AuthService } from '../auth.service';
            
            @Component({
                selector: 'app-profile',
                templateUrl: './profile.component.html',
                styleUrls: ['./profile.component.scss']
            })
            export class ProfileComponent implements OnInit {
            
                claims: Object;
                clientId: string;
                issuer: string;
                roles: string[];
            
                constructor(private oauthService: OAuthService,
                            private authService: AuthService) { }

                ngOnInit(): void {
                    // Extract identity claims from the OpenID Connect ID Token
                    this.claims = this.oauthService.getIdentityClaims();
                
                    // Extract the OpenID Client ID from the access token
                    this.clientId = this.authService.getClientId();
                
                    // Extract the JWT issuer from the access token
                    this.issuer = this.authService.getIssuer();
                }
                
                /**
                * Initiate a logout process with Keycloak. This function will re-direct to Keycloak to
                * invalidate the sessions and the tokens within session storage
                */
                public logout(): void {
                    this.authService.logout();
                }
                
                /**
                * Extract the role claims out of the access token
                */
                public getClaims(): void {
                    this.roles = this.authService.getClaims();
                }
            }            
        

Let's now launch our application by running the application:

            ng serve
        

By default, the application will run on localhost on port 4200.

If you now navigate to http://localhost:4200/profile you will get re-directed to your Haventec login page. After a successful login the browser will re-direct to the callback component to exchange the OAuth code for tokens and successively navigate to the /profile page.

Congratulations, you’ve now successfully integrated your Angular application with Keycloak. Your application can now:

• Protect routes using an AuthGuard
• Login and Logout with Haventec Authenticate
• Derive roles from the provisioned access tokens