Supabase Auth

1"use client";
2
3import {
4  Dialog,
5  DialogContent,
6  DialogDescription,
7  DialogHeader,
8  DialogTitle,
9  DialogTrigger,
10} from "@/components/ui/dialog";
11import {
12  DropdownMenu,
13  DropdownMenuContent,
14  DropdownMenuItem,
15  DropdownMenuTrigger,
16} from "@/components/ui/dropdown-menu";
17import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
18import { SignInForm } from "@/registry/new-york/supabase/components/sign-in-form";
19import { SignUpForm } from "@/registry/new-york/supabase/components/sign-up-form";
20import { useAuth } from "@/registry/new-york/supabase/lib/auth";
21
22import React from "react";
23import Link from "next/link";
24import { LogOut } from "lucide-react";
25
26export function SignedIn({ children }: { children: React.ReactNode }) {
27  const { user, loading } = useAuth();
28
29  if (loading) return null; // or a loading spinner if you prefer
30  if (!user) return null;
31
32  return <>{children}</>;
33}
34
35export function SignedOut({ children }: { children: React.ReactNode }) {
36  const { user, loading } = useAuth();
37
38  if (loading) return null; // or a loading spinner if you prefer
39  if (user) return null;
40
41  return <>{children}</>;
42}
43
44export function AuthButton({
45  redirectOnLogin = "/",
46  children,
47}: {
48  redirectOnLogin?: string;
49  children: React.ReactNode;
50}) {
51  return (
52    <Dialog>
53      <DialogTrigger asChild>{children}</DialogTrigger>
54      <DialogContent>
55        <DialogHeader>
56          <DialogTitle>Authentication</DialogTitle>
57          <DialogDescription>
58            Create account or log into an existing account.
59          </DialogDescription>
60        </DialogHeader>
61        <Tabs className="w-full">
62          <TabsList className="w-full mb-4">
63            <TabsTrigger value="sign-in">Sign In</TabsTrigger>
64            <TabsTrigger value="sign-up">Sign Up</TabsTrigger>
65          </TabsList>
66          <TabsContent value="sign-in">
67            <SignInForm redirect={redirectOnLogin} />
68          </TabsContent>
69          <TabsContent value="sign-up">
70            <SignUpForm />
71          </TabsContent>
72        </Tabs>
73      </DialogContent>
74    </Dialog>
75  );
76}
77
78type AuthVariant = "modal" | "page";
79
80export function SignInButton({
81  variant = "modal",
82  redirect = "/",
83  children,
84}: {
85  variant?: AuthVariant;
86  redirect?: string;
87  children: React.ReactNode;
88}) {
89  if (variant === "page") {
90    const params = new URLSearchParams({ redirect });
91// … truncated