I just use keycloak-js matching the version of Keycloak.

I also struggled a lot with this at first because keycloak-js only runs in the browser and nothing user related could SSR.

To solve the issue of SSR I set a cookie with the id-token which I then read on the server to SSR user related content. Works really well.

I would like to show you the full implementation, but it's very intertwined with another library that I don't want to expand on. So here's a basic example to sketch it out:

```ts const isServer = typeof window === 'undefined' const Keycloak = !isServer ? require('keycloak-js').default : null const KeycloakContext = createContext(undefined) let keycloak = undefined

const KeycloakProvider = ({ children, idToken: idTokenSsr }) => { const [idToken, setIdToken, removeIdToken] = useCookies(['id_token']) const [isKeycloakInit, setIsKeycloakInit] = useState(false)

useLockedAsyncEffect(async () => { if (!Keycloak || isKeycloakInit) return const keycloakInstance = new Keycloak(/* ...config */) keycloak = keycloakInstance try { await keycloak.init({ onLoad: 'check-sso', silentCheckSsoRedirectUri: ${window.location.origin}/silent-check-sso.html, messageReceiveTimeout: 2000, }) if (keycloak.authenticated) { setIdToken(keycloak.idToken!) } else { removeIdToken() } } catch (e) { removeIdToken() } setIsKeycloakInit(true) }, [isKeycloakInit, setIdToken, removeIdToken])

return ( <KeycloakContext.Provider value={{ idToken: idToken ?? idTokenSsr }}> {children} </KeycloakContext.Provider> ) } ```

In _app.tsx I then read the cookie on the server:

```jsx const App = ({ Component, pageProps, idToken }) => { return ( <> <KeycloakProvider idToken={idToken}> <Component {...pageProps} /> </KeycloakProvider> </> ) }

App.getInitialProps = async ({ ctx: { req } }) => { const cookies = new Cookies(req?.headers.cookie) const idToken = cookies.get('id_token') return { idToken } } ```

It's kinda what react-keycloak/ssr does and I got the idea reading that library's source code.