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,11 +45,14 @@ export default function Reset({code, mode, apiKey, continueUrl}: {code: string;
 		redirectIfFound: true,
 	});
 
-	useEffect(() => {
-		if (mode === "signIn") {
+	const verifyEmail = (e: any) => {
+		e.preventDefault();
+
+		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) {
@@ -59,14 +63,17 @@ export default function Reset({code, mode, apiKey, continueUrl}: {code: string;
 					return;
 				}
 
-					toast.error("Something went wrong! Please make sure to click the link in your e-mail again!", {toastId: "verify-error"});
+				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!", {toastId: "verify-error"});
+				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));
-		}
-	}, [apiKey, code, continueUrl, mode, router]);
+	};
 
 	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}>
+						<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,12 +11,9 @@ 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});
-
-	if (req.session.user) {
-		signInWithEmailLink(auth, req.session.user.email, link)
+	signInWithEmailLink(auth, email, link)
 		.then(async () => {
 			const userRef = doc(db, "users", req.session.user!.id);
 			await setDoc(userRef, {isVerified: true}, {merge: true});
@@ -28,4 +25,3 @@ async function verify(req: NextApiRequest, res: NextApiResponse) {
 		})
 		.catch(() => res.status(404).json({ok: false}));
 }
-}