Skip to content

Using Keycloak User Self-Registration Feature

Published by admin on 23. February 2022

Goal of this tutorial:

  • Allow newly created Realm Users to use Self-Registration
  • Add default Role agent to all newly created Realm Users
  • Validate Users email address before use can login
  • Let users login with using its email address
  • Add user roles to userData$ observable so the role info becomes easily available in our Angular App

Step 1: Setup Email Registration for your Keycloak Realm using Gmail SMTP

Step 2: Configure Keycloak

Configure Keycloak Realm

  • User registration: ON
  • Verify Email: ON
  • Login with Email ON

Add default Role to your Realm Setting ( Optional)

  • In this tutorial we want that every new realam user gets assigned the default role: agent
  • Navigation: Realm RBAC -> Roles -> click an Default Roles -> add agent role from Available Roles Window

Step 3 : Test login by opening Anuglar App

  • you got redirected to keycloak Login Windows

Clck on the New User ? Register Link

Fill out the registration template

Click on Register

Check you email Account and click on the email adresss verification registration Link

Now you should be able to login into your Self Registered Account !

Step 4: Test Anguar App

Click on Get Accounts

  • should work with the newly created Account out of the box
http://localhost:4200/
 14:45:04:: [ User: helmut.hutzler@gmail.com AccountService:getAccounts()] Getting all Accounts 
 14:45:04:: [ User: helmut.hutzler@gmail.com AccountService:getAccountsREST()]  Retrieving all Accounts 
 14:45:04:: [ User: helmut.hutzler@gmail.com AccountService:getAccountsREST()] Subscribe: Got all Accounts ! 
 14:45:04:: [ User: helmut.hutzler@gmail.com AccountService:getAccountsREST()] User helmut.hutzler@gmail.com: Can view accounts !

Click on Add Accounts

  • Should fail with HTTP Error 403
  • Note: This is the expected outcome
14:45:06:: [ User: helmut.hutzler@gmail.com AccountService:addAccount()] Adding an Account 
14:45:06:: ERROR: [ User: helmut.hutzler@gmail.com AccountService:addAccountsREST()]  failed: Error Code: 403 --- Message: Http failure response for http://localhost:8080/accounts: 403 Forbidden

Step 5: Mapping the default roles info userinfo struct with a Protocol Mapper

Keylcloak Setup

  • Clients -> Angular Frontend -> Mappers -> Create Protocol Mappers
  • Mapper Type: User Realm Role
  • Add to userinfo: ON

Validate userData$ Oberservable contains now Default Roles Parameters

Published inKeycloak

Be First to Comment

Leave a Reply