User Account Management

Redirecting to your IdP's account managment page

IdP always provide a user account page that let users, update their password, account information, manage their session. If you are using Keycloak you can generate the link to the Account Console with:

Framework Agnostic

import { createKeycloakUtils } from "oidc-spa/keycloak";

const keycloakUtils = createKeycloakUtils({ issuerUri: oidc.params.issuerUri });

const accountLinkUrl = keycloakUtils.getAccountUrl({
    clientId: oidc.params.clientId,
    validRedirectUri: oidc.params.validRedirectUri,
    locale: "en" // Optional
});

React

Angular

Direct Link to Specific Actions

In this section we assume you are using Keycloak. If you are using another authentication server you'll have to addapt the queryParameter provided.

There is thee main actions:

• UPDATE_PASSWORD: Enables the user to change their password.

• UPDATE_PROFILE: Enable the user to edit teir account information such as first name, last name, email, and any additional user profile attribute that you might have configured on your Keycloak server.

• delete_account: (In lower case): This enables the user to delete he's account. You must enable it manually on your Keycloak server Admin console. See Keycloak Configuration Guide.

Let's, as an example, how you would implement an update password button:

Vanilla API

import { createOidc } from "oidc-spa";
import { parseKeycloakIssuerUri } from "oidc-spa/tools/parseKeycloakIssuerUri";

const oidc = await createOidc({ ... });

if( oidc.isUserLoggedIn ){

   // Function to invoke when the user click on your "change my password" button.
   const updatePassword = ()=>
      oidc.goToAuthServer({
         extraQueryParams: { 
             kc_action: "UPDATE_PASSWORD" 
         }
      });
   // NOTE: This is optional, it enables you to display a feedback message
   // when the user is redirected back to your application after completing
   // or canceling the action.
   if( 
      oidc.backFromAuthServer?.extraQueryParams.kc_action === "UPDATE_PASSWORD"
   ){
      switch(oidc.backFromAuthServer.result.kc_action_status){
          case "canceled": 
             alert("You password was not updated");
             break;
          case "success":
             alert("Your password has been updated successfuly");
             break;
      }
   }
}

// Url for redirecting users to the keycloak account console.
const keycloakAccountUrl = parseKeycloakIssuerUri(oidc.params.issuerUri)
   .getAccountUrl({ 
       clientId: params.clientId,
       backToAppFromAccountUrl: `${location.href}${import.meta.env.BASE_URL}`
    });
        

React

Angular