57a2990ae5
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> |
||
---|---|---|
.. | ||
maven-resources | ||
maven-resources-community/theme/keycloak.v3/account/messages | ||
public | ||
src | ||
test | ||
.gitignore | ||
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 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