Bump next to v14.1 and deprecated next-auth-helpers in favor of @supa…

…base/ssr

app/[locale]/Providers.tsx

@@ -14,7 +14,11 @@ interface Props {
 function Providers({ locale, messages, children }: Props) {
   return (
     <ReactQueryProvider>
-      <NextIntlClientProvider locale={locale} messages={messages}>
+      <NextIntlClientProvider
+        locale={locale}
+        messages={messages}
+        timeZone={"America/Sao_Paulo"}
+      >
         <ThemeProvider attribute="class">{children}</ThemeProvider>
       </NextIntlClientProvider>
     </ReactQueryProvider>

app/[locale]/[id]/page.tsx

@@ -1,9 +1,10 @@
+import { cookies } from "next/headers";
 import { notFound } from "next/navigation";
 
 import HighlineImage from "@/components/HighlineImage";
 import RegistryEntry from "@/components/RegistryEntry";
 import Tabs from "@/components/tabs/Tabs";
-import supabase from "@/utils/supabase";
+import { useSupabaseServer } from "@/utils/supabase/server";
 
 import GoBack from "./_components/GoBack";
 
@@ -14,6 +15,9 @@ export default async function Highline({
 }: {
   params: { id: string };
 }) {
+  const cookieStore = cookies();
+  const supabase = useSupabaseServer(cookieStore);
+
   const { data: highline } = await supabase
     .from("highline")
     .select()

app/[locale]/_components/UsernameDialog.tsx

@@ -1,10 +1,7 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import {
-  createClientComponentClient,
-  User,
-} from "@supabase/auth-helpers-nextjs";
+import type { User } from "@supabase/supabase-js";
 import { useTranslations } from "next-intl";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
@@ -29,7 +26,7 @@ import {
 } from "@/components/ui/Form";
 import { Input } from "@/components/ui/Input";
 import { useRouter } from "@/navigation";
-import { Database } from "@/utils/database.types";
+import useSupabaseBrowser from "@/utils/supabase/client";
 
 const formSchema = z.object({
   username: z
@@ -44,7 +41,7 @@ const formSchema = z.object({
 type FormSchema = z.infer<typeof formSchema>;
 
 export default function UsernameDialog() {
-  const supabase = createClientComponentClient<Database>();
+  const supabase = useSupabaseBrowser();
 
   const t = useTranslations("usernameDialog");
   const router = useRouter();

app/[locale]/auth/callback/route.ts

@@ -1,11 +1,10 @@
 // Refer to the following documentation for more context
 // https://supabase.com/docs/guides/auth/auth-helpers/nextjs#managing-sign-in-with-code-exchange
 
-import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs";
 import { cookies } from "next/headers";
 import { NextResponse } from "next/server";
 
-import { Database } from "@/utils/database.types";
+import { useSupabaseServer } from "@/utils/supabase/server";
 
 export const dynamic = "force-dynamic";
 
@@ -18,9 +17,9 @@ export async function GET(request: Request) {
 
   if (code) {
     const cookieStore = cookies();
-    const supabase = createRouteHandlerClient<Database>({
-      cookies: () => cookieStore,
-    });
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const supabase = useSupabaseServer(cookieStore);
+
     await supabase.auth.exchangeCodeForSession(code);
   }
 

app/[locale]/page.tsx

@@ -1,9 +1,7 @@
-import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
 import { cookies } from "next/headers";
-import { unstable_setRequestLocale } from "next-intl/server";
 
 import Highline from "@/components/Highline";
-import { Database } from "@/utils/database.types";
+import { useSupabaseServer } from "@/utils/supabase/server";
 
 import Search from "./_components/search";
 
@@ -17,9 +15,7 @@ export default async function Home({
   searchParams?: { [key: string]: string | string[] | undefined };
 }) {
   const cookieStore = cookies();
-  const supabase = createServerComponentClient<Database>({
-    cookies: () => cookieStore,
-  });
+  const supabase = useSupabaseServer(cookieStore);
 
   const { q: searchValue } = searchParams as {
     [key: string]: string;

app/[locale]/profile/[username]/_components/LastWalks.tsx

@@ -1,5 +1,4 @@
 import { ChevronRightIcon } from "@radix-ui/react-icons";
-import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
 import { cookies } from "next/headers";
 import Link from "next/link";
 import { useTranslations } from "next-intl";
@@ -10,8 +9,9 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/Popover";
-import { Database } from "@/utils/database.types";
 import { transformSecondsToTimeString } from "@/utils/helperFunctions";
+import type { Database } from "@/utils/supabase/database.types";
+import { useSupabaseServer } from "@/utils/supabase/server";
 
 import FormattedDate from "./FormattedDate";
 
@@ -23,9 +23,7 @@ interface Props {
 
 export default async function LastWalks({ username }: Props) {
   const cookieStore = cookies();
-  const supabase = createServerComponentClient<Database>({
-    cookies: () => cookieStore,
-  });
+  const supabase = useSupabaseServer(cookieStore);
 
   const { data: entries } = await supabase
     .from("entry")

app/[locale]/profile/[username]/_components/UserHeader.tsx

@@ -1,9 +1,9 @@
-import { User } from "@supabase/auth-helpers-nextjs";
+import { User } from "@supabase/supabase-js";
 import Image from "next/image";
 import { useTranslations } from "next-intl";
 
 import UpdateProfile from "@/components/layout/navbar/UpdateProfile";
-import { Database } from "@/utils/database.types";
+import { Database } from "@/utils/supabase/database.types";
 
 interface Props {
   user: User | null;

app/[locale]/profile/[username]/page.tsx

@@ -1,10 +1,9 @@
-import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
 import type { Metadata, ResolvingMetadata } from "next";
 import { cookies } from "next/headers";
 import { getTranslations } from "next-intl/server";
 import { Suspense } from "react";
 
-import { Database } from "@/utils/database.types";
+import { useSupabaseServer } from "@/utils/supabase/server";
 
 import GoBack from "./_components/GoBack";
 import LastWalks, { LastWalksSkeleton } from "./_components/LastWalks";
@@ -32,9 +31,7 @@ export async function generateMetadata(
 
 export default async function Profile({ params: { username } }: Props) {
   const cookieStore = cookies();
-  const supabase = createServerComponentClient<Database>({
-    cookies: () => cookieStore,
-  });
+  const supabase = useSupabaseServer(cookieStore);
 
   const {
     data: { user },

components/CreateHighline.tsx

@@ -10,10 +10,11 @@ import { z } from "zod";
 
 import { PlusSvg } from "@/assets";
 import { Link } from "@/navigation";
-import supabase, {
+import useSupabaseBrowser from "@/utils/supabase/client";
+import {
   ACCEPTED_IMAGE_TYPES,
   MAX_FILE_SIZE,
-} from "@/utils/supabase";
+} from "@/utils/supabase/constants";
 
 import { SuccessAnimation } from "./animations/SuccessAnimation";
 import Button from "./ui/Button";
@@ -66,6 +67,8 @@ const formSchema = z.object({
 type FormSchema = z.infer<typeof formSchema>;
 
 const CreateHighline = () => {
+  const supabase = useSupabaseBrowser();
+
   const t = useTranslations("home.newHighline");
   const [dialogOpen, setDialogOpen] = useState(false);
   const [newHighlineUUID, setNewHighlineUUID] = useState<string | null>(null);

components/Highline.tsx

@@ -2,7 +2,7 @@ import { useTranslations } from "next-intl";
 
 import { ArrowIcon } from "@/assets";
 import { Link } from "@/navigation";
-import type { Tables } from "@/utils/supabase";
+import type { Tables } from "@/utils/supabase/database.types";
 
 import HighlineImage from "./HighlineImage";
 

components/RegistryEntry.tsx

@@ -9,7 +9,7 @@ import { z } from "zod";
 
 import { PlusSvg } from "@/assets";
 import { transformTimeStringToSeconds } from "@/utils/helperFunctions";
-import supabase from "@/utils/supabase";
+import useSupabaseBrowser from "@/utils/supabase/client";
 
 import { SuccessAnimation } from "./animations/SuccessAnimation";
 import Button from "./ui/Button";
@@ -73,8 +73,9 @@ interface Props {
 }
 
 const CreateHighline = ({ highlineId, highlineDistance }: Props) => {
-  const [dialogOpen, setDialogOpen] = useState(false);
+  const supabase = useSupabaseBrowser();
 
+  const [dialogOpen, setDialogOpen] = useState(false);
   const t = useTranslations("highline.registry");
   const queryClient = useQueryClient();
 

components/layout/navbar/ProfileMenu.tsx

@@ -1,29 +1,30 @@
-import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
-import { cookies } from "next/headers";
+"use client";
+
+import { User } from "@supabase/supabase-js";
 import { useTranslations } from "next-intl";
 
-import { UserCircleIcon } from "@/assets";
+import { LogOutIcon, UserCircleIcon } from "@/assets";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/DropdownMenu";
-import { Link } from "@/navigation";
+import { Link, useRouter } from "@/navigation";
+import useSupabaseBrowser from "@/utils/supabase/client";
 
-import SignOut from "./SignOut";
-import UpdateProfile from "./UpdateProfile";
+export default async function ProfileMenu({ user }: { user: User }) {
+  const supabase = useSupabaseBrowser();
+  const t = useTranslations("profileMenu");
+  const router = useRouter();
 
-export default async function ProfileMenu() {
-  const cookieStore = cookies();
-  const supabase = createServerComponentClient({
-    cookies: () => cookieStore,
-  });
+  const username: string | null = user.user_metadata["username"];
 
-  const {
-    data: { user },
-  } = await supabase.auth.getUser();
+  const signOut = async () => {
+    await supabase.auth.signOut();
+    router.refresh();
+  };
 
   return (
     <DropdownMenu>
@@ -38,24 +39,19 @@ export default async function ProfileMenu() {
         sideOffset={8}
         className="max-w-[12rem] overflow-hidden"
       >
-        <ProfileSection username={user?.user_metadata["username"]} />
+        {username ? (
+          <DropdownMenuItem asChild>
+            <Link href={`/profile/${username.replace("@", "")}`}>
+              {t("myProfile")}
+            </Link>
+          </DropdownMenuItem>
+        ) : null}
         <DropdownMenuSeparator />
-        <SignOut />
+        <DropdownMenuItem className="flex justify-between" onClick={signOut}>
+          <span>{t("signOut")}</span>
+          <LogOutIcon className="h-4 w-4 dark:text-white" />
+        </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
   );
 }
-
-function ProfileSection({ username }: { username: string | null }) {
-  const t = useTranslations("profileMenu");
-
-  if (!username) return null;
-
-  return (
-    <DropdownMenuItem asChild>
-      <Link href={`/profile/${username.replace("@", "")}`}>
-        {t("myProfile")}
-      </Link>
-    </DropdownMenuItem>
-  );
-}

components/layout/navbar/SignUp.tsx

@@ -25,7 +25,7 @@ import {
   FormMessage,
 } from "@/components/ui/Form";
 import { Input } from "@/components/ui/Input";
-import supabase from "@/utils/supabase";
+import useSupabaseBrowser from "@/utils/supabase/client";
 
 const formSchema = z.object({
   email: z.string().email(),
@@ -34,6 +34,7 @@ const formSchema = z.object({
 type FormSchema = z.infer<typeof formSchema>;
 
 function SignUp() {
+  const supabase = useSupabaseBrowser();
   const t = useTranslations();
   const [step, setStep] = useState<"initial" | "email" | "inbox">("initial");
   const form = useForm<FormSchema>({

components/layout/navbar/UpdateProfile.tsx

@@ -1,10 +1,7 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import {
-  createClientComponentClient,
-  User,
-} from "@supabase/auth-helpers-nextjs";
+import type { User } from "@supabase/supabase-js";
 import { useMutation } from "@tanstack/react-query";
 import { useTranslations } from "next-intl";
 import { useState } from "react";
@@ -29,7 +26,8 @@ import {
 import { Input } from "@/components/ui/Input";
 import { TextArea } from "@/components/ui/TextArea";
 import { useRouter } from "@/navigation";
-import { Database } from "@/utils/database.types";
+import useSupabaseBrowser from "@/utils/supabase/client";
+import { Database } from "@/utils/supabase/database.types";
 
 const formSchema = z.object({
   name: z.string().min(3, "Deve conter ao menos 3 caracteres"),
@@ -49,7 +47,7 @@ export default function UpdateProfile({
 
   const t = useTranslations("updateProfile");
   const router = useRouter();
-  const supabase = createClientComponentClient<Database>();
+  const supabase = useSupabaseBrowser();
   const profileForm = useForm<FormSchema>({
     mode: "onTouched",
     resolver: zodResolver(formSchema),