# Custom web server for UI pages

**URL:** <https://forum.keycloak.org/t/custom-web-server-for-ui-pages/2499>\
**Category:** Getting advice\
**Tags:** authentication\
**Created:** [May 4, 2020, 12:42am UTC](https://forum.keycloak.org/t/custom-web-server-for-ui-pages/2499 "2020-05-04T00:42:33Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![vinod](https://yyz2.discourse-cdn.com/free1/user_avatar/forum.keycloak.org/vinod/32/962_2.png) [@vinod](https://forum.keycloak.org/u/vinod)\
**Post date:** [May 27, 2020, 8:52pm UTC](https://forum.keycloak.org/t/custom-web-server-for-ui-pages/2499/21 "2020-05-27T20:52:59Z")

</div>

In federated identity management, the relying party application is transferring the user registration and authentication capabilities to the identity provider, this will help to reduce the attack surface. The user registration and authentication will be handled by the identity provider. Similar to the Gmail use case, when someone wants to log in to Gmail, they will be redirected to [accounts.google.com](http://accounts.google.com) for their identity management.

The main benefit of using Keycloak or different federated identity provider via OIDC is to reduce the complexity of user registration and authentication in the relying party applications. I would highly recommend watching the following videos.

[![](https://global.discourse-cdn.com/free1/uploads/keycloak/original/1X/a6d8e67bdf72e9351739f6c39a5f95dc51aa5390.jpeg "Keycloak Pitch") ](https://www.youtube.com/watch?v=GZTN_VXjoQw)

[![](https://global.discourse-cdn.com/free1/uploads/keycloak/original/1X/dd77cd2cebb091b2b1b7d0188e4f11a74dd72ac9.jpeg "Keycloak Intro") ](https://www.youtube.com/watch?v=duawSV69LDI)

---

<div class="post-metadata">

**Author:** ![yordis](https://yyz2.discourse-cdn.com/free1/user_avatar/forum.keycloak.org/yordis/32/751_2.png) [@yordis](https://forum.keycloak.org/u/yordis)\
**Post date:** [May 28, 2020, 5:42am UTC](https://forum.keycloak.org/t/custom-web-server-for-ui-pages/2499/22 "2020-05-28T05:42:58Z")

</div>

> [@vinod](#):
>
> In federated identity management, the relying party application is transferring the user registration and authentication capabilities to the identity provider,

I understand. That will happen since we are using [accounts.x.com](http://accounts.x.com) as Google for that, what I asked for is to have control over the webserver to serve the registration and login page and use keycloak server (for those two pages) as an API.

> [@vinod](#):
>
> is to reduce the complexity of user registration and authentication in the relying party applications.

Well, this is literally what I dont need at the moment since we want more control over it, we are totally fine with the complexity.

> [@vinod](#):
>
> I would highly recommend watching the following videos.

I watched those videos before posting it, amazing for understanding Keycloak capabilities, but doesn’t answer what I am looking for, thank you regardless, those are nice videos.

I am not sure if I made it clear that having full control over the account profile, login and registration (probably consent screen as well) experiences is what we are asking for.

I do not understand why you keep suggesting to “just use keycloak” for those cases when that is literally the problem for us right now.

Statements around “it is more secure” is a fallacy, any software is insecure when you dont take the required measurement.

Is Okta less secure than Keycloak because allow us to use the following capability: [Users | Okta Developer](https://developer.okta.com/docs/reference/api/users/#create-user-with-password)

Again, we own the Identity Provider server (keycloak) so what’s the problem.

I may be missing something because I don’t understand where are you coming from.

---

<div class="post-metadata">

**Author:** ![zonaut](https://yyz2.discourse-cdn.com/free1/user_avatar/forum.keycloak.org/zonaut/32/666_2.png) [@zonaut](https://forum.keycloak.org/u/zonaut)\
**Post date:** [May 28, 2020, 5:54am UTC](https://forum.keycloak.org/t/custom-web-server-for-ui-pages/2499/23 "2020-05-28T05:54:12Z")

</div>

> [@yordis](#):
>
> Is Okta less secure than Keycloak because allow us to use the following capability: [Users | Okta Developer](https://developer.okta.com/docs/reference/api/users/#create-user-with-password)

You can do the same with Keycloak through the Admin Rest API → [https://www.keycloak.org/docs-api/10.0/rest-api/#\_createuser](https://www.keycloak.org/docs-api/10.0/rest-api/#_createuser)

---

<div class="post-metadata">

**Author:** ![vinod](https://yyz2.discourse-cdn.com/free1/user_avatar/forum.keycloak.org/vinod/32/962_2.png) [@vinod](https://forum.keycloak.org/u/vinod)\
**Post date:** [May 28, 2020, 7:52am UTC](https://forum.keycloak.org/t/custom-web-server-for-ui-pages/2499/24 "2020-05-28T07:52:00Z")

</div>

> [@yordis](#):
>
> Statements around “it is more secure” is a fallacy, any software is insecure when you dont take the required measurement.

Resource owner password credentials grant type insecurely exposes the credentials of the resource owner to the client. Even if the client is benign, this results in an increased attack surface (credentials can leak in more places than just the AS) and users are trained to enter their credentials in places other than the AS.

Furthermore, adapting the resource owner password credentials grant to strong authentication, (e.g: WebAuthn, otp, etc. ), and authentication processes that require multiple steps can be hard or impossible.

Resource owner password credentials grant trains people to get phished.

---

<div class="post-metadata">

**Author:** ![yordis](https://yyz2.discourse-cdn.com/free1/user_avatar/forum.keycloak.org/yordis/32/751_2.png) [@yordis](https://forum.keycloak.org/u/yordis)\
**Post date:** [May 28, 2020, 9:05am UTC](https://forum.keycloak.org/t/custom-web-server-for-ui-pages/2499/25 "2020-05-28T09:05:54Z")

</div>

> [@vinod](#):
>
> Resource owner password credentials grant type

I am not using the Resource owner password, especially after being discouraged. As of today, we would like to use a magic link, oauth2, and SAML so no username/password for us so far.

> [@yordis](#):
>
> I am not sure if I made it clear that having full control over the account profile, login and registration (probably consent screen as well) experiences is what we are asking for.

> [@yordis](#):
>
> Here is an example from other tookit: [GitHub - ory/hydra-login-consent-node: This is an ExpressJS reference implementation for the ORY Hydra User Login and Consent interface written in TypeScript and ExpressJS.](https://github.com/ory/hydra-login-consent-node)

> [@yordis](#):
>
> I am not sure about “comparing” but using Hydra as an example of what I am talking about since Hydra allows you to have more granular control (included user consent) since as I mentioned before, we would like to take advantage of our design system and react + next stack.

> [@yordis](#):
>
> My intention is to bypass that theme and keycloak completely, only leverage the APIs to gather the required information in order to recreate those pages.

> [@yordis](#):
>
> (probably magic link, some oauth2, and SAML)

Anyway, thank you very much for the help, apologies if the conversation is frustrating for you.

We will deal with Keycloak way to do things and adjust our strategy around it. Thank you very much.

---

<div class="post-metadata">

**Author:** ![vinod](https://yyz2.discourse-cdn.com/free1/user_avatar/forum.keycloak.org/vinod/32/962_2.png) [@vinod](https://forum.keycloak.org/u/vinod)\
**Post date:** [May 28, 2020, 9:31am UTC](https://forum.keycloak.org/t/custom-web-server-for-ui-pages/2499/26 "2020-05-28T09:31:10Z")

</div>

@yordis , no worries. The point I am trying to make is that it’s more secure if the Identity Provider will handle the user authentication and registration process. It’s not about Keycloak’s way, it’s how the OIDC, SAML, etc are recommended to use. I hope the following links will help.

[https://www.keycloak.org/docs/latest/server\_development/#\_themes](https://www.keycloak.org/docs/latest/server_development/#_themes)

> **[GitHub - UKHomeOffice/keycloak-theme-govuk: A Keycloak theme using GOV.UK...](https://github.com/UKHomeOffice/keycloak-theme-govuk)**
>
> A Keycloak theme using GOV.UK Template and Elements - GitHub - UKHomeOffice/keycloak-theme-govuk: A Keycloak theme using GOV.UK Template and Elements

> **[GitHub - Alfresco/alfresco-keycloak-theme: Theme related assets for use in...](https://github.com/Alfresco/alfresco-keycloak-theme)**
>
> Theme related assets for use in the Identity Service - GitHub - Alfresco/alfresco-keycloak-theme: Theme related assets for use in the Identity Service

[https://robferguson.org/blog/2020/04/12/keycloak-themes-part-1/](https://robferguson.org/blog/2020/04/12/keycloak-themes-part-1/)

> **[Keycloak Themes](https://keycloakthemes.com/)**
>
> Premium, high quality and ready to use themes for Keycloak. Improve the look and feel of your identity management solution.

---

<div class="post-metadata">

**Author:** ![yordis](https://yyz2.discourse-cdn.com/free1/user_avatar/forum.keycloak.org/yordis/32/751_2.png) [@yordis](https://forum.keycloak.org/u/yordis)\
**Post date:** [May 28, 2020, 10:36am UTC](https://forum.keycloak.org/t/custom-web-server-for-ui-pages/2499/27 "2020-05-28T10:36:05Z")

</div>

> [@vinod](#):
>
> no worries.

I just want to make sure I am not burning you out, I prefer to figure it out by myself eventually.

---

<div class="post-metadata">

**Author:** ![yordis](https://yyz2.discourse-cdn.com/free1/user_avatar/forum.keycloak.org/yordis/32/751_2.png) [@yordis](https://forum.keycloak.org/u/yordis)\
**Post date:** [May 28, 2020, 12:22pm UTC](https://forum.keycloak.org/t/custom-web-server-for-ui-pages/2499/28 "2020-05-28T12:22:21Z")

</div>

Another reference to what I would like to do: [https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-app-integration.html](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-app-integration.html) " Setting Up the Hosted UI with AWS Amplify" section, I can host the UI.

---

<div class="post-metadata">

**Author:** ![vinod](https://yyz2.discourse-cdn.com/free1/user_avatar/forum.keycloak.org/vinod/32/962_2.png) [@vinod](https://forum.keycloak.org/u/vinod)\
**Post date:** [May 28, 2020, 5:38pm UTC](https://forum.keycloak.org/t/custom-web-server-for-ui-pages/2499/29 "2020-05-28T17:38:17Z")

</div>

I am happy to help you if you are interested in a secure solution.  
It’s more than just hosting the UI, it’s about who’s handling the authentication process. I would recommend reading the OpenID Connect specification as it may help to get a better idea on the related information we discussed.

You can find the OpenID Connect Spec here = [https://openid.net/specs/openid-connect-core-1\_0.html](https://openid.net/specs/openid-connect-core-1_0.html)

It might be a bit easy if you will watch this video before reading the spec = [https://www.youtube.com/watch?v=jN0ib1HNzgg](https://www.youtube.com/watch?v=jN0ib1HNzgg)

---

<div class="post-metadata">

**Author:** ![miguel](https://yyz2.discourse-cdn.com/free1/user_avatar/forum.keycloak.org/miguel/32/1207_2.png) [@miguel](https://forum.keycloak.org/u/miguel)\
**Post date:** [August 7, 2020, 2:23am UTC](https://forum.keycloak.org/t/custom-web-server-for-ui-pages/2499/30 "2020-08-07T02:23:35Z")

</div>

@vinod, I think what @yordis is trying to get to here is the following: Keycloak serves some HTML, JS, and CSS for a few pages (e.g., login, password reset, etc.) and communicates with the API to _securely_ handle authentication via OIDC, SAML, etc. Instead of relying on Keycloak’s hosted HTML, JS, and CSS pages, is there a way for one to host their own servers and implement the same functionality that Keycloak implements in those pages? In this case, one could host those pages at `accounts.example.com` and one would have to implement all the complexity to properly handle security at `accounts.example.com`. With this, then one would be able to use `accounts.example.com` to authorize access to `app.example.com`, `api.example.com`, etc. The main difference is that since the `accounts.example.com` pages are being served by a custom server, as opposed to Keycloak, one can rely on modern front-end frameworks like Next.js, as opposed to having to use Keycloak themes.

I think this is a very valid question as I found myself asking the same question. And not just for Keycloak, I wanted something similar for Auth0 but it doesn’t seem they provide it.

So, @vinod, do you know if it’s possible to custom implement an `accounts.example.com` similar to Google’s `accounts.google.com` backed by Keycloak APIs?

Perhaps this means that one would use Keycloak as the identity provider and would have to implement their own OIDC provider if I’m understanding the nomenclature correctly?

---

<div class="post-metadata">

**Author:** ![edewit](https://yyz2.discourse-cdn.com/free1/user_avatar/forum.keycloak.org/edewit/32/287_2.png) [@edewit](https://forum.keycloak.org/u/edewit)\
**Post date:** [August 7, 2020, 8:15am UTC](https://forum.keycloak.org/t/custom-web-server-for-ui-pages/2499/31 "2020-08-07T08:15:54Z")

</div>

The answer is yes you can! The admin-console is a client just like all other applications. So setup a new client and when our user has the rights he can call the admin rest api of keycloak, even if it’s not on the same host.

We are currently starting to build a new admin console based on react and patternfly and it we will use the same technique to build it, we might even keep it as a feature. See the [admin console repo](https://github.com/keycloak/keycloak-admin/)

It’s correct though that you can’t build new themes outside of keycloak as themes have a hierarchical nature and use some bootstrapping by the server.

---

<div class="post-metadata">

**Author:** ![yordis](https://yyz2.discourse-cdn.com/free1/user_avatar/forum.keycloak.org/yordis/32/751_2.png) [@yordis](https://forum.keycloak.org/u/yordis)\
**Post date:** [August 8, 2020, 5:40am UTC](https://forum.keycloak.org/t/custom-web-server-for-ui-pages/2499/32 "2020-08-08T05:40:59Z")

</div>

Thank you very much for the help on this topic, and yes, that is exactly what I am talking about.

> [@edewit](#):
>
> We are currently starting to build a new admin console based on react and patternfly and it we will use the same technique to build it, we might even keep it as a feature. See the [admin console repo](https://github.com/keycloak/keycloak-admin/)

I was actually starting to work on something similar (a distributed UI in a sense [https://youtu.be/\_S1Bl6Pt\_uw](https://youtu.be/_S1Bl6Pt_uw)) and interested in creating the Keycloak subsystem on it (just that I am using Material UI but probably we will end up using the same libraries)

Is there any conversation happen somewhere that I could participate in or anticipate some work? I am interested in the topic.

---

<div class="post-metadata">

**Author:** ![edewit](https://yyz2.discourse-cdn.com/free1/user_avatar/forum.keycloak.org/edewit/32/287_2.png) [@edewit](https://forum.keycloak.org/u/edewit)\
**Post date:** [August 8, 2020, 8:18pm UTC](https://forum.keycloak.org/t/custom-web-server-for-ui-pages/2499/33 "2020-08-08T20:18:42Z")

</div>

Of course you can participate

---

<div class="post-metadata">

**Author:** ![yordis](https://yyz2.discourse-cdn.com/free1/user_avatar/forum.keycloak.org/yordis/32/751_2.png) [@yordis](https://forum.keycloak.org/u/yordis)\
**Post date:** [August 13, 2020, 12:39am UTC](https://forum.keycloak.org/t/custom-web-server-for-ui-pages/2499/34 "2020-08-13T00:39:32Z")

</div>

> [@edewit](#):
>
> The answer is yes you can! The admin-console is a client just like all other applications. So setup a new client and when our user has the rights he can call the admin rest api of keycloak, even if it’s not on the same host.

I am a bit confused by your response, admin-console redirects to Keycloak when it is not authenticated. So I am not sure how admin-console could be an example of what we are looking for, there is no authenticated user when you are trying to log in.

Are you suggesting to create a server-to-server client and do a pass-thou or something like that?

---

<div class="post-metadata">

**Author:** ![yordis](https://yyz2.discourse-cdn.com/free1/user_avatar/forum.keycloak.org/yordis/32/751_2.png) [@yordis](https://forum.keycloak.org/u/yordis)\
**Post date:** [August 13, 2020, 12:40am UTC](https://forum.keycloak.org/t/custom-web-server-for-ui-pages/2499/35 "2020-08-13T00:40:42Z")

</div>

Also, if you know of any example of those Keycloak theme pages built with React or any other modern framework would be amazing, I googled it but I didn’t have any success.

---

<div class="post-metadata">

**Author:** ![edewit](https://yyz2.discourse-cdn.com/free1/user_avatar/forum.keycloak.org/edewit/32/287_2.png) [@edewit](https://forum.keycloak.org/u/edewit)\
**Post date:** [August 16, 2020, 2:48pm UTC](https://forum.keycloak.org/t/custom-web-server-for-ui-pages/2499/36 "2020-08-16T14:48:54Z")

</div>

Why would the admin console not be a example of what you are looking for? Yes it redirects to keycloak when you are not authenticated and then it redirects back to your application when you are authenticated. Then when the user has the rights to invoke the admin rest endpoints it all works. Have a look at the admin-console repo and you’ll see what I mean.

---

<div class="post-metadata">

**Author:** ![edewit](https://yyz2.discourse-cdn.com/free1/user_avatar/forum.keycloak.org/edewit/32/287_2.png) [@edewit](https://forum.keycloak.org/u/edewit)\
**Post date:** [August 16, 2020, 2:50pm UTC](https://forum.keycloak.org/t/custom-web-server-for-ui-pages/2499/37 "2020-08-16T14:50:11Z")

</div>

Here is an example of a themed account console: [https://github.com/keycloak/keycloak-quickstarts/pull/202](https://github.com/keycloak/keycloak-quickstarts/pull/202) using react.

---

<div class="post-metadata">

**Author:** ![yordis](https://yyz2.discourse-cdn.com/free1/user_avatar/forum.keycloak.org/yordis/32/751_2.png) [@yordis](https://forum.keycloak.org/u/yordis)\
**Post date:** [August 20, 2020, 4:20pm UTC](https://forum.keycloak.org/t/custom-web-server-for-ui-pages/2499/38 "2020-08-20T16:20:56Z")

</div>

Right but I am confused about something thou, Account page is a protected route, therefore your client would know at some point your authorization.

But login, register in the other hand, your client doesn’t know who the user is. How can I tell what I am authorized to call or not?

It would make sense if I put a proxy server and create a client from there.

Also, that example still inside Keycloak server as a theme, no?

That is OK, but the requests is more about having full control over those pages from a 3rd server.

Does that makes sense?

---

<div class="post-metadata">

**Author:** ![edewit](https://yyz2.discourse-cdn.com/free1/user_avatar/forum.keycloak.org/edewit/32/287_2.png) [@edewit](https://forum.keycloak.org/u/edewit)\
**Post date:** [August 21, 2020, 7:10am UTC](https://forum.keycloak.org/t/custom-web-server-for-ui-pages/2499/39 "2020-08-21T07:10:00Z")

</div>

Right there is the new account console that supports theme-ing and is hosted by keycloak itself. You wanted to see an example of that right?

Now the new admin console is going to be a separate completely standalone application and will use keycloak authentication just like other applications that use keycloak for authorization / authentication, by using the keycloak Javascript adapter, it doesn’t need a proxy server. If you have full control or not depends on the role the logged in user has. The client does know who the user is otherwise keycloak would be quite useless. When you call backend rest endpoint and you don’t have enough rights you get a 401 response.

Have a look at this code: [https://github.com/keycloak/keycloak-admin-ui/blob/master/src/http-service/http-client.ts#L130](https://github.com/keycloak/keycloak-admin-ui/blob/master/src/http-service/http-client.ts#L130) it adds the bearer token to the rest call

And getting the name of the logged in user from the token: [https://github.com/keycloak/keycloak-admin-ui/blob/master/src/auth/keycloak.service.ts#L53-L66](https://github.com/keycloak/keycloak-admin-ui/blob/master/src/auth/keycloak.service.ts#L53-L66)

---

<div class="post-metadata">

**Author:** ![yordis](https://yyz2.discourse-cdn.com/free1/user_avatar/forum.keycloak.org/yordis/32/751_2.png) [@yordis](https://forum.keycloak.org/u/yordis)\
**Post date:** [August 21, 2020, 6:27pm UTC](https://forum.keycloak.org/t/custom-web-server-for-ui-pages/2499/40 "2020-08-21T18:27:35Z")

</div>

> [@edewit](#):
>
> depends on the role the logged in user has

Right, but there is no logged in user when you are trying to login/sign up/reset password and so on. That is what I am trying to say.

> [@edewit](#):
>
> The client does know who the user is otherwise keycloak would be quite useless.

It depends, with a proxy server as Ory does, you use Keycloak as just another API server, and saving configuration and so on that you would normally query using a Keycloak server itself.

But you decouple the web pages out of Keycloak.

[Previous page](https://forum.keycloak.org/t/custom-web-server-for-ui-pages/2499.md?page=1)

[Next page](https://forum.keycloak.org/t/custom-web-server-for-ui-pages/2499.md?page=3)
