Integrate "Change password" (from account console) into own webapp?

Getting advice
1

My web application with a backend is secured by OAuth2 with Keycloak as AuthServer. It needs a screen where a logged in user can change their own password by entering the old and a new password.

If I understand there are two ways to achieve this:

  1. Redirect the user to the account console so that they can change the password there.
  2. Have the user enter the password into my application, and use the admin REST API from the backend to change the password.

My understanding is that option 2 (the admin REST API) is discouraged for two reasons: first, the it’s none of the application’s business to ask for user credentials (this should be Keycloak’s job), and second there is no good way to verify the old password via the admin REST API (there’s a workaround to request a token by client credentials, but this has a couple of drawbacks). I understand this.

However, redirecting to the account console is also no option since my app is required (by client specification) to show the “change password” screen within the app itself.

Question:

  • Is there a possibility to integrate the relevant part of the account console into an existing web application, eg. via iframe or some other means.
  • Can anyone point to an example where this has been done?

Thank you!

1 Like
2

Another way to do this is to add the UPDATE_PASSWORD Required Action to the user’s account. This will prompt them to update their password on the next login. You can also force this by sending them to the login with the prompt=login flag set. Thus the user will be prompted to login with their old password, and then be required to update their password before proceeding.

It is also possible to use the APIs that the new account console uses. This is not documented, but I have done this, and just used the Chrome Developer Tools network tab to figure out the calls that were being made. Assuming the user has the correct roles, and the token has been issued with the right scopes, they will be able to do this with their access token.

1 Like
3

AFAIK there’s no API/endpoint to change the password!?
The new account console just calls the AIA to reset a password. There was an endpoint in the very early days of the account API, but IIRC this was removed again, as it is encouraged to NOT integrate sensitive operations in 3rd party applications, same as with login. This all should only be able to be done on the auth server itself.

4

Thank you. Yes, now I see that it is no longer available. As @dasniko says, it is recommended to only do on the auth server. So the 1st recommendation I made is the best one.

5

Thank you for your answers.

I agree that it’s the AuthServer’s job to handle the password change conversation, and I was NOT looking for an API to do the password change from the backend of my application.

My line of thinking was: Is is possible to integrate (a part of) the account console UI into my own app such that the user doesn’t notice that it’s the AuthServer they’re talking to?

Unfortunately that’s what my customer wants the application to look like, so solutions that involve a redirect, a separate window/tab or a relogin cannot fulfill the requirements.

6

I can’t and I won’t tell you, if that’s possible.
I tell all my customers, no matter what they want: “do it right, or don’t do it at all”
Everything else will lead to issues, sooner or later.

7

@dasniko Thanks for your opinion. I wasn’t aware that integrating the password change dialog into the app’s UI would mean “not to do it right”. Could you elaborate why you think it is so?

Is this because the end user would be encouraged to enter their password into what seems to be a “third-party” app rather than where it belongs (ie Auth Server)?

8

Exactly. This behavior trains the user to enter its credentials wherever a blinky-shiny “type your password here” field is. IMHO it’s up to all of us, to stop such things (at least when using OIDC where there are clear concepts for this) and to advise and convince all the managers and sales people out there which thinks that everything hast to work “simple” and how they imagine. But they are no security experts, even if they think so. But when it comes to a security issue, data breach, identity theft or whatever, they will blame the developers, that “they” have done it in an insecure way.

I’m having these kind of discussions since I’m in this business, and that’s quite more than a few weeks. It’s frustrating, yes, it’s annoying, yes, but still, it has to be done!

1 Like
9

I believe there is a third option:

  • Create an authentication flow (RESET-FLOW) on keycloak with a forced reset password execution after login (copy browser flow and change accordingly).
  • register another client (RESET-CLIENT-ID) on keycloak, with RESET-FLOW as a browser flow override.

On your app, to let the user change his password, you manually assemble the login URL, using the RESET-CLIENT-ID.

User is sent to login with keycloak and asked to change his password. Gets redirected back to your application after that.

The is a fourth option:

  • When user wants to change the password, your backend uses keycloak’s admin REST API to set the “Update Password” as a required action to that user.
  • Send user to login again, this time using the prompt=login parameter to force the authentication flow to read required actions.
10

UPDATE:
There is a kc_action parameter available in keycloak to let application force required actions.

 ../realms/myrealm/protocol/openid-connect/auth
    ?response_type=code
    &client_id=myclient
    &redirect_uri=https://myclient.com
    &kc_action=update_profile

To force (or allow) a password update, use kc_action=UPDATE_PASSWORD

1 Like
11

Thank you all for your advices.
In our angular application, best way to change password was to create “button” with “hardcoded” link to: https://keycloakUrl/realms/myrealm/protocol/openid-connect/auth
?response_type=code
&client_id=myclient
&redirect_uri=myAppUrl
&kc_action=UPDATE_PASSWORD