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: ![keycloak_before](https://user-images.githubusercontent.com/6702424/108838381-dbbbcf80-75d3-11eb-8ae8-db41563ef9db.gif) 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. -[![kickstart_video](https://user-images.githubusercontent.com/6702424/108877866-f146ee80-75ff-11eb-8120-003b3c5f6dd8.png)](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* +[![kickstart_video](https://user-images.githubusercontent.com/6702424/108877866-f146ee80-75ff-11eb-8120-003b3c5f6dd8.png)](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** +