Use redirect_uri on login page?

[Moritz Schmitz von Huelst]

Hello,

I am new to Keycloak.

In my company we trying to migrate an existing React frontend to Keycloak. In the React app we have a login, registration and forgotten password feature. Keycloak supports all of these but we decided to only use the login feature since we would need to 'rewrite' all pages to make them compatible to the ftl- format.

The login feature was relatively easy to achieve.

However, on the login page now the registration and forgot-password links must direct back to the original app.

The current flow is:

1. User access original page.

2. Keycloak React redirects the user to the Keycloak login page.

3. User logs in an is being redirected to the original page.

Now,  1. and 2. are also applicable for users which want to register or forgot their passwords. Only when they register, the original frontend is called with a different view which will not redirect to Keycloak.

So what I tried is this:

<a href="<#if pageRedirectUri?has_content>${pageRedirectUri}/forgot-password<#else>/forgot-password</#if>">Forgot password?</a>

It seems the if-statement is never true though. I kind of was expecting the content to be set with the query param redirect_uri.

Any way I can achieve this?

[Patrick29 Djomo]

Hey,

I guest the registration and forgotten password features work already unders urls of another server. Therefore just used those urls directly in href attribute of your a tag. 

And if you want to provide those urls to the free template language engine to make then available on your login page, you should implement your own UsernamePasswordForm by following this example: https://github.com/keycloak/keycloak/blob/master/services/src/main/java/org/keycloak/authentication/authenticators/browser/UsernamePasswordForm.java

And from there you will be able to add those urls as attribute in your login.ftl template file.

After don't forget to create a custom login flow in the admin console and set it as your browser flow. That flow should use your own UsernamePasswordForm that you have implemented for login or browser authentication.

I hope this helps.

--
You received this message because you are subscribed to the Google Groups "Keycloak User" group.
To unsubscribe from this group and stop receiving emails from it, send an email to keycloak-use...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/keycloak-user/44b39127-e61d-413e-bbc1-27ae8a3d9764n%40googlegroups.com.

[Moritz Schmitz von Huelst]

I am not entirely sure I understand.

For more context I am using the bitnami/keycloak docker image. During frontend build, I create a new docker image based off the bitnami/keycloak image and add my custom theme. The frontend app uses Next.js to build a bundle of html and js files where I then copy the index.html to the theme login.ftl and replace a few strings pointing to the resources for example.

Dockerfile:

```

FROM node:lts as builder
COPY . /app
WORKDIR / app
RUN node /app/keycloak/replace.js ../out/index.html

FROM docker.io/bitnami/keycloak:12
COPY --from=builder /app/keycloak/theme.properties /opt/bitnami/keycloak/themes/suvi/theme.properties
COPY --from=builder /app/out/index.html /opt/bitnami/keycloak/themes/suvi/login/login.ftl
COPY --from=builder /app/out/_next /opt/bitnami/keycloak/themes/suvi/login/resources/_next
COPY --from=builder /app/out/assets /opt/bitnami/keycloak/themes/suvi/login/resources/assets

```

replace.js:
```

#! /bin/env node

const fs = require('fs');
const path = require('path');

const file = process.argv[2];
const filePath = path.join(__dirname, file);

const _next = new RegExp('/_next', 'gm');
const assets = new RegExp('/assets', 'gm');
const links = [
  '/registration',
  '/forgot-password'
]

let html = fs.readFileSync(filePath, 'utf-8');
html = html.replace(_next, '${url.resourcesPath}/_next').replace(assets, '${url.resourcesPath}/assets');

for (const link of links) {
  const regex = new RegExp(link,'gm');
  html = html.replace(regex, `<#if pageRedirectUri?has_content>\${pageRedirectUri}${link}<#else>${link}</#if>`);
}

fs.writeFileSync(filePath, html, 'utf-8');

```

So now, when accessing the frontend I get redirected to:

```

http://localhost:8080/auth/realms/master/protocol/openid-connect/auth?client_id=security-admin-console&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Fauth%2Fadmin%2Fmaster%2Fconsole%2F%23%2Frealms%2Fmaster%2Ftheme-settings&state=779b6066-63d2-4bd3-9186-dea8b94d1d00&response_mode=fragment&response_type=code&scope=openid&nonce=aafa47c6-d0fd-4731-8f11-a40de1b3495f&code_challenge=8ZP-PQZ-ifobK61_JIII4KC1bj1gUcg-FjeTf0D49oM&code_challenge_method=S256

```

In the request there is the 'redirect_uri' and I was hoping to be able to access it in the login.ftl.

But maybe the only option is though modifying the Java code?