Fix logout behavior – redirect to login when session expires

[kausik10]

Hi, I am experiencing a glitch in the contermber's app regarding sessions and redirection. Here's a detail of the issue as mentioned by client

There’s an issue with how the app behaves when a user’s session expires or when they are logged out.

Current behavior:

When the session expires, the user stays on the page they were trying to access (e.g. /clients), and the app just shows a loading spinner.

It appears stuck – the login screen isn’t shown, and the user doesn’t know they’ve been logged out.

Expected behavior:

Whenever the session expires or the user is logged out, the app should automatically redirect to the login page, regardless of the current route.

This ensures users aren’t left in a broken/loading state without feedback.

I am using v2 engine of contember. Exactly: image: contember/engine:2.0.2
In my previous projects with older versions, I never really experienced any issues with sessions. I really can't find how sessions are handled or when session expires. I have provided the current ContemberClient.tsx if it helps.

import { memo, useCallback, useMemo, useState } from 'react'
import { SessionTokenContext, SessionTokenContextValue, SetSessionTokenContext } from './auth'
import { ApiBaseUrlContext, LoginTokenContext } from './config'
import { ProjectSlugContext, StageSlugContext } from './project'

export interface ContemberClientProps {
	apiBaseUrl: string
	sessionToken?: string
	loginToken?: string
	project?: string
	stage?: string
}

const sessionTokenKey = 'contember_session_token'

/**
 * @group Entrypoints
 */
export const ContemberClient = memo<ContemberClientProps & { children: React.ReactNode }>(function ContemberClient({
	apiBaseUrl,
	children,
	loginToken,
	project,
	sessionToken,
	stage,
}) {
	const [localStorageSessionToken, setLocalStorageSessionToken] = useLocalStorageSessionToken()

	const sessionTokenContextValue = useMemo((): SessionTokenContextValue => ({
		propsToken: sessionToken,
		token: localStorageSessionToken ?? sessionToken,
		source: localStorageSessionToken ? 'localstorage' : (sessionToken ? 'props' : undefined),
	}), [localStorageSessionToken, sessionToken])

	return (
		<ApiBaseUrlContext.Provider value={apiBaseUrl}>
			<LoginTokenContext.Provider value={loginToken}>
				<SetSessionTokenContext.Provider value={setLocalStorageSessionToken}>
					<SessionTokenContext.Provider value={sessionTokenContextValue}>
						<ProjectSlugContext.Provider value={project}>
							<StageSlugContext.Provider value={stage}>{children}</StageSlugContext.Provider>
						</ProjectSlugContext.Provider>
					</SessionTokenContext.Provider>
				</SetSessionTokenContext.Provider>
			</LoginTokenContext.Provider>
		</ApiBaseUrlContext.Provider>
	)
})

const useLocalStorageSessionToken = (): [value: string | undefined, set: (token: string | undefined) => void] => {
	const [sessionTokenInner, setSessionTokenInner] = useState(() => localStorage.getItem(sessionTokenKey) ?? undefined)

	const setSessionToken = useCallback((token: string | undefined) => {
		if (token !== undefined) {
			localStorage.setItem(sessionTokenKey, token)
		} else {
			localStorage.removeItem(sessionTokenKey)
		}
		setSessionTokenInner(token)
	}, [])

	return [sessionTokenInner, setSessionToken]
}

Thank you!

[jonasnobile]

Hi, it looks like you might be using an older version of Contember Interface. Starting with version 2, all @contember packages should be kept at the same version. Please check if you're using version 2.0.2 of all @contember packages as well.

[kausik10]

Hi, I looked at the packages and found that the worker had slightly older version. I changed it to use the 2.0.2

 "@contember/client-content": "2.0.2",
 "@contember/graphql-client": "2.0.2",

The contermber interface had v2.0.2 . All the other @contember packages have v2.0.2. Hopefully this solves the issue. Thank you!

[jonasnobile]

You can reproduce and test the session expiration behavior locally using the following steps:

1. Log in to the application as a regular user (not the root admin).
2. Retrieve the session token from local storage — it's stored under the key:
   contember_session_token
3. Invalidate the session by signing out via the API, using the session token as the Authorization header:
   Refer to the documentation:
   Sign out of your account — Contember Docs
4. Navigate within the app.
   Observe whether the app detects the invalidated session and redirects to the login screen, or if it gets stuck in a loading state.

[kausik10]

Hi,

I looked into the identity.tsx and found that the previous codebase didn't have a crucial detail.

import { IdentityState} from "@contember/react-identity";
import { Loader } from "../ui/loader";
import { dict } from "../dict";


export const IdentityLoader = ({ children }: { children: React.ReactNode }) => {
    return (
        <>
            <IdentityState state={["loading", "none", "cleared"]}>
                <Loader />
            </IdentityState>
        
            <IdentityState state={"failed"}>
               
                            <p className="text-center text-lg text-gray-600">
                                {dict.identityLoader.fail}
                            </p>
                           
            </IdentityState>
            <IdentityState state={"success"}>{children}</IdentityState>
        </>
    );
};

Here, as we can see on cleared or none, the Loader was called thus we were being redirected to the Loader after session expiry.

I looked into other newer projects and replicated the identity.tsx to solve this issue as below:

import { IdentityState, LogoutTrigger } from "@contember/react-identity";
import { Loader } from "../ui/loader";
import { dict } from "../dict";
import { useEffect } from "react";
import { Card, CardContent } from "../ui/card";
import { CircleAlert } from "lucide-react";
import { Button } from "../ui/button";

export const IdentityLoader = ({ children }: { children: React.ReactNode }) => {
    return (
        <>
            <IdentityState state={["loading"]}>
                <Loader />
            </IdentityState>
            <IdentityState state={["none", "cleared"]}>
                <Redirect />
            </IdentityState>
            <IdentityState state={"failed"}>
                <div className="flex justify-center items-center h-screen bg-gray-100">
                    <Card className="w-72">
                        <CardContent className="flex flex-col items-center gap-2">
                            <CircleAlert className="h-12 w-12 text-destructive" />
                            <p className="text-center text-lg text-gray-600">
                                {dict.identityLoader.fail}
                            </p>
                            <div className="flex gap-2">
                                <Button
                                    onClick={() => window.location.reload()}
                                    variant="secondary"
                                >
                                    Try reload
                                </Button>
                                <LogoutTrigger>
                                    <Button>Login again</Button>
                                </LogoutTrigger>
                            </div>
                        </CardContent>
                    </Card>
                </div>
            </IdentityState>
            <IdentityState state={"success"}>{children}</IdentityState>
        </>
    );
};

const Redirect = () => {
    useEffect(() => {
        const backlink = window.location.pathname + window.location.search;
        window.location.href = `/identity/redirect?backlink=${encodeURIComponent(
            backlink
        )}`;
    });
    return null;
};

Now it works as expected. Initially the project used 2.0.0-alpha.12 when creating the project from AI studio.
But it's solved now.
Thank you!