Bypass Keycloak login page to access Keycloak UI with existing token

In our Angular web app, we use Keycloak APIs for auth and managing user-related operations. We're now facing a challenge: we need to embed the Keycloak UI within an iframe in our application allowing some users to perform some configurations.

But, we encounter a major user experience issue. After successfully logging into our application using our login screen, when the embedded Keycloak UI is accessed Keycloak asks the user for their username and password again. Since the user is already authenticated and possesses a valid token, this redundant login step is highly undesirable.

How can we use the existing user token to seamlessly authenticate the user within the embedded Keycloak UI without requiring them to re-enter their credentials?

NOTE : While redirecting to Keycloak for initial login to our app could address this, our application's architecture necessitates the use of Keycloak APIs for authentication and other functionalities. Therefore, we seek alternative solutions for seamless iframe integration.

Continue reading...