Keycloakify/ Security/ by Nima Shokouhfar

1. Styles

1.1. bad

1.2. good

1.3. not as good

1.4. not as bad

1.5. important

1.6. warning

2. main

2.1. Why Keycloakify?

2.1.1. Why not doing it manually?

2.1.1.1. Not easy

2.1.1.1.1. Freemaker

2.1.1.1.2. CSS styling

2.1.1.1.3. Example

2.1.2. Out of the shelf support for react

2.1.2.1. furthermore you can combine this with these libraries to build a better UI faster

2.1.2.1.1. Tailwind css/shadcn

2.1.2.1.2. MUI

2.1.2.1.3. bootstrap

2.1.3. Testing and building is very easy with keyloakify

2.1.3.1. npx keycloakify start-keycloak

2.1.3.1.1. However, this takes an eternity to build this is why for developpment we can use storybooks

2.1.3.2. npm run storybook

2.1.3.3. important

2.1.4. It is open source

2.1.4.1. Many contributors

2.1.4.1.1. contributors

2.1.4.1.2. common updates

2.1.5. Simple project with code generation tools

2.1.5.1. npx keycloakify eject-page

2.1.5.2. npx keycloakify add-story

2.1.6. Well documented

2.1.7. Storybook test coverage

2.1.7.1. It is not easy to modify legacy code

2.1.7.2. links

2.1.7.2.1. original

2.1.7.2.2. keycloakify-tailwind-shadcn

2.2. 1

2.3. MUI

2.3.1. remove background

2.3.2. switch case

2.3.2.1. to switch from original component to the modified one

2.4. with story book

2.4.1. issue

2.4.1.1. npm i --legacy-peer-deps=true

2.4.1.1.1. is not working

2.4.1.1.2. you should try npm i --force instead

2.4.2. before running the storybook

2.4.2.1. npx keycloakify add-story

2.5. commands

2.5.1. npx keycloakify eject-page

2.5.2. npx keycloakify start-keycloak

2.5.2.1. starts docker

2.5.2.1.1. https://my-theme.keycloakify.dev/

2.5.2.1.2. http://localhost:8080

2.5.3. npx keycloakify add-story

2.5.4. npm run storybook

2.5.5. npm run dev

2.5.5.1. make sure to uncomment this

2.5.5.1.1. final index.tsx

2.6. helpers

2.6.1. msg

2.6.1.1. types

2.6.1.1.1. msgStr

2.6.1.1.2. msg

2.6.1.2. mock msg or msgStr

2.6.1.2.1. the code to be tested

2.6.1.2.2. the mock

2.7. what can't you change?

2.7.1. name

2.7.2. the action

2.7.3. the method

2.7.4. type submit

2.8. shadcn installation extra step

2.8.1. @/lib/ui issue

2.8.1.1. just change all the references to ./../../lib/utils

2.9. to build you need to install maven mvn

2.9.1. vid

2.9.1.1. adding to environment varibales for this is tricky though

2.9.2. run as administrator if mvn didn't work

2.9.2.1. debugging

2.9.2.1.1. mvn -v

2.10. for testing it with docker

2.10.1. don't forget the switch case if you want to customize your own pages

2.11. I18n

2.11.1. is the list of ids for elements

2.12. Single page application

2.12.1. the language is broken in the admin console in the default version. So, don't freak out

2.13. storybook

2.13.1. Publishing it

2.13.1.1. you need to manipulate git ignore file

2.13.1.1.1. some of the necessary styles are in the ignore list

2.14. Selling points

2.14.1. Modern UI Integration

2.14.1.1. "By integrating Tailwind CSS and ShadCN UI, I am upgrading the Keycloakify ecosystem to meet the needs of modern front-end development."

2.14.2. easy theming

2.14.3. dark mode

2.14.4. Storybook for Isolated Component Customization

2.14.4.1. "Every component in this project is storybook-ready, allowing you to develop and customize components in isolation."

2.14.5. Responsiveness Initiated

2.14.5.1. "Storybook helps in visually testing and experimenting with different styles and themes."

2.14.6. Open Source and Collaboration-Friendly

2.15. pages

2.15.1. pages

2.15.1.1. register

2.15.1.1.1. UserProfileFormFields

2.15.1.1.2. LoginConfigTotp

2.15.1.2. WebauthnAuthenticate

2.15.1.2.1. tree

2.15.2. issue

2.15.2.1. check box issue

2.15.2.1.1. patternfly is messing it up

2.15.2.1.2. solution

2.16. Contribution

2.16.1. you should use the earlier version of node 14

2.16.1.1. they use node 14

2.16.2. use yarn instead

2.16.3. I couldn't run it under windows.

2.16.3.1. I finally did it under WSL of linux

2.16.3.2. issue

2.16.3.2.1. Webpack was not able to build directory properly for me