Adding toasts to login

Author: Aayush-Agnihotri

package-lock.json

@@ -22,6 +22,7 @@
     "react-dom": "19.0.0-rc-66855b96-20241106",
     "react-markdown": "^9.0.1",
     "react-syntax-highlighter": "^15.6.1",
+    "react-toastify": "^11.0.2",
     "remark-gfm": "^4.0.0",
     "uuid": "^11.0.3"
   },

package.json

@@ -35,7 +35,14 @@ model Message {
   content   String
   images    String[]
   timestamp DateTime @default(now())
-  sender    String
+  sender    Sender
   chat      Chat     @relation(fields: [chatId], references: [uuid])
   chatId    String
 }
+
+enum Sender {
+  USER
+  ASSISTANT
+  SYSTEM
+  TOOL
+}

prisma/schema.prisma

@@ -1,21 +1,22 @@
 import { NextRequest, NextResponse } from 'next/server';
-import { getEmail, upsertUserFromEmail } from '@/app/utils/databaseUtils';
+// import { getEmail, upsertUserFromEmail } from '@/app/utils/databaseUtils';
 
 export async function GET(request: NextRequest) {
-  const uid = request.headers.get('uid');
-  if (!uid) {
-    return NextResponse.json({ message: 'No uid found' }, { status: 400 });
-  }
+  // const uid = request.headers.get('uid');
+  // if (!uid) {
+  //   return NextResponse.json({ message: 'No uid found' }, { status: 400 });
+  // }
 
-  const userEmail = request.headers.get('email')!;
-  const email = await getEmail(userEmail);
-  if (!email) {
-    return NextResponse.json(
-      { message: 'Only Cornell AppDev members can use this app' },
-      { status: 401 },
-    );
-  }
+  // const userEmail = request.headers.get('email')!;
+  // const email = await getEmail(userEmail);
+  // if (!email) {
+  //   return NextResponse.json(
+  //     { message: 'Only Cornell AppDev members can use AI Dev' },
+  //     { status: 401 },
+  //   );
+  // }
 
-  const newUser = await upsertUserFromEmail(email, uid);
-  return NextResponse.json({ success: true, user: newUser });
+  // const newUser = await upsertUserFromEmail(email, uid);
+  // return NextResponse.json({ success: true, user: newUser });
+  return NextResponse.json({ success: true });
 }

src/app/api/authenticate/route.ts

@@ -1,10 +1,19 @@
 'use client';
 
+import { useEffect } from 'react';
 import { useAuth } from '../../contexts/AuthContext';
+import { toast } from 'react-toastify';
+import Toast from './Toast';
 
 export default function LoginPage() {
   const { signInWithGoogle, error } = useAuth();
 
+  useEffect(() => {
+    if (error) {
+      toast.error(error);
+    }
+  }, [error]);
+
   return (
     <main className="flex h-svh flex-col items-center justify-center gap-10">
       <div>
@@ -62,8 +71,7 @@ export default function LoginPage() {
             <span>Login</span>
           </button>
         </div>
-
-        {error && <div className="pl-6 text-sm text-red-600">{error}</div>}
+        <Toast />
       </div>
     </main>
   );

src/app/components/LoginPage.tsx

@@ -0,0 +1,20 @@
+import { ToastContainer, Slide } from 'react-toastify';
+
+export default function ErrorToast() {
+  return (
+    <ToastContainer
+      className={'text-sm'}
+      position="bottom-center"
+      autoClose={5000}
+      hideProgressBar={false}
+      newestOnTop={false}
+      closeOnClick={false}
+      rtl={false}
+      pauseOnFocusLoss
+      draggable
+      pauseOnHover
+      theme="colored"
+      transition={Slide}
+    />
+  );
+}

src/app/components/Toast.tsx

@@ -1,5 +1,4 @@
 import prisma from '@/prisma';
-import { Email } from '@prisma/client';
 
 export async function createEmail(email: string) {
   return await prisma.email.create({

src/app/utils/databaseUtils.ts

@@ -52,6 +52,6 @@ export async function cloneRequest(request: NextRequest, url: string) {
       status: clonedResponse.status,
     });
   } catch (error) {
-    return NextResponse.json({ error: error }, { status: 500 });
+    return NextResponse.json({ message: error }, { status: 500 });
   }
 }

src/app/utils/requestUtils.ts

@@ -13,22 +13,14 @@ import { auth, provider } from '@/firebase';
 interface AuthContextType {
   user: User | null;
   loading: boolean;
-  // TODO: Remove once there is a toast
   error: string | null;
   signInWithGoogle: () => Promise<void>;
   signOut: () => Promise<void>;
 }
 
-interface FirebaseAuthError {
-  code: string;
-  message: string;
-  name: string;
-}
-
 const AuthContext = createContext<AuthContextType>({
   user: null,
   loading: true,
-  // TODO: Remove once there is a toast
   error: null,
   signInWithGoogle: async () => {},
   signOut: async () => {},
@@ -45,15 +37,13 @@ export const useAuth = () => {
 export const AuthProvider = ({ children }: { children: ReactNode }) => {
   const [user, setUser] = useState<User | null>(null);
   const [loading, setLoading] = useState<boolean>(true);
-  // TODO: Remove once there is a toast
   const [error, setError] = useState<string | null>(null);
   const router = useRouter();
 
   const signInWithGoogle = async () => {
     setError(null);
     await signInWithPopup(auth, provider).catch((error) => {
-      // TODO: Add toast to tell user there is an error
-      setError((error as FirebaseAuthError).message);
+      setError((error as Error).message);
     });
   };
 
@@ -65,8 +55,7 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
         await fetch('/api/logout');
       })
       .catch((error) => {
-        // TODO: Add toast to tell user there is an error
-        setError((error as FirebaseAuthError).message);
+        setError((error as Error).message);
       });
   };
 
@@ -100,7 +89,6 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
 
         setUser(currentUser);
       } catch (error) {
-        // TODO: Add toast to tell user there is an error
         setError(JSON.parse((error as Error).message).message);
         setUser(null);
       } finally {
@@ -111,10 +99,7 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
   });
 
   return (
-    <AuthContext.Provider
-      // TODO: Remove once there is a toast
-      value={{ user, loading, error, signInWithGoogle, signOut }}
-    >
+    <AuthContext.Provider value={{ user, loading, error, signInWithGoogle, signOut }}>
       {children}
     </AuthContext.Provider>
   );

src/contexts/AuthContext.tsx

@@ -10,3 +10,19 @@
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
+
+.Toastify__toast,
+.Toastify__toast--rtl {
+  width: 100%;
+}
+
+.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,
+.Toastify__toast-theme--colored.Toastify__toast--error {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  color: white;
+
+}
+
+.Toastify__toast-theme--colored.Toastify__toast--error {
+  background-color: #CB433A;
+}