# Keycloak Account UI This project is the next generation of the Keycloak Account UI. It is written with React and [PatternFly 4](https://www.patternfly.org/v4/) and uses [Vite](https://vitejs.dev/guide/). ## 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 ```bash 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. ```jsx import { KeycloakProvider } from "@keycloak/keycloak-account-ui"; //... {/* rest of you application */} ``` ### Translation For the translation we use `react-i18next` you can [set it up](https://react.i18next.com/) 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: ```ts backend: { loadPath: `http://localhost:8180/resources/master/account/{{lng}}`, parse: (data: string) => { const messages = JSON.parse(data); const result: Record = {}; 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: ```ts 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. ```bash LIB=true pnpm run build ```