Next.js does not render authentication state properly after keycloak login

Describe the bug I have a basic next.js application that does two things:

1. provide an authentication mechanism using keycloak
2. talk to a backend server that authorizes each request using the keycloak-access-token

I use the @react-keycloak/ssr library to achieve this. The problem now is that after I login and get redirected back to my application the cookie that contains the kcToken is empty. After I refresh my page it works like expected.

I understand that maybe my entire process flow is wrong. If so, what is the “usual” way to achieve what is mentioned above?

To Reproduce

Add this stub code to a fresh next.js app:

export async function getServerSideProps(context) {
    const base64KcToken = context.req.cookies.kcToken // the cookie that keycloak places after login
    const kcToken = base64KcToken ? Buffer.from(base64KcToken, "base64") : ""

    // the backend server passes the token along to keycloak for role-based authorization
    const res = await fetch(`${BACKEND_URL}/info`, {
            headers: {
                "Authorization": "Bearer " + kcToken 
            }
        })

    const data = await res.json()

    // ... exception handling is left out for readability ...

    return {
        props: {
            data
        }
    }
}

export default function Home({data}) {
    const router = useRouter() // the next.js client side router to redirect to keycloak
    const { keycloak, initialized } = useKeycloak() // keycloak instance configured in _app.js
    if (keycloak && !keycloak.authenticated && keycloak.createLoginUrl) router.push(keycloak.createLoginUrl())
    return (
        <div> ... some jsx that displays data ... </div>
   )
}

This process basically works but it feels really bad because a user that gets redirected after login is not able to see the fetched data unless he refreshes the entire page. This is because when getServerSideProps() is called right after redirect the base64KcToken is not there yet.

Also everything related to the login-status (eg. logout button) only gets displayed after ~1sec, when the cookie is loaded by the react-keycloak library.

Expected behavior data is displayed in the div after being redirected by keycloak.

Desktop (please complete the following information):

• OS: Windows
• Browser Chrome
• Version latest

Note: If this is not the right place to ask a question like this I also created a stackoverflow question for this: https://stackoverflow.com/questions/66764930/next-js-does-not-render-authentication-state-properly-after-keycloak-login

[aakay]

Is there any progress or workaround on this? I’m struggling with this problem, too.

[filippomc]

The need for refreshing the page can be avoided with the silent check, like this:

<SSRKeycloakProvider
       keycloakConfig={keycloakCfg}
       persistor={SSRCookies(cookies)}
            initOptions={{ silentCheckSsoRedirectUri: 'http://' + location + '/silent-check-sso.html' }}
       >
 ...

</SSRKeycloakProvider>

while I didn’t found a way to avoid the transitory unlogged status. I’d like to know whether to fix that transitory is in the plans. I think this a real blocker for any serious use of the library. I think a sustainable workaround would be to have a way to understand that the token parsing is someway “pending” in order to postpone the rendering of the page or show a kind of waiting spinner.