refactor: ♻️ update auth flow and UI components

- Update login verification and OTP handling- Modify auth form and login modal components- Update
dashboard settings actions- Refactor session management- Enhance header and pricing section
components"

Author: moinulmoin

src/app/[locale]/@loginDialog/(.)login/page.tsx

@@ -1,5 +1,9 @@
+import { redirect } from "next/navigation";
 import LoginModal from "~/components/layout/login-modal";
+import { getCurrentSession } from "~/lib/session";
 
 export default async function Login() {
+  const { session } = await getCurrentSession();
+  if (session) return redirect("/dashboard");
   return <LoginModal />;
 }

src/app/[locale]/dashboard/settings/actions.ts

@@ -1,6 +1,6 @@
 "use server";
 
-import { revalidateTag } from "next/cache";
+import { revalidatePath, revalidateTag } from "next/cache";
 import prisma from "~/lib/prisma";
 import { utapi } from "~/lib/uploadthing-server";
 import { getImageKeyFromUrl, isOurCdnUrl } from "~/lib/utils";
@@ -12,7 +12,7 @@ export const updateUser = async (id: string, payload: payload) => {
     data: { ...payload },
   });
 
-  revalidateTag("session");
+  revalidatePath("/dashboard/settings");
 };
 
 export async function removeUserOldImageFromCDN(

src/app/[locale]/login/page.tsx

@@ -5,7 +5,7 @@ import { getCurrentSession } from "~/lib/session";
 
 export default async function Login() {
   const { session } = await getCurrentSession();
-  if (session) redirect("/");
+  if (session) return redirect("/dashboard");
   return (
     <section>
       <div className="container">

src/app/api/auth/login/verify-otp/route.ts

@@ -1,4 +1,4 @@
-import { revalidateTag } from "next/cache";
+import { revalidatePath } from "next/cache";
 import { verifyVerificationCode } from "~/actions/auth";
 import { setSessionTokenCookie } from "~/lib/cookies";
 import prisma from "~/lib/prisma";
@@ -55,7 +55,7 @@ export const POST = async (req: Request, response: Response) => {
     const sessionToken = generateSessionToken();
     const session = await createSession(sessionToken, user.id);
     await setSessionTokenCookie(sessionToken, session.expiresAt);
-    revalidateTag("session");
+    revalidatePath("/", "layout");
     return new Response(null, {
       status: 200,
     });

src/components/layout/auth-form.tsx

@@ -2,7 +2,6 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import Link from "next/link";
-import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
@@ -21,7 +20,6 @@ const userAuthSchema = z.object({
 type FormData = z.infer<typeof userAuthSchema>;
 
 export default function AuthForm() {
-  const router = useRouter();
   const [currentStep, setCurrentStep] = useState(1);
   const [isLoading, setIsLoading] = useState(false);
   const [isGithubLoading, setIsGithubLoading] = useState(false);
@@ -180,9 +178,11 @@ export default function AuthForm() {
       )}
       {currentStep === 2 && (
         <>
-          <p className="mb-4 text-balance">
-            We&apos;ve sent a 6-digit code to your email. Please enter it below
-            to verify your account.
+          <p className="mb-4">
+            <span className="whitespace-nowrap">
+              We&apos;ve sent a 6-digit code to {getValues("email")}
+            </span>{" "}
+            Please enter it below to verify your account.
           </p>
           <form
             onSubmit={handleSubmit(onOTPSubmit)}

src/components/layout/header/index.tsx

@@ -1,8 +1,10 @@
 import { getCurrentSession } from "~/lib/session";
 import { getScopedI18n } from "~/locales/server";
 import Navbar from "./navbar";
+import { connection } from "next/server";
 
 export default async function Header() {
+  await connection();
   const { session } = await getCurrentSession();
   const scopedT = await getScopedI18n("header");
   const headerText = {

src/components/layout/login-modal.tsx

@@ -14,7 +14,6 @@ export default function LoginModal() {
   const pathname = usePathname();
 
   const IsOpen = pathname.includes("/login");
-
   return (
     <Dialog open={IsOpen} onOpenChange={() => router.back()}>
       <DialogContent className="w-full max-w-[400px] rounded-md">

src/components/sections/pricing.tsx

@@ -86,7 +86,10 @@ export default async function Pricing() {
               </p>
             </CardContent>
             <CardFooter className="justify-center">
-              <Link href="/login" className={buttonVariants()}>
+              <Link
+                href={user ? "/dashboard/billing" : "/login"}
+                className={buttonVariants()}
+              >
                 {!subscription
                   ? "Get Started"
                   : subscription?.isPro

src/lib/session.ts

@@ -5,8 +5,6 @@ import {
 } from "@oslojs/encoding";
 import type { Session, User } from "@prisma/client";
 import { cookies } from "next/headers";
-// import { cache } from "react";
-import { unstable_cache as cache } from "next/cache";
 import prisma from "./prisma";
 
 export function generateSessionToken(): string {
@@ -66,23 +64,13 @@ export async function validateSessionToken(
   return { session, user };
 }
 
-export const getSession = cache(
-  async (token: string | null): Promise<SessionValidationResult> => {
-    if (token === null) {
-      return { session: null, user: null };
-    }
-    return validateSessionToken(token);
-  },
-  ["session"],
-  {
-    tags: ["session"],
-  }
-);
-
 export const getCurrentSession = async (): Promise<SessionValidationResult> => {
   const cookieStore = await cookies();
   const token = cookieStore.get("session")?.value ?? null;
-  return getSession(token);
+  if (token === null) {
+    return { session: null, user: null };
+  }
+  return validateSessionToken(token);
 };
 
 export async function invalidateSession(sessionId: string): Promise<void> {