fixes and improvements

layouts/AuthRedirect.tsx

@@ -20,14 +20,22 @@ export default function AuthRedirect({ children }: Props) {
     if (!router.pathname.startsWith("/public")) {
       if (
         status === "authenticated" &&
-        (router.pathname === "/login" || router.pathname === "/register")
+        (router.pathname === "/login" ||
+          router.pathname === "/register" ||
+          router.pathname === "/confirmation" ||
+          router.pathname === "/forgot")
       ) {
         router.push("/").then(() => {
           setRedirect(false);
         });
       } else if (
         status === "unauthenticated" &&
-        !(router.pathname === "/login" || router.pathname === "/register")
+        !(
+          router.pathname === "/login" ||
+          router.pathname === "/register" ||
+          router.pathname === "/confirmation" ||
+          router.pathname === "/forgot"
+        )
       ) {
         router.push("/login").then(() => {
           setRedirect(false);

lib/api/sendVerificationRequest.ts

@@ -5,8 +5,6 @@ import { createTransport } from "nodemailer";
 export default async function sendVerificationRequest(
   params: SendVerificationRequestParams
 ) {
-  console.log(params);
-
   const { identifier, url, provider, theme } = params;
   const { host } = new URL(url);
   const transport = createTransport(provider.server);

pages/api/auth/[...nextauth].ts

@@ -10,6 +10,8 @@ import { Adapter } from "next-auth/adapters";
 import sendVerificationRequest from "@/lib/api/sendVerificationRequest";
 import { Provider } from "next-auth/providers";
 
+let email;
+
 const providers: Provider[] = [
   CredentialsProvider({
     type: "credentials",
@@ -63,6 +65,7 @@ if (process.env.EMAIL_SERVER && process.env.EMAIL_FROM)
       from: process.env.EMAIL_FROM,
       maxAge: 600,
       sendVerificationRequest(params) {
+        email = params.identifier;
         sendVerificationRequest(params);
       },
     })
@@ -76,6 +79,7 @@ export const authOptions: AuthOptions = {
   providers,
   pages: {
     signIn: "/login",
+    verifyRequest: "/confirmation",
   },
   callbacks: {
     session: async ({ session, token }: { session: Session; token: JWT }) => {

pages/confirmation.tsx

@@ -1,23 +1,24 @@
 import { signIn } from "next-auth/react";
 import React from "react";
 
-export default function EmailConfirmaion({ email }: { email: string }) {
+export default function EmailConfirmaion() {
   return (
     <div className="overflow-y-auto py-2 fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 backdrop-blur-sm flex items-center fade-in z-30">
-      <div className="mx-auto p-3 rounded-xl border border-sky-100 shadow-lg bg-gray-100 text-sky-800">
+      <div className="mx-auto p-3 text-center rounded-xl border border-sky-100 shadow-lg bg-gray-100 text-sky-800">
         <p className="text-center text-2xl mb-2">Please check your email</p>
         <p>A sign in link has been sent to your email address.</p>
-        <div
+        <p>You can safely close this page.</p>
+        {/* <div
           onClick={() =>
             signIn("email", {
-              email,
+              email: email,
               redirect: false,
             })
           }
           className="mx-auto font-semibold mt-2 cursor-pointer w-fit"
         >
           Resend?
-        </div>
+        </div> */}
       </div>
     </div>
   );

pages/forgot.tsx

@@ -1,4 +1,3 @@
-import EmailConfirmaion from "@/components/Modal/EmailConfirmaion";
 import SubmitButton from "@/components/SubmitButton";
 import { signIn } from "next-auth/react";
 import Link from "next/link";
@@ -11,7 +10,6 @@ interface FormData {
 
 export default function Forgot() {
   const [submitLoader, setSubmitLoader] = useState(false);
-  const [showConfirmation, setShowConfirmation] = useState(false);
 
   const [form, setForm] = useState<FormData>({
     email: "",
@@ -23,20 +21,16 @@ export default function Forgot() {
 
       const load = toast.loading("Sending login link...");
 
-      const res = await signIn("email", {
+      await signIn("email", {
         email: form.email,
-        callbackUrl: window.location.origin,
+        callbackUrl: "/",
       });
 
-      setShowConfirmation(true);
-
       toast.dismiss(load);
 
       setSubmitLoader(false);
 
-      if (!res?.ok) {
+      toast.success("Login link sent.");
-        toast.error("Invalid login.");
-      }
     } else {
       toast.error("Please fill out all the fields.");
     }
@@ -44,9 +38,6 @@ export default function Forgot() {
 
   return (
     <>
-      {showConfirmation && form.email ? (
-        <EmailConfirmaion email={form.email} />
-      ) : undefined}
       <p className="text-xl font-bold text-center text-sky-500 mt-10 mb-3">
         Linkwarden
       </p>

pages/register.tsx

@@ -3,7 +3,6 @@ import { useState } from "react";
 import { toast } from "react-hot-toast";
 import SubmitButton from "@/components/SubmitButton";
 import { signIn } from "next-auth/react";
-import EmailConfirmaion from "@/components/Modal/EmailConfirmaion";
 
 const EmailProvider = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
 
@@ -17,7 +16,6 @@ type FormData = {
 
 export default function Register() {
   const [submitLoader, setSubmitLoader] = useState(false);
-  const [showConfirmation, setShowConfirmation] = useState(false);
 
   const [form, setForm] = useState<FormData>({
     name: "",
@@ -50,7 +48,7 @@ export default function Register() {
     const sendConfirmation = async () => {
       await signIn("email", {
         email: form.email,
-        redirect: false,
+        callbackUrl: "/",
       });
     };
 
@@ -76,10 +74,7 @@ export default function Register() {
         setSubmitLoader(false);
 
         if (response.ok) {
-          if (form.email) {
+          if (form.email) await sendConfirmation();
-            await sendConfirmation();
-            setShowConfirmation(true);
-          }
 
           toast.success(
             EmailProvider
@@ -99,9 +94,6 @@ export default function Register() {
 
   return (
     <>
-      {showConfirmation && form.email ? (
-        <EmailConfirmaion email={form.email} />
-      ) : undefined}
       <p className="text-xl font-bold text-center my-10 mb-3 text-sky-500">
         Linkwarden
       </p>