SignedIn / SignedOut Component

These components are used to show content when a user is logged in or out. They're particularly useful for building your navigation.


The <SignedIn> and <SignedOut> components need to be nested inside of a <BasejumpUserSession> component. The <BasejumpUserSession> component is responsible for managing the user session and providing it to the other components.

import {BasejumpUserSession,SignedIn,SignedOut} from "@usebasejump/next";
import UserProfileButton from "./UserProfileButton";
import Link from "next/link";

export default function Navigation() {
        return (
                <Link href="/">Home</Link>
                <Link href="/pricing">Pricing</Link>
                <Link href="/contact">Contact</Link>
                        <UserProfileButton />
                        <Link href="/login">Login</Link>


The <SignedIn>, <SignedOut> and <BasejumpUserSession> components are part of the @usebasejump/react and @usebasejump/next packages. If you've followed the installation instructions you should be ready to go.