The automatic base64 encoding makes token cookie too large to save

Describe the bug Our Keycloak installation returns a token with length approximately around 3800 characters long. Technically that should be short enough to be stored as a cookie but it fails because when saving the SSRCookies persistor base64 encodes the token which makes it around 5000 characters length.

To Reproduce Steps to reproduce the behavior:

1. Use <SSRKeycloakProvider /> with the SSRCookies persistor.
2. Perform login and receive tokens token + idToken.
3. If the token length is for instance 3800 characters long it will get base64 encoded into a 5000 character long string before being stored as a cookie. And Firefox will complain that the 5000 character kcToken cookie is too long to store.

Expected behavior

I expected the token cookie to be successfully set.

Desktop (please complete the following information):

• OS: macOS 11.2.3
• Browser Firefox
• Version 87

Additional context:

There might off course be good reasons as to why it is necessary to encode / decode these token strings. If that is the case, feel free to close this issue.

Many thanks for creating this solid library. 😄

[nilsnh]

@aakay . We ended up building our own persistor that we pass into React Keycloak:

import { TokenPersistor } from "@react-keycloak/ssr/lib/persistors/types"

type Tokens = { idToken: string; token: string }

/**
 * We replace the default "token persistor" defined by @react-keycloak/ssr
 * with our own because the default used Cookie storage, and our
 * tokens were too large for that. This uses sessionStorage instead.
 */
export const SessionPersistor = (cookies: any): TokenPersistor => ({
  setTokens: ({ idToken, token }: Tokens) => {
    !!token && setToken("kcToken", token)
    !!idToken && setToken("kcIdToken", idToken)
  },
  getTokens: () => {
    const tknStr = getToken("kcToken", cookies)
    const idTknStr = getToken("kcIdToken", cookies)
    return {
      idToken: idTknStr || "",
      refreshToken: "",
      token: tknStr || "",
    }
  },
  resetTokens: () => {
    removeToken("kcToken")
    removeToken("kcIdToken")
  },
})

function setToken(name: string, val: string) {
  return sessionStorage.setItem(name, val)
}

function getToken(name: string, cookies = {}) {
  return typeof window === "undefined"
    ? cookies[name]
    : sessionStorage.getItem(name)
}

function removeToken(name: string) {
  sessionStorage.removeItem(name)
}

And then we use it like so:

<SSRKeycloakProvider 
      keycloakConfig={config}
      initOptions={keycloakInitOptions}
      persistor={SessionPersistor(cookies)} />

Hope this helps! ✌️

[aakay]

@nilsnh hi nils, sorry, i’ve somehow missed your response. thanks for the help. this looks like a good solution. thank you.