Lego/feat/supabase auth (#24)

Co-authored-by: Felipe Torres <[email protected]>
Co-authored-by: Felipe Torres (fforres) <[email protected]>

.env.local.example

@@ -1,4 +1,5 @@
 NEXT_PUBLIC_JSCL_API_URL='https://api.jsconf.dev/graphql'
 NEXT_PUBLIC_TOKEN_STORAGE_KEY='HS:token_storage_key'
-NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY='pk_test_ZnVua3ktZ3JpZmZvbi04NC5jbGVyay5hY2NvdW50cy5kZXYk'
 NEXT_PUBLIC_GOOGLE_MAPS_KEY='your_google_maps_key_here'
+NEXT_PUBLIC_SUPABASE_URL='your_supabase_url'
+NEXT_PUBLIC_SUPABASE_ANON_KEY='your_supabase_key'

app/(transition)/(root)/events/[id]/page.tsx

@@ -1,5 +1,4 @@
-import { gql } from "@apollo/client";
-import { getApolloClient } from "@/api/ApolloClient";
+import { getApolloClientForRSC } from "@/api/ApolloClientForRSC";
 import { MapPinIcon } from "@heroicons/react/24/outline";
 import { Attendees } from "@/components/Event/Attendees/Attendees";
 import { Hero } from "@/components/Event/Hero/Hero";
@@ -11,30 +10,23 @@ import { EventType, PageProps } from "./types";
 import { GetEventDocument } from "./getEvent.generated";
 
 export default async function Event({ searchParams }: PageProps) {
-  const c = getApolloClient();
+  const c = getApolloClientForRSC();
   const { id } = searchParams;
 
   const { data, error } = await c.query<EventType>({
     query: GetEventDocument,
     variables: {
-      input: id
-    }
+      input: id,
+    },
   });
 
   if (error) return <h2>Ocurrió un error cargando el evento</h2>;
-  
+
   const { event } = data;
 
   if (!event) return <h2>No pudimos encontrar el evento que estás buscando</h2>;
 
-  const {
-    address,
-    community,
-    description,
-    name,
-    startDateTime,
-    users,
-  } = event;
+  const { address, community, description, name, startDateTime, users } = event;
 
   const eventDate = new Date(startDateTime).toLocaleString();
 

app/(transition)/(root)/login/page.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { NextPage } from "next";
+
+import { redirect } from "next/navigation";
+import { useEffect, useState } from "react";
+import { Auth } from "@supabase/auth-ui-react";
+import { ThemeSupa } from "@supabase/auth-ui-shared";
+import { supabaseClient } from "@/utils/supabase/client";
+import { useTheme } from "next-themes";
+import { useIsLoggedIn } from "@/utils/supabase/AuthProvider";
+
+const AuthPage: NextPage = () => {
+  const { resolvedTheme } = useTheme();
+  const [url, setUrl] = useState<string | undefined>();
+  useEffect(() => {
+    const url = new URL(window.location.href);
+    url.pathname = "/";
+    url.hash = "";
+    setUrl(url.toString());
+  }, []);
+
+  const isLoggedIn = useIsLoggedIn();
+  if (isLoggedIn) {
+    redirect("/");
+  }
+
+  return (
+    <div className="min-h-[calc(100dvh-57px)] w-full bg-muted px-4 pt-8">
+      <div className="m-auto flex w-full max-w-lg shrink-0 flex-col gap-4 rounded-2xl bg-background p-10 shadow-xl">
+        <div>
+          <h1 className="text-left text-2xl font-bold">Regístrate.</h1>
+          <p className="text-left text-sm text-muted-foreground">
+            Mantente al tanto de las novedades de JavaScript Chile.
+          </p>
+        </div>
+
+        <Auth
+          providers={["github", "twitter"]}
+          supabaseClient={supabaseClient}
+          socialLayout="horizontal"
+          showLinks={false}
+          view="magic_link"
+          redirectTo={url}
+          localization={{
+            variables: {
+              magic_link: {
+                email_input_label: "Correo electrónico",
+                email_input_placeholder: "Ingresa tu correo electrónico",
+                button_label: "Enviar enlace mágico ✨",
+                confirmation_text: "Revisa tu correo electrónico",
+                empty_email_address: "Debes ingresar un correo electrónico",
+                loading_button_label: "Enviando...",
+              },
+            },
+          }}
+          appearance={{
+            theme: ThemeSupa,
+            variables: {
+              default: {
+                colors: {
+                  brand: "#000",
+                  brandAccent: "#2a2a2a",
+                },
+              },
+            },
+          }}
+          theme={resolvedTheme}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default AuthPage;

app/(transition)/(root)/page.tsx

@@ -1,12 +1,12 @@
-import { getApolloClient } from "../../../src/api/ApolloClient";
+import { getApolloClientForRSC } from "../../../src/api/ApolloClientForRSC";
 import { LandingPageEvents } from "../../../src/components/features/LandingPageEvents";
 import {
   FetchExampleEventsDocument,
   FetchExampleEventsQuery,
 } from "../../../src/components/features/LandingPageEvents/graphql/FetchExampleEvents.generated";
 
 export default async function Home() {
-  const c = getApolloClient();
+  const c = getApolloClientForRSC();
   const variable = await c.query<FetchExampleEventsQuery>({
     query: FetchExampleEventsDocument,
   });
@@ -18,13 +18,13 @@ export default async function Home() {
         </h1>
       </div>
       <div className="flex flex-col gap-4">
-        <h1>RSC</h1>
+        <h1 className="text-3xl">RSC</h1>
         {variable.data?.events?.map((event) => (
           <div key={event.id}>{event.id}</div>
         ))}
       </div>
       <div className="flex flex-col gap-4">
-        <h1>Client fetching</h1>
+        <h1 className="text-3xl">Client fetching</h1>
         <LandingPageEvents />
       </div>
     </main>

app/(transition)/layout.tsx

@@ -1,34 +1,16 @@
 "use client";
-import { useAuth } from "@clerk/clerk-react";
 import { AnimatePresence, LazyMotion, domAnimation } from "framer-motion";
-import React, { useEffect } from "react";
+import React from "react";
 
-export default function Layout({ children }: { children: React.ReactNode }) {
-  const { getToken } = useAuth();
+import { AuthProvider } from "@/utils/supabase/AuthProvider";
 
-  useEffect(() => {
-    const start = async () => {
-      const token = await getToken({
-        template: "API_AUTH",
-      });
-      const localStorageKey = process.env.NEXT_PUBLIC_TOKEN_STORAGE_KEY;
-      if (!token || !localStorageKey) {
-        return;
-      }
-      window.localStorage.setItem(
-        process.env.NEXT_PUBLIC_TOKEN_STORAGE_KEY!,
-        token,
-      );
-      console.log({ token });
-    };
-    start().catch((e) => {
-      console.error(e);
-    });
-  }, []);
+export default function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <LazyMotion features={domAnimation}>
-      <AnimatePresence mode="sync">{children}</AnimatePresence>
-    </LazyMotion>
+    <AuthProvider>
+      <LazyMotion features={domAnimation}>
+        <AnimatePresence mode="sync">{children}</AnimatePresence>
+      </LazyMotion>
+    </AuthProvider>
   );
 }
 

app/layout.tsx

@@ -3,7 +3,6 @@ import { Inter, Roboto } from "next/font/google";
 import classNames from "classnames";
 import { ThemeProvider } from "@/components/providers";
 import { ApolloWrapper } from "../src/api/ApolloWrapper";
-import { Clerk } from "../src/components/Auth/clerk";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -29,27 +28,20 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <Clerk>
-      <html lang="es" className="h-[100dvh] bg-slate-950">
-        <body
-          className={classNames(
-            inter.variable,
-            roboto.variable,
-          )}
-        >
-          <ApolloWrapper>
-            <ThemeProvider
-              attribute="class"
-              defaultTheme="system"
-              enableSystem
-              disableTransitionOnChange
-            >
-              {children}
-            </ThemeProvider>
-          </ApolloWrapper>
-        </body>
-      </html>
-    </Clerk>
+    <html lang="es" className="h-[100dvh] bg-slate-950">
+      <body className={classNames(inter.variable, roboto.variable)}>
+        <ApolloWrapper>
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="system"
+            enableSystem
+            disableTransitionOnChange
+          >
+            {children}
+          </ThemeProvider>
+        </ApolloWrapper>
+      </body>
+    </html>
   );
 }