Check for an active session

Use case

Gate your app’s UI or navigation: Restrict access to application features that require authentication.
Route authenticated members: Direct members with active sessions to your main application experience.
Redirect unauthenticated members: Send members without sessions to your login or signup flow.

Retrieve a member session

Select a framework:

Next.js
React
Vanilla JS

Follow our Next.js quickstart for an example routing a member based on whether there’s an active session.

Determine where to authenticate sessions in your application

We recommend placing this logic close to the entry point to each page you want to control in your application.

Implement useStytchMemberSession()

You can use the useStytchMemberSession() hook to retrieve a member’s session data and listen for changes:

import { useStytchMemberSession } from '@stytch/nextjs/b2b';
import { useRouter } from 'next/navigation';

// Protected page example that routes a member to login if there's no active session
export default function Home() {
    const { session, isInitialized } = useStytchMemberSession();
    const router = useRouter();

    useEffect(() => {
        // Route the member to login if there's no session
        if (!session && isInitialized) {
            router.replace("/login");
        }
    }, [session, isInitialized, router]);

    if (!isInitialized || !session) {
        // Show loading while redirecting or if the SDK hasn't finished initializing
        return <p>Loading...</p>;
    }

    // If there's an active session, show the home content
    return <p>Welcome! You have an active session.</p>;
}

Using the isInitialized and session values

The useStytchMemberSession() hook returns the values:

isInitialized

boolean

Whether or not the SDK has finished initializing. Ensure this is true before checking for an active session.

session

object[] | null

The active Member Session object. null if there’s no active session.

fromCache

boolean

Whether the SDK is returning cached session data based on if the SDK has completed an Authenticate Session call or not.

For most cases, you can rely on checking the session value as long as isInitialized is true.

Using cached data and fromCache

The frontend SDK utilizes stale-while-revalidate (SWR) for faster time-to-interactivity and UX:

The page first loads.
Stytch’s SDK checks and returns cached Member and Session data to your application.
The SDK refreshes Member and Session data in background session authentication while your application starts.

For use cases where you’d prefer to wait until the session data finishes updating instead of relying on cached data, you can verify that fromCache is false before checking the session value.

Follow our React quickstart for an example routing a member based on whether there’s an active session.

Determine where to authenticate sessions in your application

We recommend placing this logic close to the entry point to each page you want to control in your application.

Implement useStytchMemberSession()

You can use the useStytchMemberSession() hook to retrieve a member’s session data and listen for changes:

import { useStytchMemberSession } from '@stytch/react/b2b';
import { Navigate } from "react-router";

// Protected page example that routes a member to login if there's no active session
export const Home = () => {
    const { session } = useStytchMemberSession();

    // Route members to login if there's no active session
    if (!session) {
        return <Navigate to="/login" />;
    }

    return <p>Welcome! You have an active session.</p>;
};

Using the session value

The useStytchMemberSession() hook returns the values:

session

object[] | null

The active Member Session object. null if there’s no active session.

fromCache

boolean

Whether the SDK is returning cached session data based on if the SDK has completed an Authenticate Session call or not.

For most cases, you can rely on checking the session value.

Using cached data and fromCache

The frontend SDK utilizes stale-while-revalidate (SWR) for faster time-to-interactivity and UX:

The page first loads.
Stytch’s SDK checks and returns cached Member and Session data to your application.
The SDK refreshes Member and Session data in background session authentication while your application starts.

For use cases where you’d prefer to wait until the session data finishes updating instead of relying on cached data, you can verify that fromCache is false before checking the session value.

Follow our Vanilla JS quickstart for an example routing a member based on whether there’s an active session.

Determine where to authenticate sessions in your application

We recommend placing this logic close to the entry point to each page you want to control in your application.

Implement getSync() to retrieve session data

You can use the session.getSync() method to retrieve a member’s session data:

import { stytch } from "./stytch-client.js";  // or where Stytch is initialized

function init() {
    const session = stytch.session.getSync();
    if (!session) {
        // Redirect to login if there's no active session
        window.location.href = "/login";
        return;
    }

    // If there's an active session, show the protected content
    document.getElementById('app').innerHTML = '<p>Welcome! You have an active session.</p>';
}

// Initialize when the page loads
document.addEventListener("DOMContentLoaded", init);

The session.getSync() method returns the value:

session

object[] | null

The active Member Session object. null if there’s no active session.

Implement onChange() to listen for changes

You can use the session.onChange() method to listen for changes in the member’s session:

// Listen for session changes
const unsubscribeSession = stytch.session.onChange((newSession) => {
    session = newSession;
    // Trigger any relevant actions in your application based on the session update
    handleSessionChange();
});

window.addEventListener('beforeunload', () => {
    unsubscribeSession && unsubscribeSession();
});

The method takes in a callback that gets called whenever the Session object changes.
It returns an unsubscribe method for you to call when you no longer want to listen for changes.

​Use case

​Retrieve a member session

Use case

Retrieve a member session