NextAuth.js Authentication With MongoDB

1
npx create-next-app@latest mongodb-auth

1
create-next-app@14.2.3
2
Ok to proceed? (y) y
3
✔ Would you like to use TypeScript? …  Yes
4
✔ Would you like to use ESLint? …  Yes
5
✔ Would you like to use Tailwind CSS? …  Yes
6
✔ Would you like to use `src/` directory? … No
7
✔ Would you like to use App Router? (recommended) …  Yes
8
✔ Would you like to customize the default import alias (@/*)? … No

1
cd mongo-auth
2
npm install next-auth bcryptjs mongoose
3
npm install –-save-dev @types/bcryptjs

1
MONGODB_URI=mongodb://127.0.0.1:27017/mydb

1
import mongoose from "mongoose";
2
const { MONGODB_URI } = process.env;
3
export const connectDB = async () => {
4
  try {
5
    const { connection } = await mongoose.connect(MONGODB_URI as string);
6
    if (connection.readyState === 1) {
7
      return Promise.resolve(true);
8
    }
9
  } catch (error) {
10
    console.error(error);
11
    return Promise.reject(error);
12
  }
13
};

1
import  mongoose, { Schema, model } from  "mongoose";

1
export interface UserDocument {
2
  _id: string;
3
  email: string;
4
  password: string;
5
  name: string;
6
  phone: string;
7
  image: string;
8
  createdAt: Date;
9
  updatedAt: Date;
10
}

1
const UserSchema = new Schema<UserDocument>({
2
    email: {
3
      type: String,
4
      unique: true,
5
      required: [true, "Email is required"],
6
      match: [
7
        /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/,
8
        "Email is invalid",
9
      ],
10
    },
11
    password: {
12
      type: String,
13
      required: true
14
    },
15
    name: {
16
      type: String,
17
      required: [true, "Name is required"]
18
    }
19
  },
20
  {
21
    timestamps: true,
22
  }
23
);

1
const  User  =  mongoose.models?.User  ||  model<UserDocument>('User', UserSchema);
2
export  default  User;

1
npx auth secret

1
AUTH_SECRET=bVNtF3X1k0QwTD9bx5xUUHOFWAwMXwNdvoF9D8AdgtE=

1
import { connectDB } from "@/lib/mongodb";
2
import User from "@/models/User";
3
import type { NextAuthOptions } from "next-auth";
4
import credentials from "next-auth/providers/credentials";
5
import bcrypt from "bcryptjs";

1
export const authOptions: NextAuthOptions  = {
2
  providers: [
3
    credentials({
4
      name: "Credentials",
5
      id: "credentials",
6
      credentials: {
7
        email: { label: "Email", type: "text" },
8
        password: { label: "Password", type: "password" },
9
      },
10
      async authorize(credentials) {},
11
    }),
12
  ],
13
  session: {
14
    strategy: "jwt",
15
  }
16
};

1
await connectDB();
2
const user = await User.findOne({
3
  email: credentials?.email,
4
}).select("+password");
5
6
if (!user) throw new Error("Wrong Email");
7
8
const passwordMatch = await bcrypt.compare(
9
  credentials!.password,
10
  user.password
11
);
12
13
if (!passwordMatch) throw new Error("Wrong Password");
14
return user;

1
import { authOptions } from "@/lib/auth";
2
import NextAuth from "next-auth";
3
const handler = NextAuth(authOptions);
4
export { handler as GET, handler as POST };

1
"use server"
2
import { connectDB } from "@/lib/mongodb";
3
import User from "@/models/User";
4
import bcrypt from "bcryptjs";

1
export const register = async (values: any) => {
2
    const { email, password, name } = values;
3
4
    try {
5
        await connectDB();
6
        const userFound = await User.findOne({ email });
7
        if(userFound){
8
            return {
9
                error: 'Email already exists!'
10
            }
11
        }
12
        const hashedPassword = await bcrypt.hash(password, 10);
13
        const user = new User({
14
          name,
15
          email,
16
          password: hashedPassword,
17
        });
18
        const savedUser = await user.save();
19
20
    }catch(e){
21
        console.log(e);
22
    }
23
}

1
"use client";
2
import { FormEvent, useState } from "react";
3
import { signIn } from "next-auth/react";
4
import { useRouter } from "next/navigation";
5
import Link from "next/link";

1
export default function Login() {};

1
const [error, setError] = useState("");
2
const router = useRouter();

1
const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
2
    event.preventDefault();
3
    const formData = new FormData(event.currentTarget);
4
    const res = await signIn("credentials", {
5
      email: formData.get("email"),
6
      password: formData.get("password"),
7
      redirect: false,
8
    });
9
    if (res?.error) {
10
      setError(res.error as string);
11
    }
12
    if (res?.ok) {
13
      return router.push("/");
14
    }
15
};

1
return (
2
    <section className="w-full h-screen flex items-center justify-center">
3
      <form
4
        className="p-6 w-full max-w-[400px] flex flex-col justify-between items-center gap-2 
5
        border border-solid border-black bg-white rounded"
6
        onSubmit={handleSubmit}>
7
        {error && <div className="text-black">{error}</div>}
8
        <h1 className="mb-5 w-full text-2xl font-bold">Sign In</h1>
9
        <label className="w-full text-sm">Email</label>
10
        <input
11
          type="email"
12
          placeholder="Email"
13
          className="w-full h-8 border border-solid border-black rounded p-2"
14
          name="email" />
15
        <label className="w-full text-sm">Password</label>
16
        <div className="flex w-full">
17
          <input
18
            type="password"
19
            placeholder="Password"
20
            className="w-full h-8 border border-solid border-black rounded p-2"
21
            name="password" />
22
        </div>
23
        <button className="w-full border border-solid border-black rounded">
24
          Sign In
25
        </button>
26
27
        <Link
28
          href="/register"
29
          className="text-sm text-[#888] transition duration-150 ease hover:text-black">
30
          Don't have an account?
31
        </Link>
32
      </form>
33
    </section>
34
);

1
"use client";
2
import { FormEvent, useRef, useState } from "react";
3
import { useRouter } from "next/navigation";
4
import Link from "next/link";
5
import { register } from "@/actions/register";
6
7
8
export default function Register() {
9
  const [error, setError] = useState<string>();
10
  const router = useRouter();
11
  const ref = useRef<HTMLFormElement>(null);
12
}

1
const handleSubmit = async (formData: FormData) => {
2
    const r = await register({
3
        email: formData.get("email"),
4
        password: formData.get("password"),
5
        name: formData.get("name")    
6
      });
7
      ref.current?.reset();
8
      if(r?.error){
9
        setError(r.error);
10
        return;
11
      } else {
12
        return router.push("/login");
13
      }
14
};

1
return(
2
<section className="w-full h-screen flex items-center justify-center">
3
      <form ref = {ref}
4
        action={handleSubmit}
5
        className="p-6 w-full max-w-[400px] flex flex-col justify-between items-center gap-2 
6
        border border-solid border-black bg-white rounded">
7
        {error && <div className="">{error}</div>}
8
        <h1 className="mb-5 w-full text-2xl font-bold">Register</h1>
9
10
        <label className="w-full text-sm">Full Name</label>
11
        <input
12
          type="text"
13
          placeholder="Full Name"
14
          className="w-full h-8 border border-solid border-black py-1 px-2.5 rounded text-[13px]"
15
          name="name"
16
        />
17
18
        <label className="w-full text-sm">Email</label>
19
        <input
20
          type="email"
21
          placeholder="Email"
22
          className="w-full h-8 border border-solid border-black py-1 px-2.5 rounded"
23
          name="email"
24
        />
25
26
        <label className="w-full text-sm">Password</label>
27
        <div className="flex w-full">
28
          <input
29
            type="password"
30
            placeholder="Password"
31
            className="w-full h-8 border border-solid border-black py-1 px-2.5 rounded"
32
            name="password"
33
          />
34
        </div>
35
36
        <button className="w-full border border-solid border-black py-1.5 mt-2.5 rounded
37
        transition duration-150 ease hover:bg-black">
38
          Sign up
39
        </button>
40
41
        
42
        <Link href="/login" className="text-sm text-[#888] transition duration-150 ease hover:text-black">
43
          Already have an account?
44
          </Link>
45
      </form>
46
</section>
47
)

1
"use client";
2
3
import { SessionProvider } from "next-auth/react";
4
5
type Props = {
6
  children?: React.ReactNode;
7
};
8
9
export const Provider = ({ children }: Props) => {
10
  return <SessionProvider>{children}</SessionProvider>;
11
};

1
import { Provider } from  "./provider";

1
export default function RootLayout({
2
  children,
3
}: Readonly<{
4
  children: React.ReactNode;
5
}>) {
6
  return (
7
    <html lang="en">
8
      <Provider>
9
        <body className={inter.className}>{children}</body>
10
      </Provider>
11
    </html>
12
  );
13
}

1
"use client";
2
import { signOut, useSession } from "next-auth/react";
3
import Link from "next/link";
4
import { useRouter } from "next/navigation";
5
6
export default function Home() {
7
  const { status } = useSession();
8
  const router = useRouter();
9
10
  const showSession = () => {
11
    if (status === "authenticated") {
12
      return (
13
        <button
14
          className="border border-solid border-black rounded"
15
          onClick={() => {
16
            signOut({ redirect: false }).then(() => {
17
              router.push("/");
18
            });
19
20
          }}
21
        >
22
          Sign Out
23
        </button>
24
      )
25
    } else if (status === "loading") {
26
      return (
27
        <span className="text-[#888] text-sm mt-7">Loading...</span>
28
      )
29
    } else {
30
      return (
31
        <Link
32
          href="/login"
33
          className="border border-solid border-black rounded"
34
        >
35
          Sign In
36
        </Link>
37
      )
38
    }
39
  }
40
  return (
41
    <main className="flex min-h-screen flex-col items-center justify-center">
42
      <h1 className="text-xl">Home</h1>
43
      {showSession()}
44
    </main>
45
  );
46
}

1
@tailwind base;
2
@tailwind components;
3
@tailwind utilities;