<SignedOut>

import "@/styles/globals.css";
import {
  ClerkProvider,
  RedirectToSignIn,
  SignedOut,
} from "@clerk/nextjs";
import { AppProps } from "next/app";

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ClerkProvider {...pageProps}>
      <SignedOut>
        <div>You are signed Out</div>
      </SignedOut>
      <div>Always visible</div>
    </ClerkProvider>
  );
}

export default MyApp;

import { SignedOut, ClerkProvider } from "@clerk/clerk-react";

function Page() {
  return (
    <ClerkProvider publishableKey={`YOUR_PUBLISHABLE_KEY`}>
      <section>
        <div>
          This content is always visible.
        </div>
        <SignedOut>
          <div>
            This content is visible only to signed out users.
          </div>
        </SignedOut>
      </section>
    </ClerkProvider>
  );
}

import { Routes, Route } from 'react-router-dom';
import {
  ClerkProvider,
  SignedOut,
  RedirectToSignIn
} from "@clerk/clerk-react";

function App() {
  return (
    <ClerkProvider publishableKey={`YOUR_PUBLISHABLE_KEY`}>
      <Routes>
      <Route
        path="/"
        element={<div>This page is publicly accessible.</div>}
      />
      <Route
        path="/public"
        element={
          <SignedOut>
            <div>This content is accessible only to users that are signed out.</div>
          </SignedOut>
        }
      />
    </Routes>
    </ClerkProvider>
  );
}

import {
  SignedIn,
  SignedOut,
  UserButton,
} from "@clerk/remix";

export default function Index() {
  return (
    <div>
      <SignedIn>
        <h1>Index route</h1>
        <p>You are signed in!</p>
        <UserButton />
      </SignedIn>
      <SignedOut>
      <p> You are signed out </p>
      </SignedOut>
    </div>
  );
}