OAuth2 Example with Angular Frontend and Spring Backend

This demo project implements application support for the Authorization Code Grant as specified in RFC 6749, for a (Kubernetes) web application consisting of a SPA frontend and a server backend.

Frontmatter

Implementation Goals

• allow for a list of one or more external authentication providers (Keycloak, Azure Active Directory, …), configurable in the backend and then directly usable by the frontend
• frontend users pick their authentication provider from the list, and authenticate with that authentication provider
• upon success, the backend issues a session token to the frontend, containing the confirmed identity
• only the backend session token is given to the frontend; tokens issued by the authentication provider (access, refresh) are not exposed to the frontend application

Conceptual Goals

• get a clear view on the code it takes to implement the Authorization Code Grant flow,
• provide a concise but working implementation that can be used for testing or debugging particular OAuth2 identity providers,
• get a starting point for future, refined implementations.

Choice of Languages, Frameworks, and 3rd-Party Libraries

• Backend ("Client" in RFC 6749 terminology) is a Spring app written in Kotlin
• Browser frontend ("Client" in RFC 6749 terminology) is an Angular app
• Both will run as Kubernetes containers behind an Nginx load balancer

Project Structure

• ./backend contains one Maven project
  • providing the RFC 6749 authorization_code endpoint
  • providing a REST interface for the frontend
    • supplying the list of accepted authorization providers ("Authorization Server" in RFC 6749 terminology)
    • supplying session tokens
• ./frontend contains one Angular project
  • informing the user about her login status
  • if not logged int, providing login choices
  • if logged in, providing logout
• ./containers contains the Dockerfiles required for containerization
• ./devops contains Kubernetes and Terraform code for roll-out
  • also contains the ingress-nginx configuration for the application

Implementation Steps

Backend Rest Interface

One backend starting point is the public REST interface, for the frontend, see ./backend/src/main/resources/openapi.yaml (that file can directly be copy-pasted into https://editor.swagger.io/).

This defines two REST endpoints:

• /auth-providers for a JSON document listing acceptable authorization endpoints, see step "(A)" in RFC 6749, sec. 4.1
• /session-token for a plain-text JWT token

Note: these endpoint paths are relative paths; when deployed behind a proxy, usually some prefix (like /api/…) will be applied.

Next, org.openapitools:openapi-generator-maven-plugin was added to the Maven configuration in ./backend/pom.xml, configured to generate server interface code for the openapi.yaml mentioned above.

Spring Boot Backend

Another backend starting point is just the main routine. This can be achieved using https://start.spring.io/, and this introduces the current SpringBoot dependencies into the project (if you know what to opt for).

Next Steps

These are the remaining TODOs, and the order might change:

• another starting point: the frontend workspace (instead of a plain app)
• implement the REST API
• add a frontend App
• implement the frontend app (how far? what not?)
• implement the backend session handling (when to issue what token...)
• configure some auth providers
• configure roll-out (devops)
• configure k8s ingress-nginx (which http url going where)