set checkLoginIframe=false and then get error=login_required

I’m using @react-keycloak/ssr 3.3.0, keycloak-js 12.0.4 and nextjs 10.1.3. I have to set checkLoginIframe=false in order to initialize keycloak by access token and refresh token. However, if a user is not logged in (both refresh token and access token are empty), the page will be reloaded. Then, I get this link http://localhost:3000/#error=login_required&state=9d3ee440-4001-464d-8926-ec1985dd1359. But if I try initializing KeycloakInstance of keycloak-js by the same configuration, everything is fine. My codes

 const keycloakConfig = {
        clientId: process.env.NEXT_PUBLIC_KEYCLOAK_CLIENT_ID,
        realm: process.env.NEXT_PUBLIC_KEYCLOAK_REALM,
        url: process.env.NEXT_PUBLIC_KEYCLOAK_URL
    };
    return (
        <SSRKeycloakProvider
            keycloakConfig={keycloakConfig}
            autoRefreshToken={true}
            initOptions={{
                // onLoad: "check-sso",
                // promiseType: "native",
                token: credentials.accessToken,
                refreshToken: credentials.refreshToken,
                checkLoginIframe: false,
                enableLogging: process.env.NEXT_PUBLIC_KEYCLOAK_ENABLE_LOGGING === "true"
            }}
            LoadingComponent={<BackdropLoading open={true} />}
            persistor={SSRCookies(cookies)}>
           {/* other components */}
        </SSRKeycloakProvider>
    );

[edivanteixeira]

This error is because the version of Keycloak-js is different from your server.

[fangwohung]

@fangwohung Could you please share your setup with next-auth-keycloak? I tried to implement it, but has a lot of uncertainty and couldn’t figured out the right init (and how to pass initOptions) Here with react-keycloak/ssr I am getting a token, but then same issue - next keep reloading an app and I could not understand why

If you’re using next-auth, you dont have to use keycloak-js client because your keycloak tokens (access token and refresh token) will be stored within next-auth session and then you can get session data by calling useSession (next-auth hook). I think you can try next-auth with google provider in order to understand how next-auth works, you also have to implement Refresh Token Rotation on your own. You must remember that the next-auth token is different from keycloak tokens which are stored within session

Unfortunately, I bound to keycloak because of the SSO and backend team preferences

Before using next auth, I had this issue and then used pure keycloak js for nextjs, I handled everything on client side, but the drawback of keycloakjs is that I cannot get the access token on server side and cannot take advantage of SSR. I havent implemented SSO for next auth yet, so you have to implement SSO feature by yourself if you really want to use next auth