Click here to reset your password. This link expires in 1 hour.
`, + }); + }, + }, + emailVerification: { + sendOnSignUp: true, + autoSignInAfterVerification: true, + sendVerificationEmail: async ({ + user, + url, + }: { + user: { email: string }; + url: string; + }) => { + await resend.emails.send({ + from: emailFrom, + to: user.email, + subject: "Verify your lila account", + html: `Click here to verify your email address.
`, + }); + }, + }, trustedOrigins: [process.env["CORS_ORIGIN"] || "http://localhost:5173"], socialProviders: { google: { diff --git a/apps/web/package.json b/apps/web/package.json index 922f6f9..b458eb3 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -16,6 +16,7 @@ "better-auth": "^1.6.2", "react": "^19.2.4", "react-dom": "^19.2.4", + "sonner": "^2.0.7", "tailwindcss": "^4.2.2" }, "devDependencies": { diff --git a/apps/web/src/components/auth/AuthModal.tsx b/apps/web/src/components/auth/AuthModal.tsx new file mode 100644 index 0000000..01b2c20 --- /dev/null +++ b/apps/web/src/components/auth/AuthModal.tsx @@ -0,0 +1,249 @@ +import { useState, useEffect } from "react"; +import { toast } from "sonner"; +import { authClient } from "../../lib/auth-client"; + +type Tab = "login" | "register"; + +type AuthModalProps = { onClose: () => void; onSuccess: () => void }; + +type LoginFormProps = { onSuccess: () => void }; + +const LoginForm = ({ onSuccess }: LoginFormProps) => { + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); + const [isPending, setIsPending] = useState(false); + + const handleSubmit = async () => { + setIsPending(true); + await authClient.signIn.email( + { email, password }, + { + onSuccess: () => { + toast.success("Welcome back!"); + onSuccess(); + }, + onError: (ctx) => { + toast.error(ctx.error.message ?? "Something went wrong."); + setIsPending(false); + }, + }, + ); + }; + + return ( + + ); +}; + +type RegisterFormProps = { onSuccess: () => void }; + +const RegisterForm = ({ onSuccess }: RegisterFormProps) => { + const [name, setName] = useState(""); + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); + const [isPending, setIsPending] = useState(false); + + const handleSubmit = async () => { + setIsPending(true); + await authClient.signUp.email( + { name, email, password }, + { + onSuccess: () => { + toast.success("Check your email to verify your account."); + onSuccess(); + }, + onError: (ctx) => { + toast.error(ctx.error.message ?? "Something went wrong."); + setIsPending(false); + }, + }, + ); + }; + + return ( + + ); +}; + +type SocialButtonsProps = { onSuccess: () => void }; + +const SocialButtons = ({ onSuccess }: SocialButtonsProps) => { + const handleSocial = (provider: "google" | "github") => { + void authClient.signIn.social( + { provider, callbackURL: window.location.origin }, + { + onSuccess, + onError: (ctx) => { + toast.error(ctx.error.message ?? "Something went wrong."); + }, + }, + ); + }; + + return ( ++ Enter your email and we'll send you a reset link. +
++ This reset link is invalid or has expired. +
+ + Request a new one + ++ Enter your new password below. +
+