How to create a custom login page using javascript adapter

Securing applications
1

Hi! I’m trying to create on my application a login page using javascript adapter and curl php for user authentication on sso. I’m using version 6.0 of keycloak.
I created a client (both with client secret and without), I call sso_server/auth/realms/test/protocol/openid-connect/token with:
grant_type=password
client_id=myclientid
username=pippo
password=passwordpippo
I receive refresh token that I use for to call again sso_server/auth/realms/test/protocol/openid-connect/token with:
grant_type=refresh_token
client_id=myclientid
refresh_token=refreshtokenobtained
but I receive the same above information and not an authorization code though I see in the event listener the user is logged.
The second procedure well works for the logout.
But, when I call the javascript library keycloak.init({onLoad: ‘check-sso’}) the response is “not authenticated”.
How can I use this library for management login page without using keycloak form?
Thanks in advance!

Mic

2

I am not sure I understand you correctly, but if you want to initialize Javascript adapter with already obtained refresh token you can do so by adding refreshToken parameter to the init function. See docs here: https://www.keycloak.org/docs/latest/securing_apps/index.html#init-options

3

Hi!
I just did it but it didn’t work. I think that the problem are the cookies that are not create and I don’t know why

4

Have you removed onLoad option? If no try to remove it.
Have you added also accessToken to init options? If no try to add it as {token: …}

5

Yes, I done both things but doesn’t work

6

What you are trying to achieve is not recommended. What you are trying to do is less secure than using a redirect. You will not be able to support additional authentication mechanisms like social login, webauthn, otp, etc. You will not have support for SSO, in fact users will (unless you save tokens to local storage/cookie which we wouldn’t recommend) have to re-login on each page reload.

7

If you want to create a custom login screen you should do that with a custom theme. That will allow you to customise it as much as you want ranging from custom CSS, custom templates/html all the way up to custom authentication flows with custom authenticators.

1 Like
8

Create your own theme and select it as the login theme for your client in admin console. https://www.keycloak.org/docs/latest/server_development/index.html#creating-a-theme

9

Hi,
any updates on that? Can you please share?
Thanks

10

Hi,
I am having the same issue, i would like to do the login from my site without the redirection… is it possible? Is there an example.of how to login and register with api and withour redirect?
Thanks

11

I’m aware that this is less sure than to use the redirect but I need it. I think that the main problem is to manage cookies and session: I don’t understand how keycloak manages those

12

So I tried to investigate it and it looks like you are right, the issue is that keycloak doesn’t have any cookie and https://github.com/keycloak/keycloak/blob/master/adapters/oidc/js/src/main/resources/login-status-iframe.html#L55 expects it. Out of curiosity, could you please share some reason why you can’t use redirect to keycloak? Maybe there is some other, more secure, solution to this.

13

Hi,
We need our own login\registration page too. We need to modify login\registration page for our clients that are having their own clients(end user). Keycloak provide Themes, but they are not so flexible and easy to manage as a custom page with web Administration panel.

14

I have the same problem

1 Like
15

Hi all
@mhajas What is the solution for flexible custom login page?

Thanks

16

I have the same requirement. In my case it is because the Cypress E2E test tool does not support changing domain during a test.