HELP - Call Login page only when button clicked - KeycloakJs and Vue3

[Eloise Ferreira]

Hello, I'm using the keycloak js adapter with my vue3 application. And I need to call the login page only when the user clicks the Login Button,  not when the app is mounted. I have already tried some solutions but none worked.

Here's the code I'm using to call the login

[Björn Pedersen]

I would guess  the onload: login-required triggers this, as it tells the keycloak adapater to force a login page load.

[Jon Koops]

Correct, the 'login-required' option will force a user to sign in if they are not already.

--
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/43d856ee-b9cb-44b2-9e89-2c7c3339bbf9n%40googlegroups.com.

[Eloise Ferreira]

So, I need to have a public landing page, so the user can't be forced to login at the application start, it has to be triggered by a click > go to keycloak login page if its not logged > Redirect to application once the credentials are given. I already tried changing onLoad to check-sso, but I dont think it worked. Any ideias?

[Jon Koops]

The 'check-sso' option should work if you don't want to require your users to sign in. I'd recommend reading the documentation.

To view this discussion on the web visit https://groups.google.com/d/msgid/keycloak-user/f2c19166-b1c5-4531-90dd-79bb012e0c81n%40googlegroups.com.

[Eloise Ferreira]

I tried to use check-sso, but the url give me this error: #error=login_required&state=c7d6d227-5b23-4b21-962a-8e6291545f55

I tried to set the checkLoginIframe to true and false, but none worked. I'm trying to redirect to a "login" page (calling a backend route to check the user type) so it can redirect again to another page based on the role. But Keycloak js dont even generate a token.

Does anyone know where I can find some material from someone with the same problem, trying to have a public landing page in the website

[Jon Koops]

Did you try to use the silentCheckSsoRedirectUri option in combination with 'check-sso'? It should prevent a redirect by checking the status of the session in an iframe in the background.

To view this discussion on the web visit https://groups.google.com/d/msgid/keycloak-user/eaa91cb9-8471-4a6f-931f-bd0a078223ddn%40googlegroups.com.

[Anubhav Kumawat]

Hi
[Testing] Did you receive my previous messages? I don't see them in the conversation mailchain.

To view this discussion on the web visit https://groups.google.com/d/msgid/keycloak-user/CAEdmLYG%3DTWwsAt8ZFEQJbBEbMPhfmpvD6aEhqiVWkhdyd4JC%2Bw%40mail.gmail.com.

[Anubhav Kumawat]

I guess not(quite strange, tried sending them from the google mail group but it's now showing; sent from gmail and it worked).

Regardless, the solution which I mentioned in previous reply was that you can create your own Login URL
`${YOUR_KEYCLOAK.DOMAIN}/auth/realms/${YOUR_KEYCLOAK.APP_REALM}/protocol/openid-connect/auth?client_id=${YOUR_KEYCLOAK.APP_CLIENT_ID}&redirect_uri=${KEYCLOAK.REDIRECT_SIGN_IN }%2Fresponse_type=${YOUR_KEYCLOAK.RESPONSE_TYPE(You can use response type as `code` here)}&scope=openid%20profile%20openid%20offline_access&response_mode=query`;

You can redirect the user to the above url when they click on the Login button from your public landing page. So instead of your keycloak-js library doing this you can call this url by yourself. Post Login(once users enter their credentials and are redirected back to your app), you can use the react-keycloak/web library to do the further steps (like getting access token etc.)

This will help you to skip the direct Login which the keycloak-js forces you to do and help you give more control of the flow.
Do give it a try and it should work.