feat: support guest session

Author: jeremyphilemon

app/(auth)/api/auth/guest/route.ts

@@ -0,0 +1,13 @@
+import { redirect } from 'next/navigation';
+import { auth, signIn } from '@/app/(auth)/auth';
+
+export async function GET() {
+  const session = await auth();
+
+  if (!session?.user?.id) {
+    await signIn('guest', { redirect: false });
+    redirect('/');
+  }
+
+  return new Response('Unauthorized', { status: 401 });
+}

app/(auth)/auth.config.ts

@@ -1,3 +1,4 @@
+import { anonymousRegex } from '@/lib/constants';
 import type { NextAuthConfig } from 'next-auth';
 
 export const authConfig = {
@@ -12,25 +13,23 @@ export const authConfig = {
   callbacks: {
     authorized({ auth, request: { nextUrl } }) {
       const isLoggedIn = !!auth?.user;
-      const isOnChat = nextUrl.pathname.startsWith('/');
-      const isOnRegister = nextUrl.pathname.startsWith('/register');
-      const isOnLogin = nextUrl.pathname.startsWith('/login');
+      const isAnonymousUser = anonymousRegex.test(auth?.user?.email ?? '');
 
-      if (isLoggedIn && (isOnLogin || isOnRegister)) {
-        return Response.redirect(new URL('/', nextUrl as unknown as URL));
-      }
-
-      if (isOnRegister || isOnLogin) {
-        return true; // Always allow access to register and login pages
-      }
+      const isOnLoginPage = nextUrl.pathname.startsWith('/login');
+      const isOnRegisterPage = nextUrl.pathname.startsWith('/register');
 
-      if (isOnChat) {
-        if (isLoggedIn) return true;
-        return false; // Redirect unauthenticated users to login page
+      // If logged in, redirect to home page
+      if (
+        isLoggedIn &&
+        !isAnonymousUser &&
+        (isOnLoginPage || isOnRegisterPage)
+      ) {
+        return Response.redirect(new URL('/', nextUrl as unknown as URL));
       }
 
-      if (isLoggedIn) {
-        return Response.redirect(new URL('/', nextUrl as unknown as URL));
+      // Always allow access to register and login pages
+      if (isOnRegisterPage || isOnLoginPage) {
+        return true;
       }
 
       return true;

app/(auth)/auth.ts

@@ -2,7 +2,7 @@ import { compare } from 'bcrypt-ts';
 import NextAuth, { type User, type Session } from 'next-auth';
 import Credentials from 'next-auth/providers/credentials';
 
-import { getUser } from '@/lib/db/queries';
+import { createAnonymousUser, getUser } from '@/lib/db/queries';
 
 import { authConfig } from './auth.config';
 
@@ -21,12 +21,23 @@ export const {
     Credentials({
       credentials: {},
       async authorize({ email, password }: any) {
-        const users = await getUser(email);
-        if (users.length === 0) return null;
-        // biome-ignore lint: Forbidden non-null assertion.
-        const passwordsMatch = await compare(password, users[0].password!);
+        const [user] = await getUser(email);
+
+        if (!user) return null;
+        if (!user.password) return null;
+
+        const passwordsMatch = await compare(password, user.password);
+
         if (!passwordsMatch) return null;
-        return users[0] as any;
+        return user;
+      },
+    }),
+    Credentials({
+      id: 'guest',
+      credentials: {},
+      async authorize() {
+        const [anonymousUser] = await createAnonymousUser();
+        return anonymousUser;
       },
     }),
   ],

app/(chat)/api/chat/route.ts

@@ -1,5 +1,5 @@
 import {
-  UIMessage,
+  type UIMessage,
   appendResponseMessages,
   createDataStreamResponse,
   smoothStream,
@@ -10,6 +10,7 @@ import { systemPrompt } from '@/lib/ai/prompts';
 import {
   deleteChatById,
   getChatById,
+  getMessageCountByUserId,
   saveChat,
   saveMessages,
 } from '@/lib/db/queries';
@@ -23,8 +24,12 @@ import { createDocument } from '@/lib/ai/tools/create-document';
 import { updateDocument } from '@/lib/ai/tools/update-document';
 import { requestSuggestions } from '@/lib/ai/tools/request-suggestions';
 import { getWeather } from '@/lib/ai/tools/get-weather';
-import { isProductionEnvironment } from '@/lib/constants';
+import { anonymousRegex, isProductionEnvironment } from '@/lib/constants';
 import { myProvider } from '@/lib/ai/providers';
+import {
+  entitlementsByMembershipTier,
+  type MembershipTier,
+} from '@/lib/ai/capabilities';
 
 export const maxDuration = 60;
 
@@ -42,10 +47,33 @@ export async function POST(request: Request) {
 
     const session = await auth();
 
-    if (!session || !session.user || !session.user.id) {
+    if (!session?.user?.id) {
       return new Response('Unauthorized', { status: 401 });
     }
 
+    const membershipTier: MembershipTier = anonymousRegex.test(
+      session.user.email ?? '',
+    )
+      ? 'guest'
+      : 'free';
+
+    const messageCount = await getMessageCountByUserId({
+      id: session.user.id,
+      differenceInHours: 24,
+    });
+
+    if (
+      messageCount >
+      entitlementsByMembershipTier[membershipTier].maxMessagesPerDay
+    ) {
+      return new Response(
+        'You have exceeded your maximum number of messages for the day',
+        {
+          status: 429,
+        },
+      );
+    }
+
     const userMessage = getMostRecentUserMessage(messages);
 
     if (!userMessage) {

app/layout.tsx

@@ -4,6 +4,7 @@ import { Geist, Geist_Mono } from 'next/font/google';
 import { ThemeProvider } from '@/components/theme-provider';
 
 import './globals.css';
+import { SessionProvider } from 'next-auth/react';
 
 export const metadata: Metadata = {
   metadataBase: new URL('https://chat.vercel.ai'),
@@ -77,7 +78,7 @@ export default async function RootLayout({
           disableTransitionOnChange
         >
           <Toaster position="top-center" />
-          {children}
+          <SessionProvider>{children}</SessionProvider>
         </ThemeProvider>
       </body>
     </html>

components/sidebar-user-nav.tsx

@@ -1,8 +1,9 @@
 'use client';
+
 import { ChevronUp } from 'lucide-react';
 import Image from 'next/image';
 import type { User } from 'next-auth';
-import { signOut } from 'next-auth/react';
+import { signOut, useSession } from 'next-auth/react';
 import { useTheme } from 'next-themes';
 
 import {
@@ -17,26 +18,50 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
 } from '@/components/ui/sidebar';
+import { anonymousRegex } from '@/lib/constants';
+import { useRouter } from 'next/navigation';
+import { toast } from './toast';
+import { LoaderIcon } from './icons';
 
 export function SidebarUserNav({ user }: { user: User }) {
+  const router = useRouter();
+  const { data, status } = useSession();
   const { setTheme, theme } = useTheme();
 
+  const isGuest = anonymousRegex.test(data?.user?.email ?? '');
+
   return (
     <SidebarMenu>
       <SidebarMenuItem>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <SidebarMenuButton className="data-[state=open]:bg-sidebar-accent bg-background data-[state=open]:text-sidebar-accent-foreground h-10">
-              <Image
-                src={`https://avatar.vercel.sh/${user.email}`}
-                alt={user.email ?? 'User Avatar'}
-                width={24}
-                height={24}
-                className="rounded-full"
-              />
-              <span className="truncate">{user?.email}</span>
-              <ChevronUp className="ml-auto" />
-            </SidebarMenuButton>
+            {status === 'loading' ? (
+              <SidebarMenuButton className="data-[state=open]:bg-sidebar-accent bg-background data-[state=open]:text-sidebar-accent-foreground h-10 justify-between">
+                <div className="flex flex-row gap-2">
+                  <div className="size-6 bg-zinc-500/30 rounded-full animate-pulse" />
+                  <span className="bg-zinc-500/30 text-transparent rounded-md animate-pulse">
+                    Loading auth status
+                  </span>
+                </div>
+                <div className="animate-spin text-zinc-500/30">
+                  <LoaderIcon />
+                </div>
+              </SidebarMenuButton>
+            ) : (
+              <SidebarMenuButton className="data-[state=open]:bg-sidebar-accent bg-background data-[state=open]:text-sidebar-accent-foreground h-10">
+                <Image
+                  src={`https://avatar.vercel.sh/${user.email}`}
+                  alt={user.email ?? 'User Avatar'}
+                  width={24}
+                  height={24}
+                  className="rounded-full"
+                />
+                <span className="truncate">
+                  {isGuest ? 'Guest' : user?.email}
+                </span>
+                <ChevronUp className="ml-auto" />
+              </SidebarMenuButton>
+            )}
           </DropdownMenuTrigger>
           <DropdownMenuContent
             side="top"
@@ -54,12 +79,26 @@ export function SidebarUserNav({ user }: { user: User }) {
                 type="button"
                 className="w-full cursor-pointer"
                 onClick={() => {
-                  signOut({
-                    redirectTo: '/',
-                  });
+                  if (status === 'loading') {
+                    toast({
+                      type: 'error',
+                      description:
+                        'Checking authentication status, please try again!',
+                    });
+
+                    return;
+                  }
+
+                  if (isGuest) {
+                    router.push('/login');
+                  } else {
+                    signOut({
+                      redirectTo: '/',
+                    });
+                  }
                 }}
               >
-                Sign out
+                {isGuest ? 'Login to your account' : 'Sign out'}
               </button>
             </DropdownMenuItem>
           </DropdownMenuContent>

lib/ai/capabilities.ts

@@ -0,0 +1,33 @@
+import type { ChatModel } from './models';
+
+export type MembershipTier = 'guest' | 'free';
+
+interface Entitlements {
+  maxMessagesPerDay: number;
+  chatModelsAvailable: Array<ChatModel['id']>;
+}
+
+export const entitlementsByMembershipTier: Record<
+  MembershipTier,
+  Entitlements
+> = {
+  /*
+   * For users without an account
+   */
+  guest: {
+    maxMessagesPerDay: 20,
+    chatModelsAvailable: ['chat-model', 'chat-model-reasoning'],
+  },
+
+  /*
+   * For user with an account
+   */
+  free: {
+    maxMessagesPerDay: 100,
+    chatModelsAvailable: ['chat-model', 'chat-model-reasoning'],
+  },
+
+  /*
+   * TODO: For users with an account and a paid membership
+   */
+};

lib/ai/models.ts

@@ -1,6 +1,6 @@
 export const DEFAULT_CHAT_MODEL: string = 'chat-model';
 
-interface ChatModel {
+export interface ChatModel {
   id: string;
   name: string;
   description: string;

lib/constants.ts

@@ -5,3 +5,5 @@ export const isTestEnvironment = Boolean(
     process.env.PLAYWRIGHT ||
     process.env.CI_PLAYWRIGHT,
 );
+
+export const anonymousRegex = /^anonymous-\d+$/;