feat: ✨ messing around with revalidatePath and Tag

Author: moinulmoin

package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "dev": "prisma generate && next dev --turbo",
+    "dev": "prisma generate && next dev",
     "dev:email": "email dev -p 9000",
     "dev:content": "velite build --watch",
     "build:content": "velite build --clean",
@@ -15,7 +15,6 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.1",
-    "@lucia-auth/adapter-prisma": "4.0.1",
     "@oslojs/crypto": "^1.0.1",
     "@oslojs/encoding": "^1.1.0",
     "@prisma/client": "^5.22.0",

pnpm-lock.yaml

@@ -9,6 +9,7 @@ import { getCurrentSession, invalidateSession } from "~/lib/session";
 
 export async function logout() {
   const { session } = await getCurrentSession();
+
   if (!session) {
     return {
       message: "Unauthorized",

src/actions/auth.ts

@@ -1,18 +1,18 @@
 "use server";
 
-import { revalidatePath } from "next/cache";
+import { revalidateTag } from "next/cache";
+import prisma from "~/lib/prisma";
 import { utapi } from "~/lib/uploadthing-server";
 import { getImageKeyFromUrl, isOurCdnUrl } from "~/lib/utils";
 import { type payload } from "~/types";
-import prisma from "~/lib/prisma";
 
 export const updateUser = async (id: string, payload: payload) => {
   await prisma.user.update({
     where: { id },
     data: { ...payload },
   });
 
-  revalidatePath("/dashboard/settings");
+  revalidateTag("session");
 };
 
 export async function removeUserOldImageFromCDN(
@@ -24,7 +24,6 @@ export async function removeUserOldImageFromCDN(
       const currentImageFileKey = getImageKeyFromUrl(currentImageUrl);
 
       await utapi.deleteFiles(currentImageFileKey as string);
-      revalidatePath("/dashboard/settings");
     }
   } catch (e) {
     console.error(e);

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

@@ -40,7 +40,6 @@ export default function SettingsForm({ currentUser }: { currentUser: User }) {
 
   const form = useForm<SettingsValues>({
     resolver: zodResolver(settingsSchema),
-    mode: "onChange",
     defaultValues: {
       name: currentUser.name ?? "",
       email: currentUser.email ?? "",
@@ -51,15 +50,22 @@ export default function SettingsForm({ currentUser }: { currentUser: User }) {
   const { formState, getFieldState, handleSubmit, reset, getValues } = form;
   const { isDirty: isImageChanged } = getFieldState("picture");
 
+  useEffect(() => {
+    reset({
+      name: currentUser.name ?? "",
+      email: currentUser.email ?? "",
+      picture: currentUser.picture ?? "",
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentUser]);
+
   useEffect(() => {
     if (isImageChanged && currentUser.picture !== oldImage.current) {
       oldImage.current = currentUser.picture ?? "";
     }
   }, [currentUser.picture, isImageChanged]);
 
   const onSubmit = handleSubmit((data: SettingsValues) => {
-    if (!formState.isDirty) return;
-
     startTransition(async () => {
       try {
         if (currentUser.picture && isImageChanged) {
@@ -68,7 +74,7 @@ export default function SettingsForm({ currentUser }: { currentUser: User }) {
         await updateUser(currentUser.id, data);
         toast({ title: "Updated successfully!" });
       } catch (error) {
-        console.error(error);
+        console.log(JSON.stringify(error));
         toast({ title: "Something went wrong.", variant: "destructive" });
       }
     });
@@ -90,8 +96,6 @@ export default function SettingsForm({ currentUser }: { currentUser: User }) {
     [formState.isSubmitting, isPending, formState.isDirty]
   );
 
-  console.log(formState.isSubmitting, isPending, !formState.isDirty);
-
   return (
     <Form {...form}>
       <form

src/app/[locale]/dashboard/settings/settings-form.tsx

@@ -1,4 +1,6 @@
-import { OAuth2RequestError } from "arctic";
+import { PrismaClientKnownRequestError } from "@prisma/client/runtime/library";
+import { ArcticFetchError, OAuth2RequestError } from "arctic";
+import { revalidatePath } from "next/cache";
 import { cookies } from "next/headers";
 import { sendWelcomeEmail } from "~/actions/mail";
 import { setSessionTokenCookie } from "~/lib/cookies";
@@ -26,6 +28,7 @@ export const GET = async (request: Request) => {
       },
     });
     const githubUser: GitHubUser = await githubUserResponse.json();
+
     if (!githubUser.email) {
       const githubEmailsResponse = await fetch(
         "https://api.github.com/user/emails",
@@ -46,17 +49,30 @@ export const GET = async (request: Request) => {
       if (verifiedEmail) githubUser.email = verifiedEmail.email;
     }
 
-    const existingUser = await prisma.user.findUnique({
+    const existingUser = await prisma.user.findFirst({
       where: {
-        githubId: githubUser.id,
+        OR: [
+          {
+            githubId: githubUser.id,
+          },
+          {
+            email: githubUser.email,
+          },
+        ],
       },
     });
 
     if (existingUser) {
       const sessionTokenCookie = generateSessionToken();
       const session = await createSession(sessionTokenCookie, existingUser.id);
-      setSessionTokenCookie(sessionTokenCookie, session.expiresAt);
-      return Response.redirect("/dashboard");
+      await setSessionTokenCookie(sessionTokenCookie, session.expiresAt);
+      revalidatePath("/dashboard", "layout");
+      return new Response(null, {
+        status: 302,
+        headers: {
+          Location: "/dashboard",
+        },
+      });
     }
 
     const newUser = await prisma.user.create({
@@ -68,27 +84,44 @@ export const GET = async (request: Request) => {
         emailVerified: Boolean(githubUser.email),
       },
     });
+
     if (githubUser.email) {
       sendWelcomeEmail({ toMail: newUser.email!, userName: newUser.name! });
     }
     const sessionTokenCookie = generateSessionToken();
     const session = await createSession(sessionTokenCookie, newUser.id);
     await setSessionTokenCookie(sessionTokenCookie, session.expiresAt);
+    revalidatePath("/dashboard", "layout");
     return new Response(null, {
       status: 302,
       headers: {
         Location: "/dashboard",
       },
     });
   } catch (e) {
-    console.log(e);
+    console.log(JSON.stringify(e));
+
     // the specific error message depends on the provider
     if (e instanceof OAuth2RequestError) {
       // invalid code
-      return new Response(null, {
+      return new Response(e.description, {
         status: 400,
       });
     }
+
+    if (e instanceof ArcticFetchError) {
+      // invalid code
+      return new Response(e.message, {
+        status: 400,
+      });
+    }
+
+    if (e instanceof PrismaClientKnownRequestError) {
+      return new Response(e.message, {
+        status: 400,
+      });
+    }
+
     return new Response("Internal Server Error", {
       status: 500,
     });

src/app/api/auth/login/github/callback/route.ts

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

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

@@ -74,9 +74,11 @@ export default function AuthForm() {
       });
       setCountdown(30);
     } catch (error) {
+      const errorMessage =
+        error instanceof Error ? error.message : "Something went wrong";
       toast({
         title: "Failed to send OTP",
-        description: "Please try again later",
+        description: errorMessage,
         variant: "destructive",
       });
     } finally {
@@ -98,12 +100,11 @@ export default function AuthForm() {
         throw new Error(await res.text());
       }
       setCountdown(0);
-
+      reset();
       toast({
         title: "Successfully verified!",
       });
-
-      router.push("/dashboard");
+      window.location.href = "/dashboard";
     } catch (error) {
       const errorMessage =
         error instanceof Error ? error.message : "Something went wrong";
@@ -216,14 +217,14 @@ export default function AuthForm() {
               disabled={isVerifying || otp.length !== 6}
               className="mt-4"
             >
-              {isLoading && (
+              {isVerifying && (
                 <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />
               )}
               Verify OTP
             </Button>
           </form>
           <div className="mt-4 flex items-center justify-between text-sm text-gray-600">
-            <span>Didn&apos;t receive the code / expired?</span>
+            <span>Didn&apos;t receive the code/expired?</span>
             {countdown > 0 ? (
               <span>Resend in {countdown}s</span>
             ) : (
@@ -233,7 +234,7 @@ export default function AuthForm() {
                 className="h-auto p-0"
                 disabled={isLoading}
               >
-                Resend OTP
+                {isLoading ? "Resending..." : "Resend"}
               </Button>
             )}
           </div>

src/components/layout/auth-form.tsx

@@ -5,7 +5,8 @@ import {
 } from "@oslojs/encoding";
 import type { Session, User } from "@prisma/client";
 import { cookies } from "next/headers";
-import { cache } from "react";
+// import { cache } from "react";
+import { unstable_cache as cache } from "next/cache";
 import prisma from "./prisma";
 
 export function generateSessionToken(): string {
@@ -65,18 +66,25 @@ export async function validateSessionToken(
   return { session, user };
 }
 
-export const getCurrentSession = cache(
-  async (): Promise<SessionValidationResult> => {
-    const cookieStore = await cookies();
-    const token = cookieStore.get("session")?.value ?? null;
+export const getSession = cache(
+  async (token: string | null): Promise<SessionValidationResult> => {
     if (token === null) {
       return { session: null, user: null };
     }
-    const result = await validateSessionToken(token);
-    return result;
+    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);
+};
+
 export async function invalidateSession(sessionId: string): Promise<void> {
   await prisma.session.delete({ where: { id: sessionId } });
 }