How to connect keycloak with keycloakify ?

[Ramnirmal0]

Hi @garronej ,

Thanks for contributing keycloakify .

I am new to keycloak and keycloakify so when i gone through the documentation of keycloakify i am confused about how to connect keycloak with keyclokify ? where do i have to mention the keycloak config details ( realm , clientid , resource_name , url... or keycloak.json file).
where do i have to add this code?

could you please guide me.

[garronej]

Hi @Ramnirmal0,

where do i have to mention the keycloak config details ( realm , clientid , resource_name , url... or keycloak.json file)

You don't have to. Keycloakify generates a .jar file that you provide to Keycloak. This .jar file contains your therme. Once you have imported it in Keycloak you just need to select it in the administration panel.

There is a video and a minimal setup you can use.

Follow the steps and you will see, information about how to proceed printed in the console.

[Ramnirmal0]

thank you @garronej . one more thing i like to know how to change css of login page. where should i make changes / specify the css ?

[Ramnirmal0]

@garronej
i like to change body background color and provide some border radius to login form . [ assume dark theme ] . where should I make changes in demo boilerplate ?

[garronej]

You have to provides classnames as props to the <KcApp> component.

Theses are the classes that are applied by default.

Here for example we set the header in red by doing this:

In the example I use tss-react but you could as well have a .css file like:

index.css

.foo {
    color: red;
}

index.tsx

import "./index.css";
import { App } from "./<wherever>/App";
import { KcApp, defaultKcProps, getKcContext } from "keycloakify";
import { css } from "tss-react/@emotion/css";

const { kcContext } = getKcContext();

const myClassName = css({ "color": "red" });

reactDom.render(
    <KcApp
        kcContext={kcContext}
        {...{
            ...defaultKcProps,
            "kcHeaderWrapperClass": "foo",
        }}
    />,
    document.getElementById("root"),
);

I advise you to use tss-react though. It's much more easy to maintain.

Here and here you have an example of how we changed the background to obtain:

Customization using only CSS:

If my answer helped you, you can follow me on GitHub, I do appreciate it :)

[meimosor]

How to connect to the Docker version of Keycloak. Can you help？ @garronej

[garronej]

There's now a video tutorial about it https://www.youtube.com/watch?v=x3ux2JM1Bxk&embeds_referring_euri=https%3A%2F%2Fcdn.iframe.ly%2F&source_ve_path=MjM4NTE&feature=emb_title