jselesan/playzer
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

feat: add phone field to User model and update authentication flow

Browse Source 
- Added phone field to User model in Prisma schema and generated types.
- Updated backend authentication to include phone as an additional field.
- Implemented phone input in the signup form with validation.
- Created a new SignupPage component for user registration.
- Updated routing to include signup path and redirect authenticated users.
- Modified login page to reference Playzer and added link to signup.
This commit is contained in:
Jose Selesan
2026-06-01 16:43:52 -03:00
parent 4d3867614d
commit 2aaa91444d
14 changed files with 352 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/backend/prisma/auth.prisma
View File

@@ -4,6 +4,7 @@ model User {
email String
emailVerified Boolean @default(false)
image String?
phone String?
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
sessions Session[]

2
apps/backend/prisma/migrations/20260601193348_add_phone_to_user/migration.sql Normal file
View File

@@ -0,0 +1,2 @@
-- AlterTable
ALTER TABLE "users" ADD COLUMN "phone" TEXT;

8
apps/backend/src/generated/prisma/internal/class.ts
View File

File diff suppressed because one or more lines are too long

1
apps/backend/src/generated/prisma/internal/prismaNamespace.ts
View File

@@ -1648,6 +1648,7 @@ export const UserScalarFieldEnum = {
email: 'email',
emailVerified: 'emailVerified',
image: 'image',
phone: 'phone',
createdAt: 'createdAt',
updatedAt: 'updatedAt',
role: 'role'

1
apps/backend/src/generated/prisma/internal/prismaNamespaceBrowser.ts
View File

@@ -91,6 +91,7 @@ export const UserScalarFieldEnum = {
email: 'email',
emailVerified: 'emailVerified',
image: 'image',
phone: 'phone',
createdAt: 'createdAt',
updatedAt: 'updatedAt',
role: 'role'

42
apps/backend/src/generated/prisma/models/User.ts
View File

@@ -30,6 +30,7 @@ export type UserMinAggregateOutputType = {
email: string | null
emailVerified: boolean | null
image: string | null
phone: string | null
createdAt: Date | null
updatedAt: Date | null
role: string | null
@@ -41,6 +42,7 @@ export type UserMaxAggregateOutputType = {
email: string | null
emailVerified: boolean | null
image: string | null
phone: string | null
createdAt: Date | null
updatedAt: Date | null
role: string | null
@@ -52,6 +54,7 @@ export type UserCountAggregateOutputType = {
email: number
emailVerified: number
image: number
phone: number
createdAt: number
updatedAt: number
role: number
@@ -65,6 +68,7 @@ export type UserMinAggregateInputType = {
email?: true
emailVerified?: true
image?: true
phone?: true
createdAt?: true
updatedAt?: true
role?: true
@@ -76,6 +80,7 @@ export type UserMaxAggregateInputType = {
email?: true
emailVerified?: true
image?: true
phone?: true
createdAt?: true
updatedAt?: true
role?: true
@@ -87,6 +92,7 @@ export type UserCountAggregateInputType = {
email?: true
emailVerified?: true
image?: true
phone?: true
createdAt?: true
updatedAt?: true
role?: true
@@ -171,6 +177,7 @@ export type UserGroupByOutputType = {
email: string
emailVerified: boolean
image: string | null
phone: string | null
createdAt: Date
updatedAt: Date
role: string
@@ -203,6 +210,7 @@ export type UserWhereInput = {
email?: Prisma.StringFilter<"User"> | string
emailVerified?: Prisma.BoolFilter<"User"> | boolean
image?: Prisma.StringNullableFilter<"User"> | string | null
phone?: Prisma.StringNullableFilter<"User"> | string | null
createdAt?: Prisma.DateTimeFilter<"User"> | Date | string
updatedAt?: Prisma.DateTimeFilter<"User"> | Date | string
role?: Prisma.StringFilter<"User"> | string
@@ -217,6 +225,7 @@ export type UserOrderByWithRelationInput = {
email?: Prisma.SortOrder
emailVerified?: Prisma.SortOrder
image?: Prisma.SortOrderInput | Prisma.SortOrder
phone?: Prisma.SortOrderInput | Prisma.SortOrder
createdAt?: Prisma.SortOrder
updatedAt?: Prisma.SortOrder
role?: Prisma.SortOrder
@@ -234,6 +243,7 @@ export type UserWhereUniqueInput = Prisma.AtLeast<{
name?: Prisma.StringFilter<"User"> | string
emailVerified?: Prisma.BoolFilter<"User"> | boolean
image?: Prisma.StringNullableFilter<"User"> | string | null
phone?: Prisma.StringNullableFilter<"User"> | string | null
createdAt?: Prisma.DateTimeFilter<"User"> | Date | string
updatedAt?: Prisma.DateTimeFilter<"User"> | Date | string
role?: Prisma.StringFilter<"User"> | string
@@ -248,6 +258,7 @@ export type UserOrderByWithAggregationInput = {
email?: Prisma.SortOrder
emailVerified?: Prisma.SortOrder
image?: Prisma.SortOrderInput | Prisma.SortOrder
phone?: Prisma.SortOrderInput | Prisma.SortOrder
createdAt?: Prisma.SortOrder
updatedAt?: Prisma.SortOrder
role?: Prisma.SortOrder
@@ -265,6 +276,7 @@ export type UserScalarWhereWithAggregatesInput = {
email?: Prisma.StringWithAggregatesFilter<"User"> | string
emailVerified?: Prisma.BoolWithAggregatesFilter<"User"> | boolean
image?: Prisma.StringNullableWithAggregatesFilter<"User"> | string | null
phone?: Prisma.StringNullableWithAggregatesFilter<"User"> | string | null
createdAt?: Prisma.DateTimeWithAggregatesFilter<"User"> | Date | string
updatedAt?: Prisma.DateTimeWithAggregatesFilter<"User"> | Date | string
role?: Prisma.StringWithAggregatesFilter<"User"> | string
@@ -276,6 +288,7 @@ export type UserCreateInput = {
email: string
emailVerified?: boolean
image?: string | null
phone?: string | null
createdAt?: Date | string
updatedAt?: Date | string
role?: string
@@ -290,6 +303,7 @@ export type UserUncheckedCreateInput = {
email: string
emailVerified?: boolean
image?: string | null
phone?: string | null
createdAt?: Date | string
updatedAt?: Date | string
role?: string
@@ -304,6 +318,7 @@ export type UserUpdateInput = {
email?: Prisma.StringFieldUpdateOperationsInput | string
emailVerified?: Prisma.BoolFieldUpdateOperationsInput | boolean
image?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
phone?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
createdAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
updatedAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
role?: Prisma.StringFieldUpdateOperationsInput | string
@@ -318,6 +333,7 @@ export type UserUncheckedUpdateInput = {
email?: Prisma.StringFieldUpdateOperationsInput | string
emailVerified?: Prisma.BoolFieldUpdateOperationsInput | boolean
image?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
phone?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
createdAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
updatedAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
role?: Prisma.StringFieldUpdateOperationsInput | string
@@ -332,6 +348,7 @@ export type UserCreateManyInput = {
email: string
emailVerified?: boolean
image?: string | null
phone?: string | null
createdAt?: Date | string
updatedAt?: Date | string
role?: string
@@ -343,6 +360,7 @@ export type UserUpdateManyMutationInput = {
email?: Prisma.StringFieldUpdateOperationsInput | string
emailVerified?: Prisma.BoolFieldUpdateOperationsInput | boolean
image?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
phone?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
createdAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
updatedAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
role?: Prisma.StringFieldUpdateOperationsInput | string
@@ -354,6 +372,7 @@ export type UserUncheckedUpdateManyInput = {
email?: Prisma.StringFieldUpdateOperationsInput | string
emailVerified?: Prisma.BoolFieldUpdateOperationsInput | boolean
image?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
phone?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
createdAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
updatedAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
role?: Prisma.StringFieldUpdateOperationsInput | string
@@ -365,6 +384,7 @@ export type UserCountOrderByAggregateInput = {
email?: Prisma.SortOrder
emailVerified?: Prisma.SortOrder
image?: Prisma.SortOrder
phone?: Prisma.SortOrder
createdAt?: Prisma.SortOrder
updatedAt?: Prisma.SortOrder
role?: Prisma.SortOrder
@@ -376,6 +396,7 @@ export type UserMaxOrderByAggregateInput = {
email?: Prisma.SortOrder
emailVerified?: Prisma.SortOrder
image?: Prisma.SortOrder
phone?: Prisma.SortOrder
createdAt?: Prisma.SortOrder
updatedAt?: Prisma.SortOrder
role?: Prisma.SortOrder
@@ -387,6 +408,7 @@ export type UserMinOrderByAggregateInput = {
email?: Prisma.SortOrder
emailVerified?: Prisma.SortOrder
image?: Prisma.SortOrder
phone?: Prisma.SortOrder
createdAt?: Prisma.SortOrder
updatedAt?: Prisma.SortOrder
role?: Prisma.SortOrder
@@ -461,6 +483,7 @@ export type UserCreateWithoutSessionsInput = {
email: string
emailVerified?: boolean
image?: string | null
phone?: string | null
createdAt?: Date | string
updatedAt?: Date | string
role?: string
@@ -474,6 +497,7 @@ export type UserUncheckedCreateWithoutSessionsInput = {
email: string
emailVerified?: boolean
image?: string | null
phone?: string | null
createdAt?: Date | string
updatedAt?: Date | string
role?: string
@@ -503,6 +527,7 @@ export type UserUpdateWithoutSessionsInput = {
email?: Prisma.StringFieldUpdateOperationsInput | string
emailVerified?: Prisma.BoolFieldUpdateOperationsInput | boolean
image?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
phone?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
createdAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
updatedAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
role?: Prisma.StringFieldUpdateOperationsInput | string
@@ -516,6 +541,7 @@ export type UserUncheckedUpdateWithoutSessionsInput = {
email?: Prisma.StringFieldUpdateOperationsInput | string
emailVerified?: Prisma.BoolFieldUpdateOperationsInput | boolean
image?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
phone?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
createdAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
updatedAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
role?: Prisma.StringFieldUpdateOperationsInput | string
@@ -529,6 +555,7 @@ export type UserCreateWithoutAccountsInput = {
email: string
emailVerified?: boolean
image?: string | null
phone?: string | null
createdAt?: Date | string
updatedAt?: Date | string
role?: string
@@ -542,6 +569,7 @@ export type UserUncheckedCreateWithoutAccountsInput = {
email: string
emailVerified?: boolean
image?: string | null
phone?: string | null
createdAt?: Date | string
updatedAt?: Date | string
role?: string
@@ -571,6 +599,7 @@ export type UserUpdateWithoutAccountsInput = {
email?: Prisma.StringFieldUpdateOperationsInput | string
emailVerified?: Prisma.BoolFieldUpdateOperationsInput | boolean
image?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
phone?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
createdAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
updatedAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
role?: Prisma.StringFieldUpdateOperationsInput | string
@@ -584,6 +613,7 @@ export type UserUncheckedUpdateWithoutAccountsInput = {
email?: Prisma.StringFieldUpdateOperationsInput | string
emailVerified?: Prisma.BoolFieldUpdateOperationsInput | boolean
image?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
phone?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
createdAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
updatedAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
role?: Prisma.StringFieldUpdateOperationsInput | string
@@ -597,6 +627,7 @@ export type UserCreateWithoutComplexesInput = {
email: string
emailVerified?: boolean
image?: string | null
phone?: string | null
createdAt?: Date | string
updatedAt?: Date | string
role?: string
@@ -610,6 +641,7 @@ export type UserUncheckedCreateWithoutComplexesInput = {
email: string
emailVerified?: boolean
image?: string | null
phone?: string | null
createdAt?: Date | string
updatedAt?: Date | string
role?: string
@@ -639,6 +671,7 @@ export type UserUpdateWithoutComplexesInput = {
email?: Prisma.StringFieldUpdateOperationsInput | string
emailVerified?: Prisma.BoolFieldUpdateOperationsInput | boolean
image?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
phone?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
createdAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
updatedAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
role?: Prisma.StringFieldUpdateOperationsInput | string
@@ -652,6 +685,7 @@ export type UserUncheckedUpdateWithoutComplexesInput = {
email?: Prisma.StringFieldUpdateOperationsInput | string
emailVerified?: Prisma.BoolFieldUpdateOperationsInput | boolean
image?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
phone?: Prisma.NullableStringFieldUpdateOperationsInput | string | null
createdAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
updatedAt?: Prisma.DateTimeFieldUpdateOperationsInput | Date | string
role?: Prisma.StringFieldUpdateOperationsInput | string
@@ -714,6 +748,7 @@ export type UserSelect<ExtArgs extends runtime.Types.Extensions.InternalArgs = r
email?: boolean
emailVerified?: boolean
image?: boolean
phone?: boolean
createdAt?: boolean
updatedAt?: boolean
role?: boolean
@@ -729,6 +764,7 @@ export type UserSelectCreateManyAndReturn<ExtArgs extends runtime.Types.Extensio
email?: boolean
emailVerified?: boolean
image?: boolean
phone?: boolean
createdAt?: boolean
updatedAt?: boolean
role?: boolean
@@ -740,6 +776,7 @@ export type UserSelectUpdateManyAndReturn<ExtArgs extends runtime.Types.Extensio
email?: boolean
emailVerified?: boolean
image?: boolean
phone?: boolean
createdAt?: boolean
updatedAt?: boolean
role?: boolean
@@ -751,12 +788,13 @@ export type UserSelectScalar = {
email?: boolean
emailVerified?: boolean
image?: boolean
phone?: boolean
createdAt?: boolean
updatedAt?: boolean
role?: boolean
}
export type UserOmit<ExtArgs extends runtime.Types.Extensions.InternalArgs = runtime.Types.Extensions.DefaultArgs> = runtime.Types.Extensions.GetOmit<"id" | "name" | "email" | "emailVerified" | "image" | "createdAt" | "updatedAt" | "role", ExtArgs["result"]["user"]>
export type UserOmit<ExtArgs extends runtime.Types.Extensions.InternalArgs = runtime.Types.Extensions.DefaultArgs> = runtime.Types.Extensions.GetOmit<"id" | "name" | "email" | "emailVerified" | "image" | "phone" | "createdAt" | "updatedAt" | "role", ExtArgs["result"]["user"]>
export type UserInclude<ExtArgs extends runtime.Types.Extensions.InternalArgs = runtime.Types.Extensions.DefaultArgs> = {
sessions?: boolean | Prisma.User$sessionsArgs<ExtArgs>
accounts?: boolean | Prisma.User$accountsArgs<ExtArgs>
@@ -779,6 +817,7 @@ export type $UserPayload<ExtArgs extends runtime.Types.Extensions.InternalArgs =
email: string
emailVerified: boolean
image: string | null
phone: string | null
createdAt: Date
updatedAt: Date
role: string
@@ -1213,6 +1252,7 @@ export interface UserFieldRefs {
readonly email: Prisma.FieldRef<"User", 'String'>
readonly emailVerified: Prisma.FieldRef<"User", 'Boolean'>
readonly image: Prisma.FieldRef<"User", 'String'>
readonly phone: Prisma.FieldRef<"User", 'String'>
readonly createdAt: Prisma.FieldRef<"User", 'DateTime'>
readonly updatedAt: Prisma.FieldRef<"User", 'DateTime'>
readonly role: Prisma.FieldRef<"User", 'String'>

21
apps/backend/src/lib/auth.ts
View File

@@ -2,6 +2,7 @@ import { dash } from '@better-auth/infra';
import { betterAuth } from 'better-auth';
import { prismaAdapter } from 'better-auth/adapters/prisma';
import { openAPI } from 'better-auth/plugins';
import { sendMail } from './mailer';
import { db } from './prisma';
export const auth = betterAuth({
@@ -18,6 +19,26 @@ export const auth = betterAuth({
emailAndPassword: {
enabled: true,
},
user: {
additionalFields: {
phone: {
type: 'string',
required: false,
},
},
},
emailVerification: {
sendOnSignUp: true,
autoSignInAfterVerification: true,
sendVerificationEmail: async ({ user, url }) => {
await sendMail({
to: user.email,
subject: 'Verificá tu email en Playzer',
html: `Hacé click para verificar tu email: <a href="${url}">${url}</a>`,
text: `Hacé click para verificar tu email: ${url}`,
});
},
},
socialProviders: {
google: {
clientId: process.env.GOOGLE_CLIENT_ID!,

6
apps/frontend/src/features/login/login-page.tsx
View File

@@ -91,7 +91,7 @@ export function LoginPage({ redirectTo = '/' }: LoginPageProps) {
<section className="w-full max-w-sm rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
<h1 className="mb-2 text-2xl font-semibold">Iniciar sesión</h1>
<p className="mb-4 text-sm text-muted-foreground">
Ingresá con tu cuenta para acceder a Home.
Ingresá con tu cuenta para acceder a Playzer.
</p>
<Button type="button" variant="outline" className="w-full" onClick={handleGoogleSignIn}>
@@ -161,6 +161,10 @@ export function LoginPage({ redirectTo = '/' }: LoginPageProps) {
<Link to="/reset-password" className="text-primary hover:underline">
¿Olvidaste tu contraseña?
</Link>
<span className="mx-3 text-muted-foreground">|</span>
<Link to="/signup" className="text-primary hover:underline">
Crear cuenta
</Link>
</p>
</section>
</main>

228
apps/frontend/src/features/signup/signup-page.tsx Normal file
View File

@@ -0,0 +1,228 @@
import PlayzerIcon from '@/assets/playzer-favicon-512-transparent.png';
import { Button } from '@/components/ui/button';
import { Field, FieldError, FieldLabel } from '@/components/ui/field';
import { Input } from '@/components/ui/input';
import { authClient } from '@/lib/api-client';
import { useAuth } from '@/lib/auth';
import { zodResolver } from '@hookform/resolvers/zod';
import { Link, useNavigate } from '@tanstack/react-router';
import { useEffect, useState } from 'react';
import { useForm } from 'react-hook-form';
import { z } from 'zod';
const signupSchema = z
.object({
fullName: z.string().min(2, 'El nombre debe tener al menos 2 caracteres.'),
email: z.string().email('Ingresá un email válido.'),
phone: z
.string()
.optional()
.refine(
(val) => !val || val.replace(/\D/g, '').length >= 7,
'El teléfono debe tener al menos 7 dígitos.'
),
password: z.string().min(6, 'La contraseña debe tener al menos 6 caracteres.'),
confirmPassword: z.string(),
})
.refine((data) => data.password === data.confirmPassword, {
message: 'Las contraseñas no coinciden.',
path: ['confirmPassword'],
});
type SignupForm = z.infer<typeof signupSchema>;
const STORAGE_KEY = 'signup-form-pending';
function loadFormState(): Partial<SignupForm> {
try {
const saved = sessionStorage.getItem(STORAGE_KEY);
if (saved) return JSON.parse(saved);
} catch {}
return {};
}
export function SignupPage() {
const navigate = useNavigate();
const { signUp } = useAuth();
const [submitError, setSubmitError] = useState<string | null>(null);
const [isSubmitting, setIsSubmitting] = useState(false);
const {
register,
handleSubmit,
formState: { errors, isValid },
watch,
} = useForm<SignupForm>({
resolver: zodResolver(signupSchema),
mode: 'onChange',
defaultValues: loadFormState(),
});
useEffect(() => {
const sub = watch((values) => {
sessionStorage.setItem(STORAGE_KEY, JSON.stringify(values));
});
return () => sub.unsubscribe();
}, [watch]);
const handleGoogleSignIn = async () => {
setSubmitError(null);
try {
await authClient.signIn.social({
provider: 'google',
callbackURL: `${window.location.origin}/auth-callback`,
});
} catch {
setSubmitError('No pudimos iniciar sesión con Google.');
}
};
const onSubmit = async (values: SignupForm) => {
setSubmitError(null);
setIsSubmitting(true);
try {
await signUp({
email: values.email,
password: values.password,
fullName: values.fullName,
phone: values.phone || undefined,
});
sessionStorage.removeItem(STORAGE_KEY);
await navigate({ to: '/' });
} catch {
setSubmitError('No pudimos crear la cuenta. Intenta nuevamente.');
} finally {
setIsSubmitting(false);
}
};
return (
<main className="flex min-h-screen w-full flex-col items-center justify-center gap-6 px-3 sm:px-6">
<Link to="/" className="group flex items-center gap-3">
<div className="flex size-10 items-center justify-center">
<img src={PlayzerIcon} alt="Playzer" className="size-7" />
</div>
<span className="bg-gradient-to-r from-primary via-primary to-reserved bg-clip-text text-xl font-bold tracking-tight text-transparent">
Playzer
</span>
</Link>
<section className="w-full max-w-sm rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
<h1 className="mb-2 text-2xl font-semibold">Crear cuenta</h1>
<p className="mb-4 text-sm text-muted-foreground">
Creá tu cuenta para comenzar a usar Playzer.
</p>
<Button type="button" variant="outline" className="w-full" onClick={handleGoogleSignIn}>
<svg className="mr-2 h-4 w-4" viewBox="0 0 24 24" aria-hidden="true">
<path
fill="currentColor"
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
/>
<path
fill="currentColor"
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
/>
<path
fill="currentColor"
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
/>
<path
fill="currentColor"
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
/>
</svg>
Continuar con Google
</Button>
<div className="relative my-4">
<div className="absolute inset-0 flex items-center">
<span className="w-full border-t" />
</div>
<div className="relative flex justify-center text-xs uppercase">
<span className="bg-card px-2 text-muted-foreground">O</span>
</div>
</div>
<form className="space-y-3" onSubmit={handleSubmit(onSubmit)}>
<Field data-invalid={Boolean(errors.fullName)}>
<FieldLabel htmlFor="fullName">Nombre completo</FieldLabel>
<Input
id="fullName"
type="text"
placeholder="Juan Pérez"
aria-invalid={Boolean(errors.fullName)}
{...register('fullName')}
/>
<FieldError errors={[errors.fullName]} />
</Field>
<Field data-invalid={Boolean(errors.email)}>
<FieldLabel htmlFor="email">Email</FieldLabel>
<Input
id="email"
type="email"
placeholder="tu@email.com"
aria-invalid={Boolean(errors.email)}
{...register('email')}
/>
<FieldError errors={[errors.email]} />
</Field>
<Field data-invalid={Boolean(errors.phone)}>
<FieldLabel htmlFor="phone">
Teléfono <span className="text-muted-foreground">(opcional)</span>
</FieldLabel>
<Input
id="phone"
type="tel"
placeholder="+54 11 1234-5678"
aria-invalid={Boolean(errors.phone)}
{...register('phone')}
/>
<FieldError errors={[errors.phone]} />
</Field>
<Field data-invalid={Boolean(errors.password)}>
<FieldLabel htmlFor="password">Contraseña</FieldLabel>
<Input
id="password"
type="password"
placeholder="••••••••"
aria-invalid={Boolean(errors.password)}
{...register('password')}
/>
<FieldError errors={[errors.password]} />
</Field>
<Field data-invalid={Boolean(errors.confirmPassword)}>
<FieldLabel htmlFor="confirmPassword">Confirmar contraseña</FieldLabel>
<Input
id="confirmPassword"
type="password"
placeholder="••••••••"
aria-invalid={Boolean(errors.confirmPassword)}
{...register('confirmPassword')}
/>
<FieldError errors={[errors.confirmPassword]} />
</Field>
{submitError && <p className="text-sm text-destructive">{submitError}</p>}
<Button type="submit" className="w-full" disabled={!isValid || isSubmitting}>
{isSubmitting ? 'Creando cuenta...' : 'Crear cuenta'}
</Button>
</form>
<p className="mt-4 text-center text-sm text-muted-foreground">
¿Ya tenés cuenta?{' '}
<Link to="/login" className="text-primary hover:underline">
Iniciar sesión
</Link>
</p>
</section>
</main>
);
}

13
apps/frontend/src/lib/api-client.ts
View File

@@ -1,10 +1,21 @@
import { sentinelClient } from '@better-auth/infra/client';
import { inferAdditionalFields } from 'better-auth/client/plugins';
import { createAuthClient } from 'better-auth/react';
import * as api from './api';
const apiBaseUrl = api.apiBaseUrl;
const plugins = [sentinelClient()];
const plugins = [
sentinelClient(),
inferAdditionalFields({
user: {
phone: {
type: 'string',
required: false,
},
},
}),
];
export const authClient = createAuthClient({
baseURL: apiBaseUrl,

4
apps/frontend/src/lib/auth.tsx
View File

@@ -13,6 +13,7 @@ type SignUpParams = {
email: string;
password: string;
fullName: string;
phone?: string;
};
type UpdateProfileParams = {
@@ -162,11 +163,12 @@ export function AuthProvider({ children }: PropsWithChildren) {
throw error;
}
},
signUp: async ({ email, password, fullName }) => {
signUp: async ({ email, password, fullName, phone }) => {
const { data: signUpData, error } = await authClient.signUp.email({
email,
password,
name: fullName,
phone,
});
if (error) {

21
apps/frontend/src/routeTree.gen.ts
View File

@@ -9,6 +9,7 @@
// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
import { Route as rootRouteImport } from './routes/__root'
import { Route as SignupRouteImport } from './routes/signup'
import { Route as SelectComplexRouteImport } from './routes/select-complex'
import { Route as ResetPasswordRouteImport } from './routes/reset-password'
import { Route as OnboardRouteImport } from './routes/onboard'
@@ -29,6 +30,11 @@ import { Route as ComplexSlugBookingIndexRouteImport } from './routes/$complexSl
import { Route as ComplexSlugBookingConfirmedBookingCodeRouteImport } from './routes/$complexSlug/booking/confirmed/$bookingCode'
import { Route as AppAuthenticatedComplexSlugEditRouteImport } from './routes/_app/_authenticated/complex/$slug/edit'
const SignupRoute = SignupRouteImport.update({
id: '/signup',
path: '/signup',
getParentRoute: () => rootRouteImport,
} as any)
const SelectComplexRoute = SelectComplexRouteImport.update({
id: '/select-complex',
path: '/select-complex',
@@ -133,6 +139,7 @@ export interface FileRoutesByFullPath {
'/onboard': typeof OnboardRouteWithChildren
'/reset-password': typeof ResetPasswordRoute
'/select-complex': typeof SelectComplexRoute
'/signup': typeof SignupRoute
'/$complexSlug/booking': typeof ComplexSlugBookingRouteWithChildren
'/profile': typeof AppProfileRoute
'/onboard/complete': typeof OnboardCompleteRoute
@@ -151,6 +158,7 @@ export interface FileRoutesByTo {
'/login': typeof LoginRoute
'/reset-password': typeof ResetPasswordRoute
'/select-complex': typeof SelectComplexRoute
'/signup': typeof SignupRoute
'/profile': typeof AppProfileRoute
'/onboard/complete': typeof OnboardCompleteRoute
'/onboard/create-complex': typeof OnboardCreateComplexRoute
@@ -170,6 +178,7 @@ export interface FileRoutesById {
'/onboard': typeof OnboardRouteWithChildren
'/reset-password': typeof ResetPasswordRoute
'/select-complex': typeof SelectComplexRoute
'/signup': typeof SignupRoute
'/_app/_authenticated': typeof AppAuthenticatedRouteRouteWithChildren
'/$complexSlug/booking': typeof ComplexSlugBookingRouteWithChildren
'/_app/profile': typeof AppProfileRoute
@@ -193,6 +202,7 @@ export interface FileRouteTypes {
| '/onboard'
| '/reset-password'
| '/select-complex'
| '/signup'
| '/$complexSlug/booking'
| '/profile'
| '/onboard/complete'
@@ -211,6 +221,7 @@ export interface FileRouteTypes {
| '/login'
| '/reset-password'
| '/select-complex'
| '/signup'
| '/profile'
| '/onboard/complete'
| '/onboard/create-complex'
@@ -229,6 +240,7 @@ export interface FileRouteTypes {
| '/onboard'
| '/reset-password'
| '/select-complex'
| '/signup'
| '/_app/_authenticated'
| '/$complexSlug/booking'
| '/_app/profile'
@@ -251,11 +263,19 @@ export interface RootRouteChildren {
OnboardRoute: typeof OnboardRouteWithChildren
ResetPasswordRoute: typeof ResetPasswordRoute
SelectComplexRoute: typeof SelectComplexRoute
SignupRoute: typeof SignupRoute
ComplexSlugBookingRoute: typeof ComplexSlugBookingRouteWithChildren
}
declare module '@tanstack/react-router' {
interface FileRoutesByPath {
'/signup': {
id: '/signup'
path: '/signup'
fullPath: '/signup'
preLoaderRoute: typeof SignupRouteImport
parentRoute: typeof rootRouteImport
}
'/select-complex': {
id: '/select-complex'
path: '/select-complex'
@@ -462,6 +482,7 @@ const rootRouteChildren: RootRouteChildren = {
OnboardRoute: OnboardRouteWithChildren,
ResetPasswordRoute: ResetPasswordRoute,
SelectComplexRoute: SelectComplexRoute,
SignupRoute: SignupRoute,
ComplexSlugBookingRoute: ComplexSlugBookingRouteWithChildren,
}
export const routeTree = rootRouteImport

2
apps/frontend/src/routes/__root.tsx
View File

@@ -18,7 +18,7 @@ export const Route = createRootRouteWithContext<RouterContext>()({
});
const AUTH_PAGE_REGEX =
/^\/(login|select-complex|reset-password|onboard|invite|auth-callback)(?:\/|$)/;
/^\/(login|signup|select-complex|reset-password|onboard|invite|auth-callback)(?:\/|$)/;
function RootRoute() {
const location = useLocation();

11
apps/frontend/src/routes/signup.tsx Normal file
View File

@@ -0,0 +1,11 @@
import { SignupPage } from '@/features/signup/signup-page';
import { createFileRoute, redirect } from '@tanstack/react-router';
export const Route = createFileRoute('/signup')({
beforeLoad: ({ context }) => {
if (context.auth.isAuthenticated) {
throw redirect({ to: '/' });
}
},
component: SignupPage,
});