OIDC SPA
GitHubHome
v4
  • Documentation
  • Release Notes & Upgrade Instructions
v4
  • Documentation
    • πŸ”©Installation
    • πŸ‘¨β€πŸ”§Basic Usage
    • πŸ”ŒWeb API
    • ⏲️Auto Logout
    • ❗Error Management
    • 🎭Mock
    • πŸ”Tokens Renewal
    • πŸ›‘οΈGlobally Enforce Authentication
    • πŸ”User Account Management
    • πŸ”„Doing Something Only When a New Session is Created
  • Example setups
    • πŸ›£οΈTanStack Router
    • πŸ›€οΈReact Router
  • Resources
    • πŸ”‘Keycloak Configuration Guide
    • πŸ‘₯Accessing Keycloak Groups
    • πŸͺEnd of third-party cookies
    • πŸ—οΈJWT Of the Access Token
    • πŸ’¬Discord Server
  • ⭐Sponsors
Powered by GitBook
On this page

Was this helpful?

Export as PDF
  1. Documentation

User Account Management

PreviousGlobally Enforce AuthenticationNextDoing Something Only When a New Session is Created

Last updated 9 months ago

Was this helpful?

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

When your user is logged in, you can provide a link to redirect to Keycloak so they can manage their account.

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 .

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

import { createOidc }Β from "oidc-spa";

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.authMethod === "back from auth server" &&
      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;
      }
   }
}
function ProtectedPage() {
    // Here we can safely assume that the user is logged in.
    const { goToAuthServer, backFromAuthServer } = useOidc({ assertUserLoggedIn: true });

    return (
        <>
            <button
                onClick={() =>
                    goToAuthServer({
                        extraQueryParams: { kc_action: "UPDATE_PASSWORD" }
                    })
                }
            >
                Change password
            </button>
            {/* 
            Optionally you can display a feedback message to the user when they
            are redirected back to the app after completing or canceling the
            action.
            */}
            {backFromAuthServer?.extraQueryParams.kc_action === "UPDATE_PASSWORD" && (
                <p>
                    {(()=>{
                        switch(backFromAuthServer.result.kc_action_status){
                            case "success":
                                return "Password sucessfully updated";
                            case "cancelled":
                                return "Password unchanged";
                        }
                    })()}
                </p>
            )}
        </>
    );
}
πŸ”
Keycloak Configuration Guide