redirect_uri in app

[d-sooter]

Hi Guys first of all great tool

I am trying to get the full url or at least the redirect_uri in the login page ( in react) is there any way to do that? i tried different things but wasnt able to find it.

thank in advance

[garronej]

Hello @d-sooter,

Hi Guys first of all great tool
Thanks!

I am trying to get the full url or at least the redirect_uri in the login page ( in react) is there any way to do that? i tried different things but wasnt able to find it.

I assume that what you are trying to acheive is to get the refferer_uri so that when users click on the header they get redirected to the app that redirected the user to Keycloak.

Unfortunately Keycloak does define a way do do that. But I can show you how we do it:
https://github.com/InseeFrLab/onyxia/blob/0de661846a206f8fa02971b23cedefb7123530ca/web/src/keycloak-theme/login/tools/getReferrerUrl.ts#L1-L41

It's a bit hacky, we remove the /callback at the end of the path if it exist.

Without using any third party lib it should look something like:

function getRefererUrlFromUrl() {
    const queryParams = new URLSearchParams(window.location.search);
    const redirectUri = queryParams.get('redirect_uri');

    if (redirectUri === null) {
        return undefined;
    }

    const redirectUrl = new URL(redirectUri);

    return redirectUrl.origin;
}

const localStorageKey = 'theme-onyxia_refererUrl';

export function getReferrerUrl() {
    const refererUrl = getRefererUrlFromUrl();

    if (refererUrl === undefined) {
        return localStorage.getItem(localStorageKey) ?? undefined;
    }

    localStorage.setItem(localStorageKey, refererUrl);
    
    return refererUrl;
}

Be aware that the redirect_uri is only present in the login page. If we need to access it in the other pages (like the register page for example) we need to have stored it in the local storage.

Hope it helps

[d-sooter]

Thanks a lot i will try that out. My use case is actually a lot simpler. We have a multi-tenant thing going on but all happening in one realm. We have a custom theme, but allow custom background images or logos to be set per tenant.

then i use the subdomain in the redirect url to detect which tenant the request is coming from and load the proper logo an picture.

Or is there another way to pass a custom query param or header to the request and pick it up in keycloakify? We are only interested in the login page.

[garronej]

Ok I see,

For that usecase in perticualr we have the theme variant feature that you might want to consider.

https://docs.keycloakify.dev/build-options#extrathemenames

You can select the theme at the Keycloak client configuration level in Keycloak.

To load different global css file based on the theme name you can implement this strategy:

// src/keycloak-theme/login/useGlobalStylesheet.ts

export function useGlobalStylesheet(themeName: string){
    useState(() => {
        switch(themeName){
            case "keycloakify-starter":
                // @ts-expect-error
                import("./keycloakify-starter.css");
                break;
            case "keycloakify-starter-variant-1":
                // @ts-expect-error
                import("./keycloakify-starter-variant-1.css");
                break;
        }
    });
}

// src/keycloak-theme/login/KcApp.tsx

import { useGlobalStylesheet } from "./useGlobalStylesheet";
// ...

export default function KcApp(props: { kcContext: KcContext; }) {
  const { kcContext }= props;
  // ...
  
  useGlogalStylesheet(kcContext.themeName);

  // ...