chore(Auth): remove Clerk

JSConfCL · Mar 31, 2024 · 04d1197 · 04d1197
1 parent f8ea687
commit 04d1197
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 110 deletions.
diff --git a/app/(transition)/layout.tsx b/app/(transition)/layout.tsx
@@ -1,30 +1,40 @@
 "use client";
-import { useAuth } from "@clerk/clerk-react";
 import { AnimatePresence, LazyMotion, domAnimation } from "framer-motion";
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
+
+import { createClient } from "@/utils/supabase/client";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
-  const { getToken } = useAuth();
+  const supabase = createClient();
 
   useEffect(() => {
     const start = async () => {
-      const token = await getToken({
-        template: "API_AUTH",
-      });
+      const { data } = await supabase.auth.getSession();
+      const accessToken = data?.session?.access_token;
+
       const localStorageKey = process.env.NEXT_PUBLIC_TOKEN_STORAGE_KEY;
-      if (!token || !localStorageKey) {
+      if (!accessToken || !localStorageKey) {
         return;
       }
+
       window.localStorage.setItem(
         process.env.NEXT_PUBLIC_TOKEN_STORAGE_KEY!,
-        token,
+        accessToken,
       );
-      console.log({ token });
+      console.log({ accessToken });
     };
+
+    const {
+      data: { subscription },
+    } = supabase.auth.onAuthStateChange((_event, session) => {});
+
     start().catch((e) => {
       console.error(e);
     });
+
+    return () => subscription.unsubscribe();
   }, []);
+
   return (
     <LazyMotion features={domAnimation}>
       <AnimatePresence mode="sync">{children}</AnimatePresence>

diff --git a/app/layout.tsx b/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>
   );
 }
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,7 +21,6 @@
     "@apollo/client": "^3.9.0-alpha.4",
     "@apollo/experimental-nextjs-app-support": "^0.5.1",
     "@auth0/nextjs-auth0": "^2.6.3",
-    "@clerk/clerk-react": "^4.28.0",
     "@heroicons/react": "^2.0.18",
     "@next/third-parties": "^14.0.4",
     "@radix-ui/react-dialog": "^1.0.4",