Kreber/add supabase auth

@/components/ui/button.tsx

@@ -0,0 +1,55 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

@/components/ui/card.tsx

@@ -0,0 +1,78 @@
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

app/components/GoogleLoginButton.tsx

@@ -0,0 +1,46 @@
+// import { SocialsProvider } from "remix-auth-socials";
+import { Form, useSearchParams } from "@remix-run/react";
+import { Button } from "../../@/components/ui/button";
+// import { Button } from "@/components/ui/button";
+
+// const GOGLE_ACTION_STRING = `/api/auth/${SocialsProvider.GOOGLE}`;
+const GOGLE_ACTION_STRING = `/api/auth/google`;
+
+const GoogleLoginButton = () => {
+  const [searchParams] = useSearchParams();
+  const redirectTo = searchParams.get("redirectTo") || "";
+
+  return (
+    <div className="px-6 sm:px-0">
+      <Form method="POST" action={GOGLE_ACTION_STRING}>
+        <input type="hidden" name="intent" value="user-log-in" />
+        <input type="hidden" name="redirectTo" value={redirectTo} />
+        <Button
+          type="submit"
+          // className="border-solid border-gray-600 flex w-full items-center justify-center gap-3 rounded-md bg-[#24292F] px-3 py-1.5 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#24292F]"
+          variant="outline"
+          className="w-full"
+        >
+          <svg
+            className="mr-2 -ml-1 w-4 h-4"
+            aria-hidden="true"
+            focusable="false"
+            data-prefix="fab"
+            data-icon="google"
+            role="img"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 488 512"
+          >
+            <path
+              fill="currentColor"
+              d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
+            ></path>
+          </svg>
+          Google
+        </Button>
+      </Form>
+    </div>
+  );
+};
+
+export default GoogleLoginButton;

app/hooks/useSupabaseClient.ts

@@ -0,0 +1,46 @@
+import React from "react";
+import { useRevalidator } from "@remix-run/react";
+import { createBrowserClient } from "@supabase/ssr";
+import type { Session } from "@supabase/supabase-js";
+// import type { Database } from "database.types";
+
+/**
+ * This code was referenced from the following tutorial:
+ * YouTube: https://youtu.be/ocWc_FFc5jE?si=70KZNTDwPLKZ7Pwz&t=5550
+ * Github Repo : https://github.com/rajeshdavidbabu/remix-supabase-social/blob/master/youtube%20course/app/lib/supabase.ts
+ */
+
+type SupabaseEnv = {
+  SUPABASE_URL: string;
+  SUPABASE_ANON_KEY: string;
+};
+
+type UseSupabase = {
+  env: SupabaseEnv;
+  serverSession: Session | null;
+};
+
+export const useSupabaseClient = ({ env, serverSession }: UseSupabase) => {
+  const [supabase] = React.useState(() =>
+  createBrowserClient(env.SUPABASE_URL, env.SUPABASE_ANON_KEY)
+  );
+  const serverAccessToken = serverSession?.access_token;
+  const revalidator = useRevalidator();
+
+  React.useEffect(() => {
+    const {
+      data: { subscription },
+    } = supabase.auth.onAuthStateChange((event, session) => {
+      if (session?.access_token !== serverAccessToken) {
+        // Revalidate the app.
+        revalidator.revalidate();
+      }
+    });
+
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [supabase.auth, serverAccessToken, revalidator]);
+
+  return { supabase };
+};

app/root.tsx

@@ -22,6 +22,8 @@ import { AuthenticityTokenProvider } from "remix-utils/csrf/react";
 import { HoneypotProvider } from "remix-utils/honeypot/react";
 import { honeypot } from "utils/honeypot.server";
 import { getToast, type Toast } from "utils/toast.server";
+import { getSupabaseEnv,  getSupabaseWithSessionAndHeaders } from "./services/supabase.server";
+import { useSupabaseClient } from "./hooks/useSupabaseClient";
 
 import "./tailwind.css";
 import "./globals.css";
@@ -33,6 +35,13 @@ export async function loader({ request }: LoaderFunctionArgs) {
 
   const { toast, headers: toastHeaders } = await getToast(request);
 
+
+  const { serverSession, headers: supabaseHeaders } = await getSupabaseWithSessionAndHeaders({
+    request,
+  });
+
+  const { DATABASE_URL, DATABASE_ANON_KEY } = getSupabaseEnv()
+
   return json(
     {
       // username: os.userInfo().username,
@@ -42,11 +51,15 @@ export async function loader({ request }: LoaderFunctionArgs) {
       ENV: getEnv(),
       csrfToken,
       honeyProps,
+      DATABASE_URL,
+      DATABASE_ANON_KEY,
+      serverSession,
+      domainUrl: process.env.ORIGIN || '',
     },
     {
       headers: combineHeaders(
         csrfCookieHeader ? { "set-cookie": csrfCookieHeader } : null,
-        toastHeaders
+        toastHeaders, supabaseHeaders
       ),
     }
   );
@@ -85,13 +98,16 @@ function Document({
 
 export function Layout({ children }: { children: React.ReactNode }) {
   const data = useLoaderData<typeof loader>();
-  console.log(data);
-  const location = useLocation();
-  const isHome = location.pathname === "/";
+
 
-  return (
-    <>
-      <Document env={data.ENV}>
+console.log(data);
+const location = useLocation();
+const isHome = location.pathname === "/";
+
+return (
+  <>
+      <Document>
+      {/* <Document env={data.ENV}> */}
         {!isHome && <NavigationSidebar />} {children}
         {data && data.toast ? <ShowToast toast={data.toast} /> : null}
       </Document>
@@ -101,10 +117,20 @@ export function Layout({ children }: { children: React.ReactNode }) {
 
 export default function App() {
   const data = useLoaderData<typeof loader>();
+  const {supabase} = useSupabaseClient(
+  {
+  env: {
+    SUPABASE_URL: data.DATABASE_URL,
+    SUPABASE_ANON_KEY: data.DATABASE_ANON_KEY,
+  },
+  serverSession: data.serverSession,
+  })
+
   return (
     <HoneypotProvider {...data.honeyProps}>
       <AuthenticityTokenProvider token={data.csrfToken}>
-        <Outlet />;
+        {/* <Outlet />; */}
+        <Outlet context={{ supabase, domainUrl: data.domainUrl }} />
       </AuthenticityTokenProvider>
     </HoneypotProvider>
   );