feat: email verify when register, error message

Author: topstar210

app/(auth)/layout.tsx

@@ -2,6 +2,9 @@ import { NextAuthProvider } from "../Provider";
 import Header from "@/components/Header";
 import "./globals.css";
 
+import 'react-toastify/dist/ReactToastify.css';
+import { ToastContainer } from 'react-toastify';
+
 export default function RootLayout({
   children,
 }: {
@@ -14,6 +17,7 @@ export default function RootLayout({
           <Header />
           {children}
         </NextAuthProvider>
+        <ToastContainer />
       </body>
     </html>
   );

app/(auth)/register/Form.tsx

@@ -6,7 +6,9 @@ import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { useForm, SubmitHandler } from "react-hook-form";
 import Loader from "../loading";
-import { useSession } from "next-auth/react";
+import { useSession, signIn } from "next-auth/react";
+import axios from "axios";
+import { toast } from "react-toastify";
 
 type Inputs = {
   email: string;
@@ -38,23 +40,16 @@ const Form = () => {
 
   const formSubmit: SubmitHandler<Inputs> = async (form) => {
     const { fullName, email, password } = form;
-    try {
-      const res = await fetch("/api/auth/register", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          fullName,
-          email,
-          password,
-        }),
-      });
-      res.status === 201 &&
-        router.push("/login?success=Account has been created");
-    } catch (err: any) {
-      setMessage(err);
-    }
+    
+    await axios.post("/api/auth/register", {
+      fullName,
+      email,
+      password,
+    }).then((res:any) => {
+      signIn("email", { email })
+    }).catch((err:any) => {
+      toast(err?.response?.data, { type: 'error' })
+    })
   };
 
   return (

package-lock.json

@@ -14,18 +14,21 @@
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
     "autoprefixer": "10.4.15",
+    "axios": "^1.6.2",
     "bcryptjs": "^2.4.3",
     "eslint": "8.47.0",
     "eslint-config-next": "13.4.19",
     "hamburger-react": "^2.5.0",
     "mongoose": "^7.4.5",
     "next": "13.4.19",
     "next-auth": "^4.23.1",
+    "nodemailer": "^6.9.7",
     "postcss": "8.4.28",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.45.4",
     "react-icons": "^4.10.1",
+    "react-toastify": "^9.1.3",
     "tailwindcss": "3.3.3",
     "typescript": "5.2.2"
   },

package.json

@@ -3,6 +3,7 @@ import type { NextAuthOptions } from "next-auth";
 import { MongoDBAdapter } from "@next-auth/mongodb-adapter";
 import GoogleProvider from "next-auth/providers/google";
 import CredentialsProvider from "next-auth/providers/credentials";
+import EmailProvider from "next-auth/providers/email"
 import dbConnect from "./dbConnect";
 import clientPromise from "./clientPromise";
 import bcrypt from "bcryptjs";
@@ -59,11 +60,27 @@ export const authOptions: NextAuthOptions = {
         }
       },
     }),
+
+    EmailProvider({
+      server: {
+        host: process.env.EMAIL_SERVER_HOST,
+        port: process.env.EMAIL_SERVER_PORT,
+        secureConnection: false,
+        requiresAuth: true,
+        domains: ["gmail.com", "googlemail.com"],
+        auth: {
+          user: process.env.EMAIL_SERVER_USER,
+          pass: process.env.EMAIL_SERVER_PASSWORD
+        },  
+        tls: { rejectUnauthorized: false }
+      },
+      from: process.env.EMAIL_FROM,
+      maxAge: 2 * 60 * 60, // How long email links are valid for (default 24h)
+    }),
   ],
   pages: {
     signIn: "/login",
     newUser: "/my/dashboard",
-    error: "/login",
   },
   callbacks: {
     // We can pass in additional information from the user document MongoDB returns