Updated the verification

src/pages/action.tsx

@@ -36,6 +36,7 @@ export function getServerSideProps({query, res}: {query: {oobCode: string; mode:
 export default function Reset({code, mode, apiKey, continueUrl}: {code: string; mode: string; apiKey?: string; continueUrl?: string}) {
 	const [password, setPassword] = useState("");
 	const [isLoading, setIsLoading] = useState(false);
+	const [email, setEmail] = useState<string>();
 
 	const router = useRouter();
 
@@ -44,29 +45,35 @@ export default function Reset({code, mode, apiKey, continueUrl}: {code: string;
 		redirectIfFound: true,
 	});
 
-	useEffect(() => {
-		if (mode === "signIn") {
-			axios
-				.post<{ok: boolean}>("/api/reset/verify", {
-					link: `https://encoach.com/action?apiKey=${apiKey}&mode=${mode}&oobCode=${code}&continueUrl=${continueUrl}`,
-				})
-				.then((response) => {
-					if (response.data.ok) {
-						toast.success("Your account has been verified!", {toastId: "verify-successful"});
-						setTimeout(() => {
-							router.push("/");
-						}, 2000);
-						return;
-					}
+	const verifyEmail = (e: any) => {
+		e.preventDefault();
 
-					toast.error("Something went wrong! Please make sure to click the link in your e-mail again!", {toastId: "verify-error"});
-				})
-				.catch(() => {
-					toast.error("Something went wrong! Please make sure to click the link in your e-mail again!", {toastId: "verify-error"});
-				})
-				.finally(() => setIsLoading(false));
-		}
-	}, [apiKey, code, continueUrl, mode, router]);
+		setIsLoading(true);
+		axios
+			.post<{ok: boolean}>("/api/reset/verify", {
+				link: `https://encoach.com/action?apiKey=${apiKey}&mode=${mode}&oobCode=${code}&continueUrl=${continueUrl}`,
+				email,
+			})
+			.then((response) => {
+				if (response.data.ok) {
+					toast.success("Your account has been verified!", {toastId: "verify-successful"});
+					setTimeout(() => {
+						router.push("/");
+					}, 2000);
+					return;
+				}
+
+				toast.error("Something went wrong! Please make sure to click the link in your e-mail again and input the correct e-mail!", {
+					toastId: "verify-error",
+				});
+			})
+			.catch(() => {
+				toast.error("Something went wrong! Please make sure to click the link in your e-mail again and input the correct e-mail!", {
+					toastId: "verify-error",
+				});
+			})
+			.finally(() => setIsLoading(false));
+	};
 
 	const login = (e: FormEvent<HTMLFormElement>) => {
 		e.preventDefault();
@@ -141,9 +148,28 @@ export default function Reset({code, mode, apiKey, continueUrl}: {code: string;
 							<p className="self-start text-sm lg:text-base font-normal text-mti-gray-cool">to your registered Email Address</p>
 						</div>
 						<Divider className="max-w-xs lg:max-w-md" />
-						<form className="flex flex-col items-center gap-6 w-full -lg:px-8 lg:w-1/2" onSubmit={login}>
-							Your e-mail is currently being verified, please wait a second. <br /> <br />
-							Once it has been verified, you will be redirected to the home page.
+						<form className="flex flex-col items-center gap-6 w-full -lg:px-8 lg:w-1/2" onSubmit={verifyEmail}>
+							{isLoading && (
+								<span className="text-center">
+									Your e-mail is currently being verified, please wait a second. <br /> <br />
+									Once it has been verified, you will be redirected to the home page.
+								</span>
+							)}
+							{!isLoading && (
+								<>
+									<span>Please enter your e-mail to verify it</span>
+									<Input
+										name="email"
+										type="email"
+										defaultValue={email}
+										required
+										label="E-mail address"
+										placeholder="Enter your e-mail address"
+										onChange={setEmail}
+									/>
+									<Button className="w-full">Submit</Button>
+								</>
+							)}
 						</form>
 					</section>
 				)}

src/pages/api/reset/verify.ts

@@ -11,21 +11,17 @@ const db = getFirestore(app);
 export default withIronSessionApiRoute(verify, sessionOptions);
 
 async function verify(req: NextApiRequest, res: NextApiResponse) {
-	const {link} = req.body as {link: string};
+	const {link, email} = req.body as {link: string; email: string};
 
-	console.log({user: req.session.user});
+	signInWithEmailLink(auth, email, link)
+		.then(async () => {
+			const userRef = doc(db, "users", req.session.user!.id);
+			await setDoc(userRef, {isVerified: true}, {merge: true});
 
-	if (req.session.user) {
-		signInWithEmailLink(auth, req.session.user.email, link)
-			.then(async () => {
-				const userRef = doc(db, "users", req.session.user!.id);
-				await setDoc(userRef, {isVerified: true}, {merge: true});
+			req.session.user = {...req.session.user!, isVerified: true};
+			await req.session.save();
 
-				req.session.user = {...req.session.user!, isVerified: true};
-				await req.session.save();
-
-				res.status(200).json({ok: true});
-			})
-			.catch(() => res.status(404).json({ok: false}));
-	}
+			res.status(200).json({ok: true});
+		})
+		.catch(() => res.status(404).json({ok: false}));
 }