service version
---
keycloak:16.0.0

# keycloak docker build
docker-compose document reference from this website:

https://gruchalski.com/posts/2020-09-03-keycloak-with-docker-compose/

initial admin script

sudo docker exec <CONTAINER> /opt/jboss/keycloak/bin/add-user-keycloak.sh -u <USERNAME> -p <PASSWORD>
sudo docker restart <CONTAINER>

or through docker compose to setup admin

environment: 
  KEYCLOAK_USER: <admin_name>
  KEYCLOAK_PASSWORD: <admin_password>

disable keycloak ssl

sudo docker exec -it <psql-container> bash
psql -d <database> -U <user>
update REALM set ssl_required = 'NONE' where id = 'master';

check user created

http://<keycloak>/auth/realms/Meerkat/account/

CORS probolem with Web Origin setting
with no slash

http://<IP-address>:<port>

---
# keycloak with react
reference from this website:

https://blog.logrocket.com/implement-keycloak-authentication-react/

privateRoute with securedPage in createBrowserRoute format

const router = createBrowserRouter([
        {
                path: "/",
                element: <Welcome/>
        },
        {
                path: "/secured",
                element: (
                  <PrivateRoute>
                    <Secured/>
                  </PrivateRoute>
                )
        }
]);

error=login_required solution:
remove <React.StrictMode> tag in src/index.js

https://stackoverflow.com/questions/72457689/keycloak-causes-loops-in-react-application-after-i-have-just-login-on-keycloak-a

---
# change keycloak register form fields in docker container
reference from this website:

https://www.baeldung.com/keycloak-user-registration#custom-attrs

---
if your keycloak built on docker-compose:

volumes:
  - /home/<user>/<path-to>/register.ftl:/opt/jboss/keycloak/themes/keycloak/login/register.ftl

also you can copy the .ftl file to container directly:

sudo docker cp <path-to>/register.ftl <keycloak-containner-name>:/opt/jboss/keycloak/themes/keycloak/login/register.ftl

all attributes you want to add, appending these on register.ftl:
(aware, do not append these between <#if xxxxxRequired></#if>)

<div class="form-group">
    <div class="${properties.kcLabelWrapperClass!}">
        <label for="user.attributes.orgnization" class="${properties.kcLabelClass!}">
          Orgnization</label>
    </div>
    <div class="${properties.kcInputWrapperClass!}">
        <input type="text" class="${properties.kcInputClass!}" 
          id="user.attributes.orgnization" name="user.attributes.orgnization" 
          value="${(register.formData['user.attributes.orgnization']!'')}"/>
    </div>
</div>