Thursday, July 27, 2023

Single Sign-On with Angular 16 Keycloak 22 Spring Boot 3

Single Sign-On (SSO) is an authentication process that allows users to access multiple applications or services with a single set of login credentials. In traditional authentication systems, users need to enter their username and password separately for each application they want to use, which can become cumbersome and lead to security risks. SSO streamlines this process by providing a centralized authentication mechanism.

Single Sign-On typically works:

  1. User logs in: The user enters their login credentials (username and password) into a centralized authentication system, which is often referred to as the Identity Provider (IdP).
  2. Authentication: The IdP verifies the user's credentials and authenticates their identity.
  3. Token issuance: Upon successful authentication, the IdP generates a secure token that contains information about the user's identity and authentication status.
  4. Access to other services: When the user tries to access a different application or service (referred to as the Service Provider or SP), the application asks for authentication.
  5. Token validation: Instead of prompting the user for credentials again, the application accepts the token issued by the IdP and validates it.
  6. Access granted: If the token is valid and the user is authorized to use the service, access is granted without the need for additional login credentials.

Advantages of Single Sign-On:

  1. Improved user experience: Users only need to remember one set of login credentials, making it more convenient and reducing the risk of forgotten passwords.
  2. Enhanced security: Since users don't need to enter credentials into each service, the likelihood of them using weak or easily guessable passwords is reduced. Additionally, SSO allows for centralized security policies and better monitoring of user access.
  3. Easier administration: IT administrators can manage user access and permissions from a central location, making it simpler to grant or revoke access to various applications.
  4. Cost savings: SSO can reduce support costs related to password resets and account management issues.
Single Sign-On is widely used in various industries and organizations, especially when employees need access to multiple internal systems or when a company offers services to external users across different platforms. It promotes both security and user convenience, striking a balance between these two critical aspects.


  • Configuration Angular Application
  • Configuration Spring Boot  project  
  • Configuration and installing Keycloak 22 by docker compose 
  • Run & Test

Configuration  Angular App:


  • Visual Studio Code 
  • Node 18
  • Npm 9
  • Angular Cli 16 

Check the official documentation  keycloak-angular

By default, all HttpClient requests will add the Authorization header in the format of: Authorization: Bearer **_TOKEN_**.

  • Configuration Angular and keycloack.

npm install keycloak-angular keycloak-js


import { APP_INITIALIZER, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { KeycloakAngularModule, KeycloakService } from 'keycloak-angular';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

function initializeKeycloak(keycloak: KeycloakService) {
  return () =>
      config: {
        realm: 'demo',
        url: 'http://localhost:8080',
        clientId: 'spring-boot-angular-keycloak'
      initOptions: {
        onLoad: 'check-sso',
          window.location.origin + '/assets/silent-check-sso.html'

  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, KeycloakAngularModule, HttpClientModule],
  providers: [
      provide: APP_INITIALIZER,
      useFactory: initializeKeycloak,
      multi: true,
      deps: [KeycloakService]
  bootstrap: [AppComponent]
export class AppModule { }

Create a file called silent-check-sso.html in the assets directory of your application and paste in the contents as seen below.

      parent.postMessage(location.href, location.origin);

Configuration Spring Boot project  :


  • Spring Boot 3.1.2
  • Spring Security 6.1
  • OAuth2 Resource Server
  • Java 17
  • Maven 
  • IntelliJ IDEA Community

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="" xmlns:xsi=""
		<relativePath/> <!-- lookup parent from repository -->
	<description>Demo project for Spring Boot</description>

		<!-- oauth2 resourcer server -->






  port: 8081
    context-path: /

          issuer-uri: http://localhost:8080/realms/demo
          jwk-set-uri: http://localhost:8080/realms/demo/protocol/openid-connect/certs

Configuration class

  • Configure the CORS policies. You can do this by defining a bean for CorsConfigurationSource.
package com.henry.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.CorsConfigurationSource;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

import java.util.Collection;
import java.util.Map;

public class SecurityConfig {

    public SecurityFilterChain securityFilterChain(HttpSecurity httpSecurity) throws Exception {

                .authorizeHttpRequests(registry -> {
                .oauth2ResourceServer(oauth2Configure -> oauth2Configure.jwt(jwtConfigurer -> jwtConfigurer.jwtAuthenticationConverter(jwt -> {
                    Map<String, Collection<String>> realmAccess = jwt.getClaim("realm_access");
                    Collection<String> roles = realmAccess.get("roles");
                    var grantedAuthorities =
                            .map(role -> new SimpleGrantedAuthority("ROLE_" + role))
                    return new JwtAuthenticationToken(jwt, grantedAuthorities);



    public CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.addAllowedOrigin("*"); // Set allowed origins here (you can specify specific origins instead of "*")
        configuration.addAllowedMethod("*"); // Set allowed HTTP methods (e.g., GET, POST, etc.)
        configuration.addAllowedHeader("*"); // Set allowed headers (e.g., Content-Type, Authorization, etc.)

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;

    public CorsFilter corsFilter() {
        return new CorsFilter(corsConfigurationSource());


package com.henry.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

public class WebConfig {

    public WebMvcConfigurer corsConfigurer()
        return new WebMvcConfigurer() {
            public void addCorsMappings(CorsRegistry registry) {


package com.henry.model;

public class User {

    private Long id;
    private String username;
    private String email;

    public Long getId() {
        return id;

    public void setId(Long id) { = id;

    public String getUsername() {
        return username;

    public void setUsername(String username) {
        this.username = username;

    public String getEmail() {
        return email;

    public void setEmail(String email) { = email;


package com.henry.controller;

import com.henry.model.User;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;

import java.util.ArrayList;
import java.util.List;

public class UserController {

    private List<User> users = new ArrayList<>();
    private Long currentUserId = 1L; // Used to assign incremental IDs to users

    public User addUser(@RequestBody User user) {
        // Assign an incremental ID to the user before saving

        // Save the user to the in-memory list
        return user;

    public ResponseEntity<User> getUserById(@PathVariable Long id) {
        // Search for the user in the in-memory list based on the provided ID
        User user =
                .filter(u -> u.getId().equals(id))

        if (user != null) {
            return ResponseEntity.ok(user);
        } else {
            return ResponseEntity.notFound().build();

Configuration  and installing Keycloak 22 by docker compose:

version: '3'
      KEYCLOAK_ADMIN: admin
      - 8080:8080
      - ./config/:/opt/keycloak/data/import:ro
    entrypoint: '/opt/keycloak/bin/ start-dev --import-realm'

Go to root folder in angular project run next commad:

 docker-compose -f docker-compose-keycloak.yml up -d

Add Valid Redirect URIs.

  • http://localhost:4200/*

  • http://localhost:8081/*

Web origings (*).

Run & Test

Run Spring Boot application with command: mvn spring-boot:run. by console, IntelliJ etc.

Run angular app ng serve.

User: admin
Passwd: admin

Hint: To access keycloak admin, please use: http://localhost:8080. Same user and password as above.




Source Code

Here on GitHub:


No comments:

Post a Comment

GraphQL Error Handling with Spring Boot 3

  Why HTTP 200 is Different from REST GraphQL servers typically return an HTTP 200 status code for all responses, regardless of whether the ...