blair.nz / cai
this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Remove auth redirect and add sign-in button to sidebar footer (#4)

### TL;DR

Allow unauthenticated users to access the chats route, showing a "Sign In" button in the sidebar footer instead of redirecting them away.

### What changed?

The `/chats` route no longer redirects unauthenticated users to the sign-in page. Instead, a "Sign In" button is displayed in the sidebar footer when the user is signed out, using Clerk's `SignedOut` and `SignInButton` components. The `SignedIn` guard around the user button remains intact.

### How to test?

1. Open the app while signed out and navigate to `/chats`.
2. Verify you are no longer redirected to the sign-in page.
3. Confirm the sidebar footer displays a "Sign In" button.
4. Click the "Sign In" button and verify it triggers the Clerk sign-in flow.
5. Sign in and confirm the sidebar footer switches to showing the user button.

### Why make this change?

Redirecting unauthenticated users away from the chats route creates a poor experience for users who may want to explore the app before signing in. Surfacing a "Sign In" prompt directly in the sidebar is a softer, more welcoming approach that keeps users in context.

authored by

James Blair and committed by
GitHub 2559dd40 f7f073b8

+5 -12
+5 -1
apps/web/src/components/chat-sidebar.tsx
··· 1 - import { SignedIn } from "@clerk/clerk-react"; 1 + import { SignedIn, SignedOut, SignInButton } from "@clerk/clerk-react"; 2 2 import { useChats } from "#/hooks/use-chats"; 3 3 import { ChatSidebarHeader } from "./chat-sidebar-header"; 4 4 import { ChatSidebarItem } from "./chat-sidebar-item"; 5 5 import { SidebarUserButton } from "./sidebar-user-button"; 6 + import { Button } from "./ui/button"; 6 7 import { 7 8 Sidebar, 8 9 SidebarContent, ··· 29 30 </SidebarGroup> 30 31 </SidebarContent> 31 32 <SidebarFooter> 33 + <SignedOut> 34 + <Button render={<SignInButton />}>Sign In</Button> 35 + </SignedOut> 32 36 <SignedIn> 33 37 <SidebarUserButton /> 34 38 </SignedIn>
-11
apps/web/src/routes/chats.tsx
··· 1 - import { RedirectToSignIn, useAuth } from "@clerk/clerk-react"; 2 1 import { createFileRoute, Outlet } from "@tanstack/react-router"; 3 2 import { ChatSidebar } from "#/components/chat-sidebar"; 4 3 import { Container } from "#/components/container"; ··· 9 8 }); 10 9 11 10 function RouteComponent() { 12 - const { isLoaded, isSignedIn } = useAuth(); 13 - 14 - if (!isLoaded) { 15 - return null; 16 - } 17 - 18 - if (!isSignedIn) { 19 - return <RedirectToSignIn />; 20 - } 21 - 22 11 return ( 23 12 <SidebarProvider className="h-dvh"> 24 13 <ChatSidebar />