Angular OpenID Connect Integration Introduction

Overview

This document outlines the basic configuration to integrate your Angular application with Keycloak using the Authorization Code flow for OpenID Connect.

Prerequisites

• Complete the Quick Start Tutorial to create your Haventec Application
• Install Keycloak
• Create a Keycloak Realm
• Configure the Haventec Identity Provider for your Realm
• Install Angular CLI ensuring you have Angular 10+ and Node 12+ installed

Main Steps

1. Configure your OpenID Connect Client
2. Setup Angular Project
3. Create your Authentication Service
4. Protect Routes
5. Display Logged-in User Profile