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.

Utility components are only intended to be helpful, they're in no way required. In fact, they don't even touch any Basejump functionality, only Supabase.

Usage

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 (
            <nav>
                <Link href="/">Home</Link>
                <Link href="/pricing">Pricing</Link>
                <Link href="/contact">Contact</Link>
                <BasejumpUserSession>
                    <SignedIn>
                        <UserProfileButton />
                    </SignedIn>
                    <SignedOut>
                        <Link href="/login">Login</Link>
                    </SignedOut>
                </BasejumpUserSession>
            </nav>
        )
    }

Installation

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.