Securing a Spring Boot REST API with OAuth 2.0, Keycloak, and Angular

server:
	# make sure it's not the same port where Keycloak is running
	port: 8081

spring:
	security:
		oauth2:
			resourceserver:
				jwt:
					issuer-uri: "http://localhost:8080/auth/realms/MyRealm"
					jwt-set-uri: "${spring.security.oauth2.resourceserver.jwt.issuer-uri}/protocol/openid-connect/certs"
						

package com.example.demo;

import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/api")
public class ApiController {

	@GetMapping("/hello")
	public String hello() {
		return "Hello Wolrd!";
	}
}

package com.example.demo;

import org.springframework.context.annotation.Bean;  
import org.springframework.context.annotation.Configuration;  
import org.springframework.http.HttpStatus;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.web.SecurityFilterChain;  
import org.springframework.security.web.authentication.HttpStatusEntryPoint;

@Configuration
public class SecurityConfig {
	@Bean
	SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
		http.authorizeHttpRequests((authorize) -> authorize.requestMatchers("/api/**")
			.authenticated()  
		    .anyRequest()  
		    .permitAll()  
		)
		.exceptionHandling(exception -> exception  
                    .authenticationEntryPoint(new HttpStatusEntryPoint(HttpStatus.UNAUTHORIZED))  
            );  
return http.build();
	}
}

import { AuthConfig } from 'angular-oauth2-oidc';  

export const authConfig: AuthConfig = {
	issuer: 'http://localhost:8080/realms/MyRealm',
	clientId: 'MyClientId', // The "Auth Code + PKCE" client
	responseType: 'code',
	redirectUri: window.location.origin,
	silentRefreshRedirectUri: window.location.origin + '/silent-refresh.html',
	scope: 'openid profile email', // Ask offline_access to support refresh token refreshes
	useSilentRefresh: true, // Needed for Code Flow to suggest using iframe-based refreshes
	silentRefreshTimeout: 20000, // For faster testing
	timeoutFactor: 0.25, // For faster testing
	sessionChecksEnabled: true,
	showDebugInformation: true, // Also requires enabling "Verbose" level in devtools
	clearHashAfterLogin: false, // https://github.com/manfredsteyer/angular-oauth2-oidc/issues/457#issuecomment-431807040,
	nonceStateSeparator : 'semicolon', // Real semicolon gets mangled by Duende ID Server's URI encoding,
	strictDiscoveryDocumentValidation: false, // https://manfredsteyer.github.io/angular-oauth2-oidc/docs/additional-documentation/using-an-id-provider-that-fails-discovery-document-validation.html
};

import {OAuthModuleConfig} from 'angular-oauth2-oidc';

export const authOAuthModuleConfig: OAuthModuleConfig = {
	resourceServer: {
		allowedUrls: ['http://localhost:8081/api'], // list of URLs  to which the library interceptor will automatically add the access token in the request authorization header
		sendAccessToken: true
	}
};

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { OAuthErrorEvent, OAuthService } from 'angular-oauth2-oidc';
import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
import { filter, map } from 'rxjs/operators'; 

@Injectable({ providedIn: 'root' })
export class AuthService {  
	private isAuthenticatedSubject$ = new BehaviorSubject<boolean>(false);
	public isAuthenticated$ = this.isAuthenticatedSubject$.asObservable();
	private isDoneLoadingSubject$ = new BehaviorSubject<boolean>(false);
	public isDoneLoading$ = this.isDoneLoadingSubject$.asObservable();
	
	/**
	* Publishes `true` if and only if (a) all the asynchronous initial
	* login calls have completed or errorred, and (b) the user ended up
	* being authenticated.
	*
	* In essence, it combines:
	*
	* - the latest known state of whether the user is authorized
	* - whether the ajax calls for initial log in have all been done
	*/
	public canActivateProtectedRoutes$: Observable<boolean> = combineLatest([
		this.isAuthenticated$,
		this.isDoneLoading$
	]).pipe(map(values => values.every(b => b)));
	
	constructor(
		private oauthService: OAuthService,
		private router: Router,
	) {
		// Useful for debugging:
		this.oauthService.events.subscribe(event => {
		if (event instanceof OAuthErrorEvent) {
			console.error('OAuthErrorEvent Object:', event);
		} else {
			console.warn('OAuthEvent Object:', event);
		}
	});
	
	  
	
	this.oauthService.events
	.subscribe(_ => {
			this.isAuthenticatedSubject$.next(this.oauthService.hasValidAccessToken());
		});
		
		this.isAuthenticatedSubject$.next(this.oauthService.hasValidAccessToken());
		
		this.oauthService.events
			.pipe(filter(e => ['token_received'].includes(e.type)))
			.subscribe(e => this.oauthService.loadUserProfile());
			
		this.oauthService.events
			.pipe(filter(e => ['session_terminated', 'session_error'].includes(e.type)))
			.subscribe(e => this.logout());
	}
	
	public runInitialLoginSequence(): Promise<void> {
		if (location.hash) {
			console.log('Encountered hash fragment, plotting as table...');
			console.table(location.hash.substr(1).split('&').map(kvp => kvp.split('=')));
		}
	
		// 0. LOAD CONFIG:
		// First we have to check to see how the IdServer is
		// currently configured:
		return this.oauthService.loadDiscoveryDocument()
			// 1. HASH LOGIN:
			// Try to log in via hash fragment after redirect back
			// from IdServer from initImplicitFlow:
			.then(() => this.oauthService.tryLogin())
			.then(() => {
				if (this.oauthService.hasValidAccessToken()) {
					return Promise.resolve();
				} else {
					return Promise.reject(new Error());
				}
			})
		
		.then(() => {
			this.isDoneLoadingSubject$.next(true);
			// Check for the strings 'undefined' and 'null' just to be sure. Our current
			// login(...) should never have this, but in case someone ever calls
			// initImplicitFlow(undefined | null) this could happen.
			if (this.oauthService.state && this.oauthService.state !== 'undefined' && this.oauthService.state !== 'null') {
				let stateUrl = this.oauthService.state;
				if (stateUrl.startsWith('/') === false) {
					stateUrl = decodeURIComponent(stateUrl);
				}
				console.log(`There was state of ${this.oauthService.state}, so we are sending you to: ${stateUrl}`);
				this.router.navigateByUrl(stateUrl);
			}
		})
		.catch(() => this.isDoneLoadingSubject$.next(true));
	}
	
	public logout() {
		this.oauthService.logOut();
		this.router.navigateByUrl("/");
	}
	
	public login(targetUrl?: string) {
		// Note: before version 9.1.0 of the library you needed to
		// call encodeURIComponent on the argument to the method.
		this.oauthService.initLoginFlow(targetUrl ?? this.router.url);
	}
}

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component'; 

bootstrapApplication(AppComponent, appConfig)
	.catch((err) => console.error(err));

import { ApplicationConfig, provideZoneChangeDetection, APP_INITIALIZER } from '@angular/core';
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { provideRouter } from '@angular/router';
import { provideOAuthClient, OAuthService } from 'angular-oauth2-oidc';
import { authOAuthModuleConfig } from './auth-oauth-module-config';
import { AuthService } from "./auth.service";
import { authConfig } from './auth-config';

import { routes } from './app.routes';  

export function authAppInitializerFactory(authService: AuthService, oauthService: OAuthService): () => Promise<void> {
	oauthService.configure(authConfig);
	return () => authService.runInitialLoginSequence();
}  

export const appConfig: ApplicationConfig = {
	providers: [
		provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes),
		provideHttpClient(withInterceptorsFromDi()),
		provideOAuthClient(authOAuthModuleConfig),
		{
			provide: APP_INITIALIZER,
			useFactory: authAppInitializerFactory,
			deps: [AuthService, OAuthService],
			multi: true
		}
	]
};

<main>
	<button (click)="login()">login</button>
	<button (click)="requestApi()">Request API</button>
</main> 
<router-outlet />

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { RouterOutlet } from '@angular/router';
import { AuthService } from './auth.service';  

@Component({
	selector: 'app-root',
	standalone: true,
	imports: [RouterOutlet],
	templateUrl: './app.component.html',
	styleUrl: './app.component.scss'
})

export class AppComponent implements OnInit {
	constructor(private http: HttpClient, private authService: AuthService) {}  

	ngOnInit() {}
	
	login() {
		console.log("login clicked");
		this.authService.login();
	}

	requestApi() {
		this.http.get<string>("http://localhost:8081/api/hello").subscribe({
			next: succ => {
				console.log(succ);
			},
			error: err => {
				console.error(err);
			}
		})
	}
}