Angular

View a live deployed version.

info

We will use the Phase Two Angular example code here, but the logic could easily be applied to any existing application.

1. Clone the Phase Two example repo.
2. Open the Angular folder within /frameworks/angular.
3. Run npm install and then npm run start. This example leverages angular-oauth2-oidc OIDC methods.
4. We'll review where we configure out Keycloak instance. Open the src/app/auth.config.ts file. We will be updating a few values from the prior section where we set up our OIDC client. Taking the values from the OIDC Client Config section, set those values in the code.

export const authCodeFlowConfig: AuthConfig = {
  // Update this with the url and realm of your hosted Keycloak instance
  issuer: "https://app.phasetwo.io/auth/realms/p2examples",
  redirectUri: window.location.origin + "/index.html",
  // Update this to the Client ID you created in the OIDC Client section
  clientId: "angular",
  responseType: "code",
  scope: "openid profile email offline_access",
  showDebugInformation: true,
};

Those are used to configure the oauthService in the src/app/user/user.component.ts file. In the constructor of the component, this is passed in.

// ...
constructor(private oauthService: OAuthService) {
  this.oauthService.configure(authCodeFlowConfig);

  // required to initialize the client
  this.oauthService.loadDiscoveryDocumentAndTryLogin();
  this.oauthService.setupAutomaticSilentRefresh();

  this.oauthService.events
    .pipe(filter((e) => e.type === 'token_received'))
    .subscribe((_) => this.oauthService.loadUserProfile());
}

6. The UserActivation.component.ts file contains additional methods that will assist with the interaction of the html template.

For handling login and logout, the following methods are used:

  signIn() {
    return this.oauthService.initLoginFlow();
  }

  signOut() {
    return this.oauthService.logOut();
  }

while we also define additional helper methods to get user information (username, email, etc) along with raw Token values. A couple are provided below as an example.

get userName(): string {
  const claims = this.oauthService.getIdentityClaims();
  if (!claims) return '';
  return claims['given_name'];
}

get idToken(): string {
  const token = this.oauthService.getIdToken();
  if (token) {
    return this.decodeAndStringifyToken(token);
  }
  return '';
}

7. Switching to the html template for the user component, src/app/user/user.component.html, we can see how the login and logout buttons are rendered. The buttons are conditionally rendered based on the user's authentication status based on the presence of the idToken.

<div *ngIf="idToken">
  <!-- show user data -->
  <!-- show logout button -->
</div>
<div *ngIf="!idToken">
  <!-- show login button -->
</div>

The logic using the authenticator to conditionally determine the Authenticated state, can be used to secure routes, components, and more.

10. Open localhost:4200. You will see the Phase Two example landing page. You current state should be Not authenticated. Click Log In. This will redirect you to your login page.

info

Use the non-admin user created in the previous section to sign in.

11. Enter the credentials of the non-admin user you created. Click Submit. You will then be redirected to the application. The Phase Two example landing page now loads your Authenticated state, displaying your user's email and name.
12. Neat! If you clear the browser state for that tab, then you will have to be redirected away to sign-in again.