keycloak-scim/js/apps/account-ui
dependabot[bot] 57a2990ae5 Bump vite-plugin-checker from 0.7.0 to 0.7.1
Bumps [vite-plugin-checker](https://github.com/fi3ework/vite-plugin-checker) from 0.7.0 to 0.7.1.
- [Release notes](https://github.com/fi3ework/vite-plugin-checker/releases)
- [Changelog](https://github.com/fi3ework/vite-plugin-checker/blob/main/CHANGELOG.md)
- [Commits](https://github.com/fi3ework/vite-plugin-checker/compare/vite-plugin-checker@0.7.0...vite-plugin-checker@0.7.1)

---
updated-dependencies:
- dependency-name: vite-plugin-checker
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
2024-07-08 15:19:02 +02:00
..
maven-resources added missing consent text (#30493) 2024-06-21 11:25:43 +02:00
maven-resources-community/theme/keycloak.v3/account/messages Translated using Weblate (German) (#30247) 2024-06-19 10:49:48 +02:00
public Fix current page highlight in Account UI sidebar navigation (#30403) 2024-06-13 14:38:43 +02:00
src make admin-ui build as a library (#30268) 2024-07-05 12:48:10 -04:00
test Run the Vite dev server through the Keycloak server (#27311) 2024-06-12 11:55:14 +02:00
.gitignore changed name and added version number (#28157) 2024-04-19 14:10:34 -04:00
package.json Bump vite-plugin-checker from 0.7.0 to 0.7.1 2024-07-08 15:19:02 +02:00
playwright.config.ts Run the Vite dev server through the Keycloak server (#27311) 2024-06-12 11:55:14 +02:00
pom.xml Output Vite build directly into Maven target directory (#30490) 2024-06-19 14:36:04 +02: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