egutierrez/linkwarden
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

finalized password reset + code refactoring

Browse Source
This commit is contained in:
daniel31x13
2024-05-20 19:23:11 -04:00
parent 73dda21573
commit 329019b34e
12 changed files with 239 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/_app.tsx
+12
View File
@@ -9,6 +9,7 @@ import toast from "react-hot-toast";
import { Toaster, ToastBar } from "react-hot-toast";
import { Session } from "next-auth";
import { isPWA } from "@/lib/client/utils";
import useInitialData from "@/hooks/useInitialData";
export default function App({
Component,
@@ -55,6 +56,7 @@ export default function App({
<link rel="manifest" href="/site.webmanifest" />
</Head>
<AuthRedirect>
{/* <GetData> */}
<Toaster
position="top-center"
reverseOrder={false}
@@ -88,7 +90,17 @@ export default function App({
)}
</Toaster>
<Component {...pageProps} />
{/* </GetData> */}
</AuthRedirect>
</SessionProvider>
);
}
// function GetData({ children }: { children: React.ReactNode }) {
// const status = useInitialData();
// return typeof window !== "undefined" && status !== "loading" ? (
// children
// ) : (
// <></>
// );
// }
pages/api/v1/auth/[...nextauth].ts
+64 -4
View File
@@ -65,6 +65,7 @@ import ZohoProvider from "next-auth/providers/zoho";
import ZoomProvider from "next-auth/providers/zoom";
import * as process from "process";
import type { NextApiRequest, NextApiResponse } from "next";
import { randomBytes } from "crypto";
const emailEnabled =
process.env.EMAIL_FROM && process.env.EMAIL_SERVER ? true : false;
@@ -105,13 +106,54 @@ if (
email: username?.toLowerCase(),
},
],
emailVerified: { not: null },
}
: {
username: username.toLowerCase(),
},
});
if (!user) throw Error("Invalid credentials.");
else if (!user?.emailVerified && emailEnabled) {
const identifier = user?.email as string;
const token = randomBytes(32).toString("hex");
const url = `${
process.env.NEXTAUTH_URL
}/callback/email?token=${token}&email=${encodeURIComponent(
identifier
)}`;
const from = process.env.EMAIL_FROM as string;
const recentVerificationRequestsCount =
await prisma.verificationToken.count({
where: {
identifier,
createdAt: {
gt: new Date(new Date().getTime() - 1000 * 60 * 5), // 5 minutes
},
},
});
if (recentVerificationRequestsCount >= 4)
throw Error("Too many requests. Please try again later.");
sendVerificationRequest({
identifier,
url,
from,
token,
});
await prisma.verificationToken.create({
data: {
identifier,
token,
expires: new Date(Date.now() + 24 * 3600 * 1000), // 1 day
},
});
throw Error("Email not verified. Verification email sent.");
}
let passwordMatches: boolean = false;
if (user?.password) {
@@ -120,7 +162,7 @@ if (
if (passwordMatches && user?.password) {
return { id: user?.id };
} else return null as any;
} else throw Error("Invalid credentials.");
},
})
);
@@ -132,8 +174,26 @@ if (emailEnabled) {
server: process.env.EMAIL_SERVER,
from: process.env.EMAIL_FROM,
maxAge: 1200,
sendVerificationRequest(params) {
sendVerificationRequest(params);
async sendVerificationRequest({ identifier, url, provider, token }) {
const recentVerificationRequestsCount =
await prisma.verificationToken.count({
where: {
identifier,
createdAt: {
gt: new Date(new Date().getTime() - 1000 * 60 * 5), // 5 minutes
},
},
});
if (recentVerificationRequestsCount >= 4)
throw Error("Too many requests. Please try again later.");
sendVerificationRequest({
identifier,
url,
from: provider.from as string,
token,
});
},
})
);
pages/api/v1/auth/reset-password.ts
+1 -1
View File
@@ -74,7 +74,7 @@ export default async function resetPassword(
});
return res.status(200).json({
response: "Password reset successfully.",
response: "Password has been reset successfully.",
});
}
}
pages/auth/reset-password.tsx
+44 -41
View File
@@ -2,52 +2,56 @@ import AccentSubmitButton from "@/components/AccentSubmitButton";
import TextInput from "@/components/TextInput";
import CenteredForm from "@/layouts/CenteredForm";
import Link from "next/link";
import { useRouter } from "next/router";
import { FormEvent, useState } from "react";
import { toast } from "react-hot-toast";
interface FormData {
password: string;
passwordConfirmation: string;
token: string;
}
export default function ResetPassword() {
const [submitLoader, setSubmitLoader] = useState(false);
const router = useRouter();
const [form, setForm] = useState<FormData>({
password: "",
passwordConfirmation: "",
token: router.query.token as string,
});
const [isEmailSent, setIsEmailSent] = useState(false);
const [requestSent, setRequestSent] = useState(false);
async function submitRequest() {
const response = await fetch("/api/v1/auth/forgot-password", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(form),
});
const data = await response.json();
if (response.ok) {
toast.success(data.response);
setIsEmailSent(true);
} else {
toast.error(data.response);
}
}
async function sendConfirmation(event: FormEvent<HTMLFormElement>) {
async function submit(event: FormEvent<HTMLFormElement>) {
event.preventDefault();
if (form.password !== "") {
if (
form.password !== "" &&
form.token !== "" &&
!requestSent &&
!submitLoader
) {
setSubmitLoader(true);
const load = toast.loading("Sending password recovery link...");
await submitRequest();
const response = await fetch("/api/v1/auth/reset-password", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(form),
});
const data = await response.json();
if (response.ok) {
toast.success(data.response);
setRequestSent(true);
} else {
toast.error(data.response);
}
toast.dismiss(load);
@@ -59,15 +63,15 @@ export default function ResetPassword() {
return (
<CenteredForm>
<form onSubmit={sendConfirmation}>
<form onSubmit={submit}>
<div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-base-200 rounded-2xl shadow-md border border-neutral-content">
<p className="text-3xl text-center font-extralight">
{isEmailSent ? "Email Sent!" : "Forgot Password?"}
{requestSent ? "Password Updated!" : "Reset Password"}
</p>
<div className="divider my-0"></div>
{!isEmailSent ? (
{!requestSent ? (
<>
<div>
<p>
@@ -76,12 +80,12 @@ export default function ResetPassword() {
</p>
</div>
<div>
<p className="text-sm w-fit font-semibold mb-1">Email</p>
<p className="text-sm w-fit font-semibold mb-1">New Password</p>
<TextInput
autoFocus
type="password"
placeholder="johnny@example.com"
placeholder="••••••••••••••"
value={form.password}
className="bg-base-100"
onChange={(e) =>
@@ -92,23 +96,22 @@ export default function ResetPassword() {
<AccentSubmitButton
type="submit"
label="Send Login Link"
label="Update Password"
className="mt-2 w-full"
loading={submitLoader}
/>
</>
) : (
<p className="text-center">
Check your email for a link to reset your password. If it doesn’t
appear within a few minutes, check your spam folder.
</p>
)}
<>
<p>Your password has been successfully updated.</p>
<div className="flex items-baseline gap-1 justify-center">
<Link href={"/login"} className="block font-bold">
Go back
</Link>
</div>
<div className="mx-auto w-fit mt-3">
<Link className="font-semibold" href="/login">
Back to Login
</Link>
</div>
</>
)}
</div>
</form>
</CenteredForm>
pages/confirmation.tsx
+35 -9
View File
@@ -1,8 +1,33 @@
import CenteredForm from "@/layouts/CenteredForm";
import { signIn } from "next-auth/react";
import Link from "next/link";
import React from "react";
import { useRouter } from "next/router";
import React, { useState } from "react";
import toast from "react-hot-toast";
export default function EmailConfirmaion() {
const router = useRouter();
const [submitLoader, setSubmitLoader] = useState(false);
const resend = async () => {
setSubmitLoader(true);
const load = toast.loading("Authenticating...");
const res = await signIn("email", {
email: decodeURIComponent(router.query.email as string),
callbackUrl: "/",
redirect: false,
});
toast.dismiss(load);
setSubmitLoader(false);
toast.success("Verification email sent.");
};
return (
<CenteredForm>
<div className="p-4 max-w-[30rem] min-w-80 w-full rounded-2xl shadow-md mx-auto border border-neutral-content bg-base-200">
@@ -12,15 +37,16 @@ export default function EmailConfirmaion() {
<div className="divider my-3"></div>
<p>A sign in link has been sent to your email address.</p>
<p className="mt-3">
Didn&apos;t see the email? Check your spam folder or visit the{" "}
<Link href="/forgot" className="font-bold underline">
Password Recovery
</Link>{" "}
page to resend the link.
<p>
A sign in link has been sent to your email address. If you don't see
the email, check your spam folder.
</p>
<div className="mx-auto w-fit mt-3">
<div className="btn btn-ghost btn-sm" onClick={resend}>
Resend Email
</div>
</div>
</div>
</CenteredForm>
);
pages/forgot.tsx
+4 -4
View File
@@ -94,15 +94,15 @@ export default function Forgot() {
/>
</>
) : (
<p className="text-center">
<p>
Check your email for a link to reset your password. If it doesn’t
appear within a few minutes, check your spam folder.
</p>
)}
<div className="flex items-baseline gap-1 justify-center">
<Link href={"/login"} className="block font-bold">
Go back
<div className="mx-auto w-fit mt-2">
<Link className="font-semibold" href="/login">
Back to Login
</Link>
</div>
</div>
pages/login.tsx
+3 -3
View File
@@ -47,7 +47,7 @@ export default function Login({
setSubmitLoader(false);
if (!res?.ok) {
toast.error("Invalid login.");
toast.error(res?.error || "Invalid credentials.");
}
} else {
toast.error("Please fill out all the fields.");
@@ -108,7 +108,7 @@ export default function Login({
<div className="w-fit ml-auto mt-1">
<Link
href={"/forgot"}
className="text-gray-500 dark:text-gray-400 font-semibold"
className="text-neutral font-semibold"
data-testid="forgot-password-link"
>
Forgot Password?
@@ -158,7 +158,7 @@ export default function Login({
<p className="w-fit text-gray-500 dark:text-gray-400">New here?</p>
<Link
href={"/register"}
className="block text-black dark:text-white font-semibold"
className="font-semibold"
data-testid="register-link"
>
Sign Up
pages/register.tsx
+7 -2
View File
@@ -76,12 +76,17 @@ export default function Register() {
setSubmitLoader(false);
if (response.ok) {
if (form.email && emailEnabled)
if (form.email && emailEnabled) {
await signIn("email", {
email: form.email,
callbackUrl: "/",
redirect: false,
});
else if (!emailEnabled) router.push("/login");
router.push(
"/confirmation?email=" + encodeURIComponent(form.email)
);
} else if (!emailEnabled) router.push("/login");
toast.success("User Created!");
} else {