162 feat add anonymous log in

src/actions/create-profile.ts

@@ -0,0 +1,28 @@
+"use server";
+
+import { getSuapabaseServerComponent } from "@/supabase/models/index.models";
+import { randomUUID } from "crypto";
+
+export async function createDefaultProfile() {
+  const supabase = getSuapabaseServerComponent();
+
+  const randomUsername = randomUUID({ disableEntropyCache: true }).slice(0, 12);
+
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  if (!user) throw new Error("error getting user");
+
+  const { error: errorCreatingUserProfile } = await supabase
+    .from("profiles")
+    .insert({
+      name: randomUsername,
+      user_id: user.id,
+      username: randomUsername,
+    });
+
+  if (errorCreatingUserProfile) {
+    throw new Error("error creating profile");
+  }
+}

src/actions/new-post.ts

@@ -31,7 +31,7 @@ export async function createNewPost(
     throw new Error("error validating formData schema");
   }
 
-  const supabase = await getSuapabaseServerComponent();
+  const supabase = getSuapabaseServerComponent();
 
   let imageUrl: string | null = null;
 

src/actions/update-profile.ts

@@ -34,7 +34,7 @@ export async function updateProfile(formData: TFormData) {
 
   if (!originUrl) throw new Error("no origin header found");
 
-  const supabase = await getSuapabaseServerComponent();
+  const supabase = getSuapabaseServerComponent();
 
   const {
     data: { session },

src/app/(site)/(guest)/auth/log-in/page.tsx

@@ -12,6 +12,7 @@ import { Logo } from "@/components/ui/logo";
 import { AuthFormAreas } from "../auth-form.models";
 import { Alert } from "@/components/ui/alert";
 import { useProtectRouteFromAuthUsers } from "@/utils/auth-validations/client-side-validations";
+import { SignInAnonymouslyBtn } from "@/components/feature/sign-in-anonymously";
 
 export default function LogInPage() {
   const [errorLogginIn, setErrorLogginIn] = useState<boolean>(false);
@@ -154,6 +155,14 @@ export default function LogInPage() {
           </Alert>
         )}
       </form>
+      <section className="flex flex-col gap-4">
+        <div className="grid grid-cols-[1fr_20px_1fr] items-center justify-center gap-2 dark:text-neutral-300">
+          <hr className="w-full h-[2px] bg-neutral-300 dark:bg-cm-lighter-gray" />
+          or
+          <hr className="w-full h-[2px] bg-neutral-300 dark:bg-cm-lighter-gray" />
+        </div>
+        <SignInAnonymouslyBtn />
+      </section>
     </section>
   );
 }

src/app/(site)/(guest)/auth/sign-up/callback/route.ts

@@ -28,10 +28,11 @@ export async function GET(request: NextRequest) {
         0,
         12,
       );
+
       const { error: errorCreatingUserProfile } = await supabase
         .from("profiles")
         .insert({
-          name: user.email?.split("@")[0],
+          name: randomUsername,
           user_id: user.id,
           username: randomUsername,
         });

src/app/(site)/(guest)/auth/sign-up/page.tsx

@@ -11,6 +11,7 @@ import { useState } from "react";
 import { Alert } from "@/components/ui/alert";
 import Link from "next/link";
 import { useProtectRouteFromAuthUsers } from "@/utils/auth-validations/client-side-validations";
+import { SignInAnonymouslyBtn } from "@/components/feature/sign-in-anonymously";
 
 export default function SingUpPage() {
   const [wasEmailSent, setWasEmailSent] = useState<boolean>(false);
@@ -138,6 +139,14 @@ export default function SingUpPage() {
           />
         )}
       </form>
+      <section className="flex flex-col gap-4">
+        <div className="grid grid-cols-[1fr_20px_1fr] items-center justify-center gap-2 dark:text-neutral-300">
+          <hr className="w-full h-[2px] bg-neutral-300 dark:bg-cm-lighter-gray" />
+          or
+          <hr className="w-full h-[2px] bg-neutral-300 dark:bg-cm-lighter-gray" />
+        </div>
+        <SignInAnonymouslyBtn />
+      </section>
     </section>
   );
 }

src/components/feature/sign-in-anonymously/index.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { createDefaultProfile } from "@/actions/create-profile";
+import { PlainButton } from "@/components/ui/buttons/plain";
+import { useSupabase } from "@/hooks/use-supabase";
+import { ClientRouting } from "@/models/routing/client";
+import { VenetianMask } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export function SignInAnonymouslyBtn() {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  const { supabase } = useSupabase();
+
+  const router = useRouter();
+
+  async function SignInAnonymously() {
+    setLoading(true);
+
+    try {
+      const { error } = await supabase.auth.signInAnonymously();
+
+      if (error) {
+        setError("there has been an error");
+        setLoading(false);
+        return;
+      }
+
+      await createDefaultProfile();
+
+      router.push(ClientRouting.app);
+    } catch (error) {
+      console.log({ error });
+    }
+  }
+
+  return (
+    <>
+      <PlainButton
+        className="bg-indigo-600 dark:bg-indigo-700 text-neutral-50"
+        isLoading={loading}
+        disabled={loading}
+        onClick={() => SignInAnonymously()}
+      >
+        Sign In Anonymously <VenetianMask />
+      </PlainButton>
+      {error && <p className="dark:text-red-500">{error}</p>}
+    </>
+  );
+}

src/middleware.ts

@@ -34,8 +34,8 @@ export async function middleware(req: NextRequest) {
   // if the path is only for unauthenticated users, we only allow unauthenticated users
   if (isPathUnauthenticated) {
     if (session) {
-      console.log({ session });
       console.log("path is protected for authenticated users, redirecting");
+      console.log(req.nextUrl.origin);
       return NextResponse.redirect(`${req.nextUrl.origin}/`);
     } else {
       return res;