separated pages

app/auth/signup/action.ts → app/auth/signup/email/action.ts

@@ -1,7 +1,7 @@
 'use server'
 import { cookies } from 'next/headers'
 import { redirect } from 'next/navigation'
-import { createClient } from '../supabase'
+import { createClient } from '../../supabase'
 import type { SignUpSchema } from './page'
 
 export const signUp = async ({

app/auth/signup/email/page.tsx

@@ -0,0 +1,83 @@
+'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().min(8),
+  confirmationPassword: z.string().min(8)
+})
+export type SignUpSchema = z.infer<typeof signUpSchema>
+
+export default function SignUp() {
+  const {
+    register,
+    handleSubmit,
+    setError,
+    formState: { errors }
+  } = useForm<SignUpSchema>()
+  return (
+    <>
+      <Heading>Welcome!</Heading>
+      <Heading>Create an Account</Heading>
+      <form
+        onSubmit={handleSubmit((data) => {
+          const result = signUpSchema.safeParse(data)
+          if (!result.success) {
+            console.error(result.error)
+            return
+          }
+
+          if (result.data.password !== result.data.confirmationPassword) {
+            setError('confirmationPassword', {
+              message: 'Your password and confirmation password must match'
+            })
+          }
+          startTransition(() => {
+            signUp(result.data).catch(console.error)
+          })
+        })}
+      >
+        <Flex flexDirection={'column'}>
+          <label htmlFor="email">Email address</label>
+          <input type="email" id="email" required {...register('email')} />
+          <label htmlFor="password">Password</label>
+          <input
+            type="password"
+            id="password"
+            required
+            {...register('password', {
+              minLength: {
+                value: 8,
+                message: 'min length is 8'
+              }
+            })}
+          />
+          {errors.password && (
+            <span role="alert">{errors.password.message}</span>
+          )}
+          <label htmlFor="re-type-password">Confirmation Password</label>
+          <input
+            type="password"
+            id="re-type-password"
+            required
+            {...register('confirmationPassword', {
+              minLength: {
+                value: 8,
+                message: 'min length is 8'
+              }
+            })}
+          />
+          {errors.confirmationPassword && (
+            <span role="alert">{errors.confirmationPassword.message}</span>
+          )}
+          <PrimaryButton type={'submit'}>Sign Up</PrimaryButton>
+        </Flex>
+      </form>
+    </>
+  )
+}

app/auth/signup/page.tsx

@@ -1,47 +1,34 @@
-'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>
+import { Heading, List, ListItem } from '@chakra-ui/react'
+import Link from 'next/link'
+import { SecondaryButton } from '@/components/button'
 
 export default function SignUp() {
-  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>
+      <Heading>Welcome!</Heading>
+      <Heading>Create an Account</Heading>
+      <List spacing={3}>
+        <ListItem>
+          <Link href="/auth/signup/email">
+            <SecondaryButton>Sign up with Email</SecondaryButton>
+          </Link>
+        </ListItem>
+        <ListItem>
+          <Link href="/auth/signup/google">
+            <SecondaryButton>Sign up with Google</SecondaryButton>
+          </Link>
+        </ListItem>
+        <ListItem>
+          <Link href="/auth/signup/facebook">
+            <SecondaryButton>Sign up with Facebook</SecondaryButton>
+          </Link>
+        </ListItem>
+        <ListItem>
+          <Link href="/auth/signup/apple">
+            <SecondaryButton>Sign up with Apple</SecondaryButton>
+          </Link>
+        </ListItem>
+      </List>
     </>
   )
 }

package.json

@@ -51,7 +51,6 @@
     "react-icons": "^4.12.0",
     "sb": "^7.5.3",
     "storybook": "^7.5.3",
-    "supabase": "1.112.0",
     "typescript": "^5",
     "zod": "^3.22.4"
   }