This project is the next generation of the Keycloak Account UI. It is written with React and [PatternFly](https://www.patternfly.org/) and uses [Vite](https://vitejs.dev/guide/).
npm install @keycloak/keycloak-account-uiThis project is the next generation of the Keycloak Account UI. It is written with React and PatternFly and uses Vite.
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
``bash`
npm i @keycloak/keycloak-account-ui
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-ui-shared";
//...
realm: "master",
clientId: "security-admin-console"
}}>
{/ rest of you application /}
`
For the translation we use react-i18next you can set it up as described on their website.i18next-fetch-backend
If you want to use the translations that are provided then you need to add to your project and add:
`ts
backend: {
loadPath: http://localhost:8180/resources/master/account/{{lng}},
parse: (data: string) => {
const messages = JSON.parse(data);
return Object.fromEntries(
messages.map(({ key, value }) => [key, value])
);
},
},
`i18next
to the config object.
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 contextname
const context = useEnvironment();
const submit = async (data) => {
try {
await savePersonalInfo(context, data);
} catch (error) {
// Error contains 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