From 54f57ba76196903d038d863b1350066652341b04 Mon Sep 17 00:00:00 2001 From: Christopher Arraya Date: Wed, 26 Jul 2023 18:30:00 -0400 Subject: [PATCH] feat: configure supabase auth --- app/auth/callback/route.ts | 18 ++ app/globals.css | 46 ++--- app/layout.tsx | 24 ++- app/login/page.tsx | 205 ++++++++++++++++++++ app/page.tsx | 49 ++++- components/logout.tsx | 19 ++ components/ui/alert.tsx | 59 ++++++ components/ui/button.tsx | 56 ++++++ components/ui/form.tsx | 177 ++++++++++++++++++ components/ui/input.tsx | 25 +++ components/ui/label.tsx | 26 +++ middleware.ts | 14 ++ next.config.js | 8 +- package.json | 10 +- pnpm-lock.yaml | 370 +++++++++++++++++++++++++++++++++++++ 15 files changed, 1066 insertions(+), 40 deletions(-) create mode 100644 app/auth/callback/route.ts create mode 100644 app/login/page.tsx create mode 100644 components/logout.tsx create mode 100644 components/ui/alert.tsx create mode 100644 components/ui/button.tsx create mode 100644 components/ui/form.tsx create mode 100644 components/ui/input.tsx create mode 100644 components/ui/label.tsx create mode 100644 middleware.ts diff --git a/app/auth/callback/route.ts b/app/auth/callback/route.ts new file mode 100644 index 0000000..b106f8b --- /dev/null +++ b/app/auth/callback/route.ts @@ -0,0 +1,18 @@ +import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs"; +import { cookies } from "next/headers"; +import { NextResponse } from "next/server"; + +export const dynamic = "force-dynamic"; + +export async function GET(request: Request) { + const requestUrl = new URL(request.url); + const code = requestUrl.searchParams.get("code"); + + if (code) { + const supabase = createRouteHandlerClient({ cookies }); + await supabase.auth.exchangeCodeForSession(code); + } + + // URL to redirect to after sign in process completes + return NextResponse.redirect(requestUrl.origin); +} diff --git a/app/globals.css b/app/globals.css index ad472c1..31bd520 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,73 +1,73 @@ @tailwind base; @tailwind components; @tailwind utilities; - + @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; - + --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; - + --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; - + --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; - + --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; - + --primary: 222.2 47.4% 11.2%; --primary-foreground: 210 40% 98%; - + --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; - + --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; - + --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; - + --ring: 215 20.2% 65.1%; - + --radius: 0.5rem; } - + .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; - + --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; - + --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; - + --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; - + --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; - + --primary: 210 40% 98%; --primary-foreground: 222.2 47.4% 11.2%; - + --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; - + --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; - + --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 85.7% 97.3%; - + --ring: 217.2 32.6% 17.5%; } } - + @layer base { * { @apply border-border; @@ -75,4 +75,4 @@ body { @apply bg-background text-foreground; } -} \ No newline at end of file +} diff --git a/app/layout.tsx b/app/layout.tsx index ae84562..2d8ab3e 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,22 +1,26 @@ -import './globals.css' -import type { Metadata } from 'next' -import { Inter } from 'next/font/google' +import "./globals.css"; +import type { Metadata } from "next"; +import { Inter } from "next/font/google"; -const inter = Inter({ subsets: ['latin'] }) +const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { - title: 'Create Next App', - description: 'Generated by create next app', -} + title: "Create Next App", + description: "Generated by create next app", +}; export default function RootLayout({ children, }: { - children: React.ReactNode + children: React.ReactNode; }) { return ( - {children} + +
+ {children} +
+ - ) + ); } diff --git a/app/login/page.tsx b/app/login/page.tsx new file mode 100644 index 0000000..06e8cdb --- /dev/null +++ b/app/login/page.tsx @@ -0,0 +1,205 @@ +"use client"; + +import { useState } from "react"; +import { useRouter } from "next/navigation"; +import { createClientComponentClient } from "@supabase/auth-helpers-nextjs"; +import Link from "next/link"; +import { ChevronLeft, AlertCircle } from "lucide-react"; +import { buttonVariants } from "@/components/ui/button"; +import { cn } from "@/lib/utils"; +import { Input } from "@/components/ui/input"; +import { Button } from "@/components/ui/button"; +import { + Form, + FormControl, + FormField, + FormItem, + FormLabel, + FormMessage, +} from "@/components/ui/form"; +import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; +import { useForm } from "react-hook-form"; +import { zodResolver } from "@hookform/resolvers/zod"; +import * as z from "zod"; + +const authSchema = z.object({ + email: z.string().email("Invalid email address"), + password: z.string().min(8, "Password must be at least 8 characters"), +}); + +export default function Login() { + const [email, setEmail] = useState(""); + const [error, setError] = useState("false"); + const [view, setView] = useState("sign-in"); + const router = useRouter(); + const supabase = createClientComponentClient(); + const form = useForm>({ + resolver: zodResolver(authSchema), + defaultValues: { + email: "", + password: "", + }, + }); + + async function handleSignUp(values: z.infer) { + try { + setError("false"); + const { email, password } = values; + const res = await supabase.auth.signUp({ + email, + password, + options: { + emailRedirectTo: `${location.origin}/auth/callback`, + }, + }); + if (res.error) throw res.error; + setEmail(email); + setView("check-email"); + } catch (error) { + setError("sign-up-error"); + } + } + + async function handleSignIn(values: z.infer) { + try { + setError("false"); + const { email, password } = values; + const res = await supabase.auth.signInWithPassword({ + email, + password, + }); + if (res.error) throw res.error; + router.push("/"); + router.refresh(); + } catch (error) { + setError("sign-in-error"); + } + } + + return ( +
+ + + Back + + {view === "check-email" ? ( +

+ Check {email} to continue signing + up +

+ ) : ( +
+ {error === "sign-in-error" && ( + + + Error + + The email or password you entered is incorrect. + + + )} + {error === "sign-up-error" && ( + + + Error + + The email or password you entered is incorrect. + + + )} +
+ + ( + + Email + + + + + + )} + /> + ( + + Password + + + + + + )} + /> + {view === "sign-in" && ( + <> + +

+ Don't have an account? + +

+ + )} + {view === "sign-up" && ( + <> + +

+ Already have an account? + +

+ + )} + + +
+ )} +
+ ); +} diff --git a/app/page.tsx b/app/page.tsx index 888ca56..e142cc2 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,7 +1,48 @@ -export default function Home() { +import { createServerComponentClient } from "@supabase/auth-helpers-nextjs"; +import { cookies } from "next/headers"; +import Link from "next/link"; +import { buttonVariants } from "@/components/ui/button"; +import LogoutButton from "@/components/logout"; + +export const dynamic = "force-dynamic"; + +export default async function Index() { + const supabase = createServerComponentClient({ cookies }); + + const { + data: { user }, + } = await supabase.auth.getUser(); + return ( -
-

Hello, World!

-
+
+ + +
+
+

+ Skalara Homepage +

+
+
+
); } diff --git a/components/logout.tsx b/components/logout.tsx new file mode 100644 index 0000000..65a582c --- /dev/null +++ b/components/logout.tsx @@ -0,0 +1,19 @@ +"use client"; + +import { createClientComponentClient } from "@supabase/auth-helpers-nextjs"; +import { useRouter } from "next/navigation"; +import { Button } from "@/components/ui/button"; + +export default function LogoutButton() { + const router = useRouter(); + + // Create a Supabase client configured to use cookies + const supabase = createClientComponentClient(); + + const signOut = async () => { + await supabase.auth.signOut(); + router.refresh(); + }; + + return ; +} diff --git a/components/ui/alert.tsx b/components/ui/alert.tsx new file mode 100644 index 0000000..b2730b3 --- /dev/null +++ b/components/ui/alert.tsx @@ -0,0 +1,59 @@ +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const alertVariants = cva( + "relative w-full rounded-lg border p-4 [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", + { + variants: { + variant: { + default: "bg-background text-foreground", + destructive: + "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +const Alert = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes & VariantProps +>(({ className, variant, ...props }, ref) => ( +
+)) +Alert.displayName = "Alert" + +const AlertTitle = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +AlertTitle.displayName = "AlertTitle" + +const AlertDescription = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +AlertDescription.displayName = "AlertDescription" + +export { Alert, AlertTitle, AlertDescription } diff --git a/components/ui/button.tsx b/components/ui/button.tsx new file mode 100644 index 0000000..ac8e0c9 --- /dev/null +++ b/components/ui/button.tsx @@ -0,0 +1,56 @@ +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 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, + VariantProps { + asChild?: boolean +} + +const Button = React.forwardRef( + ({ className, variant, size, asChild = false, ...props }, ref) => { + const Comp = asChild ? Slot : "button" + return ( + + ) + } +) +Button.displayName = "Button" + +export { Button, buttonVariants } diff --git a/components/ui/form.tsx b/components/ui/form.tsx new file mode 100644 index 0000000..2fa6dce --- /dev/null +++ b/components/ui/form.tsx @@ -0,0 +1,177 @@ +import * as React from "react"; +import * as LabelPrimitive from "@radix-ui/react-label"; +import { Slot } from "@radix-ui/react-slot"; +import { + Controller, + ControllerProps, + FieldPath, + FieldValues, + FormProvider, + useFormContext, +} from "react-hook-form"; + +import { cn } from "@/lib/utils"; +import { Label } from "@/components/ui/label"; + +const Form = FormProvider; + +type FormFieldContextValue< + TFieldValues extends FieldValues = FieldValues, + TName extends FieldPath = FieldPath +> = { + name: TName; +}; + +const FormFieldContext = React.createContext( + {} as FormFieldContextValue +); + +const FormField = < + TFieldValues extends FieldValues = FieldValues, + TName extends FieldPath = FieldPath +>({ + ...props +}: ControllerProps) => { + return ( + + + + ); +}; + +const useFormField = () => { + const fieldContext = React.useContext(FormFieldContext); + const itemContext = React.useContext(FormItemContext); + const { getFieldState, formState } = useFormContext(); + + const fieldState = getFieldState(fieldContext.name, formState); + + if (!fieldContext) { + throw new Error("useFormField should be used within "); + } + + const { id } = itemContext; + + return { + id, + name: fieldContext.name, + formItemId: `${id}-form-item`, + formDescriptionId: `${id}-form-item-description`, + formMessageId: `${id}-form-item-message`, + ...fieldState, + }; +}; + +type FormItemContextValue = { + id: string; +}; + +const FormItemContext = React.createContext( + {} as FormItemContextValue +); + +const FormItem = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => { + const id = React.useId(); + + return ( + +
+ + ); +}); +FormItem.displayName = "FormItem"; + +const FormLabel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => { + const { error, formItemId } = useFormField(); + + return ( +