Implements guest login functionality - users can access the app without creating an account or logging in

firebase.ts

@@ -20,6 +20,7 @@ import {
   AuthCredential,
   reauthenticateWithCredential,
   EmailAuthProvider,
+  signInAnonymously,
 } from "firebase/auth";
 import { getDownloadURL, getStorage, ref, uploadBytes } from "firebase/storage";
 import { UserData } from "./src/features/user";
@@ -139,6 +140,43 @@ export async function signIn(email: string, password: string) {
   }
 }
 
+export async function signInAsGuest() {
+  try {
+    const guestCredential = await signInAnonymously(auth);
+
+    const guest = guestCredential.user;
+
+    await updateProfile(guest, {
+      displayName: "Guest",
+
+      photoURL:
+        "https://firebasestorage.googleapis.com/v0/b/banter-69832.appspot.com/o/assets%2FdefaultAvatar.svg?alt=media&token=2cd07b3e-6ee1-4682-8246-57bb20bc0d1f",
+    });
+
+    // Profile updated
+
+    await setDoc(doc(db, "users", guest.uid), {
+      username: guest.displayName,
+
+      avatar: guest.photoURL,
+
+      tag: "0000", // Create function to generate unique tag for each username
+
+      about: "",
+
+      banner: "#7CC6FE",
+
+      email: guest.email,
+    });
+    // Database updated
+
+    await joinServer("ke6NqegIvJEOa9cLzUEp");
+    // User joins global chat
+  } catch (error) {
+    console.error(error);
+  }
+}
+
 async function reauthenticateUser(password: string) {
   if (!auth.currentUser || !auth.currentUser.email) return;
 

src/components/LoginForm.tsx

@@ -1,13 +1,15 @@
 import { useRef } from "react";
 import Link from "next/link";
 import Image from "next/image";
-import { signIn } from "../../firebase";
+import { signIn, signInAsGuest } from "../../firebase";
 import tw from "tailwind-styled-components/dist/tailwind";
 import banterIcon from "../../assets/banterIcon.svg";
+import { useRouter } from "next/router";
 
 export default function LoginForm() {
   const emailRef = useRef<HTMLInputElement>(null);
   const passwordRef = useRef<HTMLInputElement>(null);
+  const router = useRouter();
 
   function handleSubmit(e: any) {
     e.preventDefault();
@@ -23,6 +25,11 @@ export default function LoginForm() {
     signIn(email, password);
   }
 
+  async function guestLogin() {
+    await signInAsGuest();
+    router.push("/channels/@me");
+  }
+
   return (
     <Container onSubmit={handleSubmit}>
       <LoginContainer>
@@ -66,7 +73,7 @@ export default function LoginForm() {
 
       <Separator />
 
-      <BanterContainer>
+      <BanterContainer onClick={guestLogin}>
         <BanterIcon>
           <StyledImage
             src={banterIcon}
@@ -75,14 +82,18 @@ export default function LoginForm() {
             alt="Banter logo"
           />
         </BanterIcon>
-        <Caption>Log in to Banter</Caption>
+        <Caption>Log in as Guest</Caption>
+        <SubCaption>
+          Click this to login to Banter with a <Bold>guest account</Bold>{" "}
+          instantly.
+        </SubCaption>
       </BanterContainer>
     </Container>
   );
 }
 
 const Container = tw.form`
-  flex w-196 h-102 p-8 justify-between bg-white rounded-md
+  flex w-196 h-102 p-8 justify-between bg-white rounded-md select-none
 `;
 
 const LoginContainer = tw.div`
@@ -149,7 +160,7 @@ const Separator = tw.div`
 `;
 
 const BanterContainer = tw.div`
-  flex flex-col justify-center items-center w-60 h-full
+  flex flex-col justify-center items-center w-60 h-full text-center cursor-pointer
 `;
 const BanterIcon = tw.figure`
   flex w-60 justify-center mb-8
@@ -160,5 +171,13 @@ const StyledImage = tw(Image)`
 `;
 
 const Caption = tw.h3`
-  text-2xl font-semibold
+  text-2xl font-semibold mb-2
+`;
+
+const SubCaption = tw.span`
+  text-gray-600
+`;
+
+const Bold = tw.span`
+  font-semibold
 `;

src/components/userSettings/userSettingsView/myAccountSettings/MyAccountCard.tsx

@@ -65,7 +65,7 @@ export default function MyAccountCard() {
           <SettingDisplay>
             <SettingsLabel>EMAIL</SettingsLabel>
 
-            <Email>{user.email}</Email>
+            <Email>{user.email || "This is a guest account :)"}</Email>
           </SettingDisplay>
 
           <EditButton onClick={() => dispatch(setChangeEmailOpen(true))}>