Merge pull request #57 from emiliosheinz/fix/auth

fix: call getProviders on client side

src/app/page.tsx

@@ -2,24 +2,13 @@
 import { Card } from "~/components/card/";
 import { SearchInput } from "~/components/search-input";
 import { api } from "~/trpc/react";
-import { Filters } from "~/components/filters";
 import Fuse from "fuse.js";
 import { useMemo } from "react";
 import { Skeleton } from "~/components/ui/skeleton";
 import { useDebouncedState } from "~/hooks/use-debouced-state";
 import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
 import { FiInfo } from "react-icons/fi";
 
-const menus = [
-  {
-    label: "Disponibilidade",
-    items: [
-      { label: "Com vagas", checked: true },
-      { label: "Sem vagas", checked: false },
-    ],
-  },
-];
-
 export default function Home() {
   const { data, isLoading } = api.shelter.findAll.useQuery();
   const [searchTerm, setSearchTerm] = useDebouncedState("", 300);

src/app/signin/_components/AuthenticationProviders.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { getProviders } from "next-auth/react";
+import { useEffect, useMemo, useState } from "react";
+import { SignInProviderButton } from "./SignInProviderButton";
+import { EmailProviderForm } from "./EmailProviderForm";
+import { Loader2 } from "lucide-react";
+import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
+import { FiAlertTriangle } from "react-icons/fi";
+
+type GetProvidersState = "idle" | "loading" | "success" | "error";
+
+type AuthenticationProvidersProps = {
+  callbackUrl?: string;
+};
+
+export function AuthenticationProviders({
+  callbackUrl,
+}: AuthenticationProvidersProps) {
+  const [providers, setProviders] =
+    useState<Awaited<ReturnType<typeof getProviders>>>();
+  const [getProvidersState, setGetProvidersState] =
+    useState<GetProvidersState>("idle");
+
+  useEffect(() => {
+    setGetProvidersState("loading");
+    getProviders()
+      .then((providers) => {
+        setProviders(providers);
+        setGetProvidersState("success");
+      })
+      .catch(() => {
+        setGetProvidersState("error");
+      });
+  }, []);
+
+  const [emailProvider, otherProviders] = useMemo(() => {
+    if (!providers) return [null, null];
+    const email = providers.email;
+    const other = Object.values(providers).filter(
+      (provider) => provider.id !== "email",
+    );
+    return [email, other];
+  }, [providers]);
+
+  if (["loading", "idle"].includes(getProvidersState)) {
+    return <Loader2 className="mt-10 size-8 animate-spin" />;
+  }
+
+  if (getProvidersState === "error") {
+    return (
+      <Alert variant="destructive">
+        <FiAlertTriangle className="h-4 w-4" />
+        <AlertTitle>Erro ao carregar provedores de login</AlertTitle>
+        <AlertDescription>
+          <span>Por favor, entre em contato com o nosso suporte em&nbsp;</span>
+          <a href="mailto:[email protected]">[email protected]</a>
+        </AlertDescription>
+      </Alert>
+    );
+  }
+
+  return (
+    <div className="mt-5 w-full">
+      {otherProviders?.map((provider) => (
+        <SignInProviderButton
+          key={provider.id}
+          provider={provider}
+          callbackUrl={callbackUrl ?? "/"}
+        />
+      ))}
+      {!!emailProvider && <EmailProviderForm />}
+    </div>
+  );
+}

src/app/signin/page.tsx

@@ -1,44 +1,23 @@
-import {
-  type ClientSafeProvider,
-  type LiteralUnion,
-  getProviders,
-} from "next-auth/react";
 import { redirect } from "next/navigation";
 import { getServerAuthSession } from "~/server/auth";
-import { SignInProviderButton } from "./_components/SignInProviderButton";
 import Image from "next/image";
 import { Suspense } from "react";
 import { Loader2 } from "lucide-react";
-import { EmailProviderForm } from "./_components/EmailProviderForm";
 import { Alert, AlertDescription, AlertTitle } from "~/components/ui/alert";
 import { FiAlertTriangle } from "react-icons/fi";
+import { AuthenticationProviders } from "./_components/AuthenticationProviders";
 
 type SignInPageProps = {
   searchParams: Record<string, string>;
 };
 
-const splitProviders = (
-  providers: Awaited<ReturnType<typeof getProviders>>,
-): [ClientSafeProvider | null, ClientSafeProvider[]] | [null, null] => {
-  if (!providers) return [null, null];
-  const email = providers.email;
-  const other = Object.values(providers).filter(
-    (provider) => provider.id !== "email",
-  );
-  return [email, other];
-};
-
 export default async function SignInPage({ searchParams }: SignInPageProps) {
-  const [session, providers] = await Promise.all([
-    getServerAuthSession(),
-    getProviders(),
-  ]);
+  const session = await getServerAuthSession();
 
   if (session) {
     redirect(searchParams.callbackUrl ?? "/");
   }
 
-  const [emailProvider, otherProviders] = splitProviders(providers);
   const hasError = !!searchParams.error;
 
   return (
@@ -62,16 +41,7 @@ export default async function SignInPage({ searchParams }: SignInPageProps) {
           </AlertDescription>
         </Alert>
       )}
-      <div className="w-full">
-        {otherProviders?.map((provider) => (
-          <SignInProviderButton
-            key={provider.id}
-            provider={provider}
-            callbackUrl={searchParams.callbackUrl ?? "/"}
-          />
-        ))}
-        {!!emailProvider && <EmailProviderForm />}
-      </div>
+      <AuthenticationProviders />
     </Suspense>
   );
 }

src/components/header/nav/index.tsx

@@ -1,5 +1,4 @@
 "use client";
-import { useRouter } from "next/navigation";
 
 import { Button } from "~/components/ui/button";
 import { useSession, signOut } from "next-auth/react";

src/components/header/user/index.tsx

@@ -1,7 +1,7 @@
 "use client";
 import Image from "next/image";
 
-import { useSession, signIn } from "next-auth/react";
+import { useSession } from "next-auth/react";
 
 import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
 import { Button } from "~/components/ui/button";

src/server/auth/index.ts

@@ -1,6 +1,5 @@
 import { PrismaAdapter } from "@auth/prisma-adapter";
 import {
-  type Theme,
   getServerSession,
   type DefaultSession,
   type NextAuthOptions,