In your Webpack Project
Last updated
Was this helpful?
Last updated
Was this helpful?
If you have a Webpack/React/TypeScript project you can integrate Keycloakify directly inside it.
In this guide we're going to work with a vanilla project.
Let's start by installing Keycloakify (and optionally Storybook) to our project:
Now you want to modify your entry point so that:
If the kcContext global is defined, render your Keycloakify theme
Else, render your App as usual.
Finally you want to add some script for Keycloakify in you package.json and also let Keycloakify know about how your Webpack project is configured.
Keycloakify has many build options that you can use, however projectBuildDirPath
, staticDirPathInProjectBuildDirPath
and publicDirPath
are parameters specific to the use of Keycloakify in a Webpack context.
Theses are not preferences! If you're not using Create React App your Webpack configuration is probably different and you want to update those values to reflect how webpack build your site in your project.
That's it, your project is ready to go!
You're now able to use all the Keycloakify commands (npx keycloakify --help
) from the root of your project.
Next we want to repatriate the relevant files from into our project:
Leave accountThemeImplementation set to "none" for now. To initialize the account theme refer to .
You can run npm run build-keycloak-theme
, the JAR distribution of your Keycloak theme will be generated in build_keycloak
().
If you're currently using or to manage user authentication in your app you might want to checkout , the alternative from the Keycloakify team.
If you have any issues ! We're here to help!
npm run build
the app distribution is generated in a build/ directory, this is why we use "projectBuildDirPath": "build"
. We can also see that all the assets of the app are gathered under a static/
directory this is why we use "staticDirPathInProjectBuildDirPath": "static"
. And finally we can see that everything we put in the public/ directory is copied over to the build/ directory when building so we use "publicDirPath": "public"
.