JS adapter in SPA: authenticate in background without redirect (silent login-required)

Securing applications
, ,
1

Hello everyone,

I have an SPA using the Javascript adapter. Keycloak is configured to authenticate through a default IDP, so users are immediately redirected to the IDP without seeing the Keycloak forms. However 90% of the users are already logged in with this IDP, so it’s a redirect process that takes up to 4 seconds, without any user interaction. When the user is redirected back after authentication, the SPA is loaded a second time.

I was wondering if there is any possibility to let this authentication flow happen in the background (possibly in an iframe), so the SPA doesn’t need to be loaded twice. I am aware of the check-sso option in the onLoad parameter of the adapter’s init method, but that doesn’t enforce authentication. Using login-required does, but requires the complete redirect flow as mentioned earlier.

You can configure a silent check-sso option. With this feature enabled, your browser won’t do a full redirect to the Keycloak server and back to your application, but this action will be performed in a hidden iframe, so your application resources only need to be loaded and parsed once by the browser when the app is initialized and not again after the redirect back from Keycloak to your app. This is particularly useful in case of SPAs (Single Page Applications).

login-required will authenticate the client if the user is logged-in to Keycloak or display the login page if not. check-sso will only authenticate the client if the user is already logged-in, if the user is not logged-in the browser will be redirected back to the application and remain unauthenticated.

So I am looking for something like a silent login-required option. If it turns out the user isn’t authenticated in the IDP yet (the other 10% of the cases), it’s ok to redirect towards the IDP and reload the SPA afterwards.

2

@jens1
did you find a solution to your issue? I’m working to solve a similar issue using silent check-sso, but I’m not getting the token to appear on my keycloak-client - after authenticating they just sit around in a hidden iframe (not using the check-silent-sso page i’ve defined).

Greatful if you have any insight

3

@M3rtzi no I didn’t find a solution. I am still doing the full redirect flow that requires a second load of the SPA…

4

Hi,

I use angular-auth-oidc-client - npm
it support silent renew. I use it with refresh token.

bye

5

Hi. Has anyone found a solution to this? I am using the npm package “keycloak-js” in my react application, and my configuration looks like this:

	const initOptions: KeycloakInitOptions = {
		onLoad: "check-sso",
		silentCheckSsoRedirectUri: window.location.origin + "/silent-check-sso.html",
	}

With this, I get the same problem that the author of this thread mentions: if the user is not logged in, the page does not redirect to the login page.

6

We solved this by differing load of our SPA until some stripped down html pages / js scripts, which handle the actual authentication flows within an iframe, can authenticate a global instance of keycloak.

To give a paired down summary of what we did, we have index.html that pulls in the basic keycloak-js adapter, loads an iframe pointing to a different html page which loads a second instance of keycloak and goes through the redirect flow to keycloak to either authenticate the user or prompt them for a credential challenge. When this iframe instance of keycloak becomes authenticated, it sends a post message to the parent window, which in turns triggers a refresh of the parent keycloak instance. Since the cookies are shared between the iframe and the parent, the refreshed parent keycloak instance can authenticate via the silent sso check (a third html page handles this silent check).

Once the parent keycloak instance is authenticated, we remove the iframe, and load our bundled spa app.

1 Like