diff --git a/README.md b/README.md
index 849744d2..8d74c21c 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
- 🔏 Keycloak theme generator for Reacts app 🔏
+ 🔏 Customize key cloak's pages as if they were part of your App 🔏
@@ -11,9 +11,11 @@
+Ultimately this build tool Generates a Keycloak theme
-
-**!!! This module is under active developement. It is not usable yet!!!**
+
+
+
# Motivations
@@ -22,20 +24,14 @@ The problem:

When we redirected to Keycloak the user suffers from a harsh context switch.
-On je login/register pages the language is set back to default and the theme is different that the one on the app.
-
Keycloak does offer a way to customize theses pages but it requires a lot of raw HTML/CSS hacking
to reproduce the look and feel of a specific app. Not mentioning the maintenance cost of such an endeavour.
-Wouldn't it be great if we could just design the login and register pages as if they where part of our app while
-still letting Keycloak handle the heavy lifting of actually authenticating the users?
-
+Wouldn't it be great if we could just design the login and register pages as if they where part of our app?
Here is `yarn add keycloakify` for you 🍸
TODO: Insert video after.
-
# How to use
-
## Setting up the build tool
Add `keycloakify` to the dev dependencies of your project `npm install --save-dev keycloakify` or `yarn add --dev keycloakify`
@@ -56,18 +52,102 @@ Typically you will get:
Then build your app with `yarn run build` or `npm run build`, you will be provided with instructions
about how to load the theme into Keycloak.
-[](https://youtu.be/xTz0Rj7i2v8)
-
## Developing your login and register pages in your React app
-TODO
+### Just changing the look
+The fist approach is to only arr/replace the default class names by your
+own.
+
+```tsx
+
+import { App } from ".//App";
+import {
+ KcApp,
+ defaultKcProps,
+ kcContext
+} from "keycloakify";
+import { css } from "tss-react";
+
+const myClassName = css({ "color": "red" });
+
+reactDom.render(
+ // Unless the app is currently being served by Keycloak
+ // kcContext is undefined.
+ kcContext !== undefined ?
+ :
+ , // Your actual app
+ document.getElementById("root")
+);
+```
+
+result:
+
+
+
+
+
+### Changing the look and feel
+
+If you want to really re-implement the pages the best approach is to
+create you own version of the [``](https://github.com/garronej/keycloakify/blob/develop/src/lib/components/KcApp.tsx).
+Copy/past some of [the components](https://github.com/garronej/keycloakify/tree/develop/src/lib/components) provided by this module and start hacking around.
+
+### Hot reload
+
+By default, in order to see your changes you will have to wait for
+`yarn build` to complete which can takes sevrall minute.
+
+If you want to test your login screens outside of Keycloak, in [storybook](https://storybook.js.org/)
+for example you can use `kcContextMocks`.
+
+```tsx
+import {
+ KcApp,
+ defaultKcProps,
+ kcContextMocks
+} from "keycloakify";
+
+reactDom.render(
+ kcContext !== undefined ?
+
+ document.getElementById("root")
+);
+```
+
+then `yarn start` ...
+
+
+*NOTE: keycloak-react-theming was renamed keycloakify since this video was recorded*
+[](https://youtu.be/xTz0Rj7i2v8)
# How to implement context persistance
-If you want dark mode preference, language and others users preferences your can do so
-very easily by using [`powerhooks/useGlobalState`](https://github.com/garronej/powerhooks)
+If you want dark mode preference, language and others users preferences
+to persist within the page served by keycloak here are the methods you can
+adopt.
-WARNING: `powerhooks` is still a work in progress.
+## If your keycloak is a subdomain of your app.
+
+E.g: Your app url is `my-app.com` and your keycloak url is `auth.my-app.com`.
+
+In this case there is a very straightforward approach and it is to use [`powerhooks/useGlobalState`](https://github.com/garronej/powerhooks).
+Instead of `{ "persistance": "localStorage" }` use `{ "persistance": "cookie" }`.
+
+## Else
+
+You will have to use URL parameters to passes states when you redirect to
+the login page.
+
+TOTO: Provide a clean way, as abstracted as possible, way to do that.
# REQUIREMENTS
@@ -97,3 +177,4 @@ Part of the lib that runs with node, at build time.
Part of the lib that you import in your react project and runs on the browser.
**TODO**
+