add sign-up

.gitignore

@@ -27,6 +27,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

.vscode/settings.json

@@ -0,0 +1,21 @@
+{
+  "files.exclude": {
+    "**/.git": true,
+    "**/.svn": true,
+    "**/.hg": true,
+    "**/CVS": true,
+    "**/.DS_Store": true,
+    "node_modules": true,
+    ".next": true
+  },
+  "eslint.lintTask.enable": true,
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "npm.packageManager": "pnpm",
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[typescript][javascript][typescriptreact][javascriptreact][json][jsonl]": {
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": true
+    },
+    "editor.formatOnSave": true
+  }
+}

app/auth/signup/action.ts

@@ -0,0 +1,22 @@
+'use server'
+import { cookies } from 'next/headers'
+import { redirect } from 'next/navigation'
+import { createClient } from '../supabase'
+import type { SignUpSchema } from './page'
+
+export const signUp = async ({
+  email,
+  password
+}: SignUpSchema): Promise<void> => {
+  const supabase = createClient(cookies())
+
+  const { error } = await supabase.auth.signUp({
+    email,
+    password
+  })
+  if (error) {
+    console.error(error)
+  } else {
+    return redirect('/')
+  }
+}

app/auth/signup/page.tsx

@@ -1,5 +1,47 @@
-import { Heading } from '@chakra-ui/react'
+'use client'
+import { startTransition } from 'react'
+import { useForm } from 'react-hook-form'
+import { Flex, Heading } from '@chakra-ui/react'
+import * as z from 'zod'
+import { PrimaryButton } from '@/components/button'
+import { signUp } from './action'
+
+const signUpSchema = z.object({
+  email: z.string().email(),
+  password: z.string()
+})
+export type SignUpSchema = z.infer<typeof signUpSchema>
 
 export default function SignUp() {
-  return <Heading>SignUp Page</Heading>
+  const { register, handleSubmit } = useForm()
+  return (
+    <>
+      <Heading>SignUp Page</Heading>
+      <form
+        onSubmit={handleSubmit((data) => {
+          const result = signUpSchema.safeParse(data)
+          if (!result.success) {
+            console.error(result.error)
+            return
+          }
+          startTransition(() => {
+            signUp(result.data).catch(console.error)
+          })
+        })}
+      >
+        <Flex flexDirection={'column'}>
+          <label htmlFor="email">Email</label>
+          <input type="email" id="email" required {...register('email')} />
+          <label htmlFor="password">Password</label>
+          <input
+            type="password"
+            id="password"
+            required
+            {...register('password')}
+          />
+          <PrimaryButton type={'submit'}>Sign Up</PrimaryButton>
+        </Flex>
+      </form>
+    </>
+  )
 }

app/auth/supabase.ts

@@ -0,0 +1,23 @@
+'use server'
+import { createServerClient, type CookieOptions } from '@supabase/ssr'
+import { cookies } from 'next/headers'
+
+export const createClient = (cookieStore: ReturnType<typeof cookies>) => {
+  return createServerClient(
+    process.env.NEXT_PUBLIC_SUPABASE_URL!,
+    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+    {
+      cookies: {
+        get(name: string) {
+          return cookieStore.get(name)?.value
+        },
+        set(name: string, value: string, options: CookieOptions) {
+          cookieStore.set({ name, value, ...options })
+        },
+        remove(name: string, options: CookieOptions) {
+          cookieStore.set({ name, value: '', ...options })
+        }
+      }
+    }
+  )
+}

package.json

@@ -34,6 +34,8 @@
     "@storybook/nextjs": "^7.5.3",
     "@storybook/react": "^7.5.3",
     "@storybook/testing-library": "^0.2.2",
+    "@supabase/ssr": "^0.0.10",
+    "@supabase/supabase-js": "^2.38.5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
@@ -45,9 +47,12 @@
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-storybook": "^0.6.15",
     "prettier": "^3.0.3",
+    "react-hook-form": "^7.48.2",
     "react-icons": "^4.12.0",
     "sb": "^7.5.3",
     "storybook": "^7.5.3",
-    "typescript": "^5"
+    "supabase": "1.112.0",
+    "typescript": "^5",
+    "zod": "^3.22.4"
   }
 }