Authenticate users in your webapp with Azure Active Directory as IDP and Keycloak as SP

Learn how to use Keycloak to authenticate users in a javascript client application and delegate authentication to Azure Active Directory, GitHub, LinkedIn, Google or any identity provider. Quick login page example built with Vue.js v3 using keycloak js adapter.

The article mainly targets Azure Active Directory as delegate Identity Provider.

Realm configuration

Keycloak version 12.0.2 is used in this example. First we need to create a realm in Keycloak and configure it accordingly.

To launch a keycloak server locally, use this docker compose file and execute the following command docker-compose -f keycloak.yml

version: '2'
services:
  keycloak:
    image: jboss/keycloak:12.0.2
    command:
      [
        '-b',
        '0.0.0.0',
        '-Djboss.socket.binding.port-offset=1000',
        '-Dkeycloak.migration.strategy=OVERWRITE_EXISTING'
      ]
    environment:
      - KEYCLOAK_USER=admin
      - KEYCLOAK_PASSWORD=admin
      - DB_VENDOR=h2
    ports:
      - 9080:9080
      - 9443:9443
      - 10990:10990

Then connect to Keycloak administration console (http://localhost:9080/auth, credentials are admin/admin), create a realm and name it my-realm.

Add a delegate identity provider