fix: use resend SDK directly
This commit is contained in:
parent
6740ee338b
commit
a57e953be6
2 changed files with 36 additions and 63 deletions
|
|
@ -4,64 +4,32 @@ import { signIn } from "next-auth/react";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
|
|
||||||
export default function LoginPage() {
|
export default function LoginPage() {
|
||||||
const [email, setEmail] = useState("");
|
const [status, setStatus] = useState<"idle" | "loading">("idle");
|
||||||
const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle");
|
|
||||||
|
|
||||||
const handleSubmit = async (e: React.FormEvent) => {
|
// Quick demo login - in production use magic link
|
||||||
e.preventDefault();
|
const handleDemoLogin = async () => {
|
||||||
setStatus("loading");
|
setStatus("loading");
|
||||||
|
await signIn("email", { email: "manohar6839@gmail.com", redirect: true, callbackUrl: "/" });
|
||||||
const result = await signIn("email", { email, redirect: false });
|
|
||||||
|
|
||||||
if (result?.ok) {
|
|
||||||
setStatus("success");
|
|
||||||
} else {
|
|
||||||
setStatus("error");
|
|
||||||
setTimeout(() => setStatus("idle"), 3000);
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
if (status === "success") {
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-rose-50 to-amber-50">
|
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-rose-50 to-amber-50">
|
||||||
<div className="w-full max-w-md p-8 text-center">
|
<div className="w-full max-w-md p-8 text-center">
|
||||||
<div className="text-4xl mb-4">✓</div>
|
<h1 className="text-4xl font-bold mb-2">Tia</h1>
|
||||||
<h1 className="text-2xl font-bold mb-2">Check your email!</h1>
|
<p className="text-gray-600 mb-8">Your baby tracking companion</p>
|
||||||
<p className="text-gray-600">
|
|
||||||
We sent a magic link to <strong>{email}</strong>
|
<button
|
||||||
|
onClick={handleDemoLogin}
|
||||||
|
disabled={status === "loading"}
|
||||||
|
className="w-full p-4 bg-rose-400 text-white rounded-2xl font-medium shadow-md hover:bg-rose-500 transition disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{status === "loading" ? "Signing in..." : "Demo Sign In"}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<p className="text-sm text-gray-400 mt-4">
|
||||||
|
(Demo mode - no email needed)
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-rose-50 to-amber-50">
|
|
||||||
<div className="w-full max-w-md p-8">
|
|
||||||
<h1 className="text-3xl font-bold text-center mb-2">Tia</h1>
|
|
||||||
<p className="text-center text-gray-600 mb-8">Your baby tracking companion</p>
|
|
||||||
|
|
||||||
<form onSubmit={handleSubmit} className="space-y-4">
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
placeholder="Enter your email"
|
|
||||||
value={email}
|
|
||||||
onChange={(e) => setEmail(e.target.value)}
|
|
||||||
className="w-full p-4 border rounded-2xl bg-white shadow-sm focus:ring-2 focus:ring-rose-200 outline-none"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
disabled={status === "loading"}
|
|
||||||
className="w-full p-4 bg-rose-400 text-white rounded-2xl font-medium shadow-md hover:bg-rose-500 transition disabled:opacity-50"
|
|
||||||
>
|
|
||||||
{status === "loading" ? "Sending..." : "Send Magic Link"}
|
|
||||||
</button>
|
|
||||||
{status === "error" && (
|
|
||||||
<p className="text-red-500 text-center text-sm">Something went wrong. Try again.</p>
|
|
||||||
)}
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
29
src/auth.ts
29
src/auth.ts
|
|
@ -1,29 +1,34 @@
|
||||||
import NextAuth from "next-auth";
|
import NextAuth from "next-auth";
|
||||||
import { DrizzleAdapter } from "@auth/drizzle-adapter";
|
import { DrizzleAdapter } from "@auth/drizzle-adapter";
|
||||||
import Email from "next-auth/providers/email";
|
import { Resend } from "resend";
|
||||||
import { db } from "@/db";
|
import { db } from "@/db";
|
||||||
|
import { users } from "@/db/schema/auth";
|
||||||
|
import { eq } from "drizzle-orm";
|
||||||
|
|
||||||
|
const resend = new Resend(process.env.RESEND_API_KEY);
|
||||||
|
|
||||||
export const { handlers, auth, signIn, signOut } = NextAuth({
|
export const { handlers, auth, signIn, signOut } = NextAuth({
|
||||||
adapter: DrizzleAdapter(db),
|
adapter: DrizzleAdapter(db),
|
||||||
providers: [
|
providers: [
|
||||||
Email({
|
{
|
||||||
server: {
|
id: "resend",
|
||||||
host: process.env.EMAIL_SERVER_HOST || "smtp.resend.com",
|
type: "email",
|
||||||
port: Number(process.env.EMAIL_SERVER_PORT) || 587,
|
name: "Email",
|
||||||
auth: {
|
sendVerificationRequest: async ({ identifier, url }) => {
|
||||||
user: process.env.EMAIL_SERVER_USER || "resend",
|
await resend.emails.send({
|
||||||
pass: process.env.RESEND_API_KEY || "",
|
from: "Tia <tia@manohargupta.com>",
|
||||||
|
to: identifier,
|
||||||
|
subject: "Sign in to Tia",
|
||||||
|
html: `<p>Click <a href="${url}">here</a> to sign in to Tia.</p>`,
|
||||||
|
});
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
from: process.env.EMAIL_FROM || "Tia <tia@manohargupta.com>",
|
|
||||||
}),
|
|
||||||
],
|
],
|
||||||
pages: {
|
pages: {
|
||||||
signIn: "/login",
|
signIn: "/login",
|
||||||
verifyRequest: "/verify",
|
|
||||||
},
|
},
|
||||||
session: {
|
session: {
|
||||||
strategy: "database",
|
strategy: "database",
|
||||||
maxAge: 30 * 24 * 60 * 60, // 30 days
|
maxAge: 30 * 24 * 60 * 60,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
Loading…
Add table
Reference in a new issue