dikaioai
diff --git a/‎packages/nextjs/src/client-boundary/uiComponents.tsx‎
Lines changed: 1 addition & 0 deletions b/‎packages/nextjs/src/client-boundary/uiComponents.tsx‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎packages/nextjs/src/index.ts‎
Lines changed: 1 addition & 0 deletions b/‎packages/nextjs/src/index.ts‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎playground/nextjs/pages/_app.tsx‎
Lines changed: 17 additions & 2 deletions b/‎playground/nextjs/pages/_app.tsx‎
Lines changed: 17 additions & 2 deletions
@@ -14,6 +14,7 @@ export {
   CreateOrganization,
   SignInButton,
   SignUpButton,
+  SignOutButton,
 } from '@clerk/clerk-react';
 
 export const SignIn = (props: SignInProps) => {
 
@@ -28,6 +28,7 @@ export {
   OrganizationProfile,
   CreateOrganization,
   SignInButton,
+  SignOutButton,
 } from './client-boundary/uiComponents';
 
 /**
 
@@ -1,7 +1,15 @@
 import '../styles/globals.css';
 import type { AppProps } from 'next/app';
 
-import { ClerkProvider, OrganizationSwitcher, SignInButton, UserButton } from '@clerk/nextjs';
+import {
+  ClerkProvider,
+  OrganizationSwitcher,
+  SignedIn,
+  SignedOut,
+  SignInButton,
+  SignOutButton,
+  UserButton,
+} from '@clerk/nextjs';
 import { dark, neobrutalism, shadesOfPurple } from '@clerk/themes';
 import Link from 'next/link';
 import React, { useState } from 'react';
@@ -76,7 +84,14 @@ const AppBar = (props: AppBarProps) => {
       </select>
       <button onClick={props.onToggleDark}>toggle dark mode</button>
       <UserButton />
-      <SignInButton mode={'modal'} />
+
+      <SignedIn>
+        <SignOutButton />
+      </SignedIn>
+
+      <SignedOut>
+        <SignInButton mode={'modal'} />
+      </SignedOut>
     </div>
   );
 };