068ce5a61f
Closes #30024 Signed-off-by: rmartinc <rmartinc@redhat.com> |
||
---|---|---|
.. | ||
maven-resources | ||
maven-resources-community/theme/keycloak.v3/account/messages | ||
public | ||
src | ||
test | ||
.gitignore | ||
index.html | ||
package.json | ||
playwright.config.ts | ||
pom.xml | ||
README.md | ||
tsconfig.json | ||
vite.config.ts |
Keycloak Account UI
This project is the next generation of the Keycloak Account UI. It is written with React and PatternFly 4 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-account-ui";
//...
<KeycloakProvider environment={{
authUrl: "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