keycloak-scim/js/apps/account-ui
dependabot[bot] 19905df8ff
Bump react-router-dom from 6.26.1 to 6.26.2 (#32751)
Bumps [react-router-dom](https://github.com/remix-run/react-router/tree/HEAD/packages/react-router-dom) from 6.26.1 to 6.26.2.
- [Release notes](https://github.com/remix-run/react-router/releases)
- [Changelog](https://github.com/remix-run/react-router/blob/main/packages/react-router-dom/CHANGELOG.md)
- [Commits](https://github.com/remix-run/react-router/commits/react-router-dom@6.26.2/packages/react-router-dom)

---
updated-dependencies:
- dependency-name: react-router-dom
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2024-09-10 10:29:47 +00:00
..
maven-resources Add dark mode styling to account console (#32484) 2024-08-29 14:13:02 +00:00
maven-resources-community/theme/keycloak.v3/account/messages Add some missing Italian translations (#32576) 2024-09-06 14:52:59 +00:00
public added organizations table to account (#32311) 2024-08-22 15:44:03 -03:00
src Add dark mode styling to account console (#32484) 2024-08-29 14:13:02 +00:00
test Show full error details in admin and account consoles 2024-07-10 16:20:26 +02:00
.gitignore changed name and added version number (#28157) 2024-04-19 14:10:34 -04:00
package.json Bump react-router-dom from 6.26.1 to 6.26.2 (#32751) 2024-09-10 10:29:47 +00:00
playwright.config.ts Run the Vite dev server through the Keycloak server (#27311) 2024-06-12 11:55:14 +02:00
pom.xml Fix typo of interface (#32636) 2024-09-04 10:01:00 +00:00
README.md make admin-ui build as a library (#30268) 2024-07-05 12:48:10 -04:00
tsconfig.json Move ESLint configuration to project root (#28639) 2024-04-12 08:34:18 +00:00
vite.config.ts small fix for library mode (#30645) 2024-06-21 09:48:55 +00:00

Keycloak Account UI

This project is the next generation of the Keycloak Account UI. It is written with React and PatternFly and uses Vite.

Features

Contains all the "pages" from the account-ui as re-usable components, all the functions to save and the side menu to use in your own build of the account-ui

Install

npm i @keycloak/keycloak-account-ui

Usage

To use these pages you'll need to add KeycloakProvider in your component hierarchy to setup what client, realm and url to use.

import { KeycloakProvider } from "@keycloak/keycloak-ui-shared";

//...

<KeycloakProvider environment={{
      serverBaseUrl: "http://localhost:8080",
      realm: "master",
      clientId: "security-admin-console"
  }}>
  {/* rest of you application */}
</KeycloakProvider>

Translation

For the translation we use react-i18next you can set it up as described on their website. If you want to use the translations that are provided then you need to add i18next-http-backend to your project and add:


backend: {
  loadPath: `http://localhost:8180/resources/master/account/{{lng}}`,
  parse: (data: string) => {
    const messages = JSON.parse(data);

    const result: Record<string, string> = {};
    messages.forEach((v) => (result[v.key] = v.value));
    return result;
  },
},

to the i18next config object.

Save functions

If you want to build your own "pages" you can still reuse the save functions:

  • deleteConsent
  • deleteCredentials
  • deleteSession
  • getApplications
  • getCredentials
  • getDevices
  • getGroups
  • getLinkedAccounts
  • getPermissionRequests
  • getPersonalInfo
  • getSupportedLocales
  • linkAccount
  • savePersonalInfo
  • unLinkAccount

Example:

import { savePersonalInfo, useEnvironment } from "@keycloak/keycloak-account-ui";

//...
function App() {
  // the save function also needs to have the context so that it knows where to POST
  // this hook gives us access to the `KeycloakProvider` context
  const context = useEnvironment();
  const submit = async (data) => {
    try {
      await savePersonalInfo(context, data);
    } catch (error) {
      // Error contains `name` and `value` of the server side errors
      // and your app will have better error handling ;)
      console.error(error);
    }
}
// ...

Building

To build a library instead of an app you need to add the LIB=true environment variable.

LIB=true pnpm run build