NextAuth.js is a robust authentication library built for Next.js applications. NextAuth.js streamlines the integration of authentication functionalities and offers compatibility with numerous authentication methods, including OAuth providers (Google, Github, etc.), email/password logins, and more. This tutorial guides you through setting up NextAuth.js for user authentication with email and password in your Next.js 14 application. > You can find the code from this [GitHub repository](https://github.com/mongodb-developer/nextauth-mongodb). ## What is Next-Auth? Next-Auth is an authentication library designed for Next.js applications specifically. Put simply, Next-Auth makes it easier to add authentication to your Next.js applications. It provides a more seamless integration of authentication functionalities. Next-Auth also provides better compatibility with other authentication methods, like OAuth providers (Google, GitHub, etc.). Next-Auth offers a set of user-friendly APIs and other components that can handle very complex authentication flows. This means developers can focus more on building their applications. Out of the box, Next-Auth provides excellent authentication security and built-in session handling. It's appropriate for applications of all sizes and works well with serverless and edge computing environments. It also has full TypeScript support, for an improved developer experience. ## Requirements Before we dive in, make sure you have the following prerequisites: - Node.js v20: Make sure you have Node.js installed on your machine. You can download it from the official website. - React and Next.js 14: A basic understanding of React and Next.js 14 is helpful for this tutorial. - (Optional) Have [MongoDB Community Edition 7.0](https://www.mongodb.com/docs/manual/administration/install-community/) installed and running. Ensure you have the mongodb-community service started locally. Alternatively, you can use a free-forever [MongoDB Atlas cluster](https://www.mongodb.com/cloud/atlas/register). ## Creating the Next.js project Let's create a new Next.js project using the following command in your terminal: ```bash npx create-next-app@latest mongodb-auth ``` Answer the questions as follows: ```bash create-next-app@14.2.3 Ok to proceed? (y) y ✔ Would you like to use TypeScript? … Yes ✔ Would you like to use ESLint? … Yes ✔ Would you like to use Tailwind CSS? … Yes ✔ Would you like to use `src/` directory? … No ✔ Would you like to use App Router? (recommended) … Yes ✔ Would you like to customize the default import alias (@/*)? … No ``` After the prompts, create-next-app will create a folder with your project name and install the required dependencies. ## Installing dependencies Navigate inside your project and install the following dependencies: ```bash cd mongo-auth npm install next-auth bcryptjs mongoose npm install –-save-dev @types/bcryptjs ``` The next-auth package provides authentication functionalities for Next.js applications. The next-auth package also offers built-in support for various authentication providers and allows for easy integration with your application. The bcryptjs library provides functions for hashing passwords using the bcrypt algorithm. It's commonly used for securely storing passwords in databases by generating salted password hashes. Mongoose is an object data modeling (ODM) library for MongoDB and Node.js. It provides a straightforward, schema-based solution to model your application data, making it easier to work with MongoDB databases. After installing these dependencies, you'll have the necessary tools and libraries to set up authentication features in your Next.js application, integrate with MongoDB, securely hash passwords, and define data models using Mongoose. ## Connecting to MongoDB After installing the dependencies, it's time for connecting to MongoDB. Create a `.env.local` file in the root of your project and add your MongoDB connection string: ```text MONGODB_URI=mongodb://127.0.0.1:27017/mydb ``` > Note: If you are connecting to a MongoDB Atlas cluster, you can find your [connection string](https://www.mongodb.com/docs/guides/atlas/connection-string/) in the Atlas dashboard. Create a `lib/mongodb.ts` file and add the following code for connecting to a MongoDB database using `mongoose`: ```ts import mongoose from "mongoose"; const { MONGODB_URI } = process.env; export const connectDB = async () => { try { const { connection } = await mongoose.connect(MONGODB_URI as string); if (connection.readyState === 1) { return Promise.resolve(true); } } catch (error) { console.error(error); return Promise.reject(error); } }; ``` We are importing the `mongoose` library, which is a popular ODM Node.js library for MongoDB. Next, we retrieve the MongoDB URI from the environment variables. Then, we define an asynchronous function named `connectDB` that connects to the MongoDB database using the URI obtained from the environment variables. Inside the `connectDB` function, we use a `try...catch` block to handle any potential errors that may occur during the database connection process. Within the `try` block, we use `mongoose.connect()` to establish a connection to the MongoDB database using the provided URI. If the connection is successful, we resolve the promise with a value of `true`. If any errors occur during the connection process, they are caught by the `catch` block. In this case, we log the error to the console and reject the promise with the caught error. Next, create a `models/User.ts` file and start by adding the following imports: ```ts import mongoose, { Schema, model } from "mongoose"; ``` Add the user interface: ```ts export interface UserDocument { _id: string; email: string; password: string; name: string; phone: string; image: string; createdAt: Date; updatedAt: Date; } ``` Add the user schema: ```ts const UserSchema = new Schema({ email: { type: String, unique: true, required: [true, "Email is required"], match: [ /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/, "Email is invalid", ], }, password: { type: String, required: true }, name: { type: String, required: [true, "Name is required"] } }, { timestamps: true, } ); ``` This defines a Mongoose schema for a user document. The `UserSchema` specifies the structure and validation rules for user data stored in a MongoDB collection. Finally, export the user model: ```ts const User = mongoose.models?.User || model('User', UserSchema); export default User; ``` This ensures that the user model is defined and available for use in the application, either by retrieving an existing model or creating a new one based on the specified schema. ## Configuring NextAuth.js First, we need a NextAuth secret key. This secret key is used to encrypt JWT tokens and session data. You can get it simply by running this command on your terminal and it will generate a random key for you: ```bash npx auth secret ``` You need to copy the secret to your `.env` file: ```text AUTH_SECRET=bVNtF3X1k0QwTD9bx5xUUHOFWAwMXwNdvoF9D8AdgtE= ``` Create a `lib/auth.ts` file and start by adding the following imports: ```ts import { connectDB } from "@/lib/mongodb"; import User from "@/models/User"; import type { NextAuthOptions } from "next-auth"; import credentials from "next-auth/providers/credentials"; import bcrypt from "bcryptjs"; ``` Define a NextAuth options object as follows: ```ts export const authOptions: NextAuthOptions = { providers: [ credentials({ name: "Credentials", id: "credentials", credentials: { email: { label: "Email", type: "text" }, password: { label: "Password", type: "password" }, }, async authorize(credentials) {}, }), ], session: { strategy: "jwt", } }; ``` In the `authorize()` function, add the following code: ```ts await connectDB(); const user = await User.findOne({ email: credentials?.email, }).select("+password"); if (!user) throw new Error("Wrong Email"); const passwordMatch = await bcrypt.compare( credentials!.password, user.password ); if (!passwordMatch) throw new Error("Wrong Password"); return user; ``` This code verifies the user's credentials (email and password) against those stored in a MongoDB database. It ensures that the provided credentials are valid before allowing the user to proceed with authentication. Next, create an `app/api/auth/[...nextauth]/route.ts` file and add the following code: ```ts import { authOptions } from "@/lib/auth"; import NextAuth from "next-auth"; const handler = NextAuth(authOptions); export { handler as GET, handler as POST }; ``` This code imports authentication options from their module, initializes the authentication handler using those options, and exports the handler to be used for both `GET` and `POST` requests in API routes. ## Creating a server action for registering users In Next.js, a server action refers to any logic or functionality that is executed on the server-side before rendering the page. This can include tasks such as fetching data from an external API, accessing a database, or performing authentication checks. In our case, we'll create a server action for registering users. Inside the root of your project, create an `actions/register.ts` file and start by adding the following imports: ```ts "use server" import { connectDB } from "@/lib/mongodb"; import User from "@/models/User"; import bcrypt from "bcryptjs"; ``` The "use server" directive, placed at the beginning of the file, instructs Next.js to treat the function(s) as a server action. This function can be called from client-side components, but it executes on the server. Export a server action as follows: ```ts export const register = async (values: any) => { const { email, password, name } = values; try { await connectDB(); const userFound = await User.findOne({ email }); if(userFound){ return { error: 'Email already exists!' } } const hashedPassword = await bcrypt.hash(password, 10); const user = new User({ name, email, password: hashedPassword, }); const savedUser = await user.save(); }catch(e){ console.log(e); } } ``` The `register` function handles the process of registering a new user by connecting to the MongoDB database, checking for existing email addresses, hashing passwords, and saving user data to the database. ## Creating pages After setting up NextAuth and implementing a server action for user registration, the next step is to create the login and registration pages. ### Login page To begin with, let's focus on the login page. Create a file named `app/login/page.tsx` and begin by importing the necessary dependencies: ```ts "use client"; import { FormEvent, useState } from "react"; import { signIn } from "next-auth/react"; import { useRouter } from "next/navigation"; import Link from "next/link"; ``` The `use client` directive is used to mark the component as client-side code. This means that the code within this scope will only be executed and available in the user's browser environment, not on the server. Define a function and export it: ```ts export default function Login() {}; ``` In the body of the function, start by adding the following code: ```ts const [error, setError] = useState(""); const router = useRouter(); ``` This establishes state management for error messages and access to the client-side router. Add the `handleSubmit()` function as follows: ```ts const handleSubmit = async (event: FormEvent) => { event.preventDefault(); const formData = new FormData(event.currentTarget); const res = await signIn("credentials", { email: formData.get("email"), password: formData.get("password"), redirect: false, }); if (res?.error) { setError(res.error as string); } if (res?.ok) { return router.push("/"); } }; ``` This defines an asynchronous function that handles form submission for user login. It prevents default form behavior, extracts user credentials from the form using FormData, attempts sign-in using NextAuth.js, and handles successful login by redirecting the user to the home page and potential errors by updating the component's error state. Return the following JSX code: ```jsx return (

); ``` This simply creates a form that allows users to input their email and password for authentication, and it provides a link to navigate to the registration page if they don't have an account yet. This is what the form looks like: ![sign-in form][1] ### Registration page Next, let's create the registration page. Create a `app/register/page.tsx` file and start by adding the following code: ```ts "use client"; import { FormEvent, useRef, useState } from "react"; import { useRouter } from "next/navigation"; import Link from "next/link"; import { register } from "@/actions/register"; export default function Register() { const [error, setError] = useState(); const router = useRouter(); const ref = useRef(null); } ``` This creates a client-side component that initializes state for error handling, utilizes Next.js router for navigation, and provides a reference to the form element, that will be created below, using a ref. Add the `handleSubmit()` function: ```ts const handleSubmit = async (formData: FormData) => { const r = await register({ email: formData.get("email"), password: formData.get("password"), name: formData.get("name") }); ref.current?.reset(); if(r?.error){ setError(r.error); return; } else { return router.push("/login"); } }; ``` This defines an asynchronous function named `handleSubmit`, which is called when a form is submitted. The function handles the form submission, including extracting form data using FormData, user registration by calling the register server action, error handling, and redirecting the user to the login page upon successful registration. Otherwise, it sets the error that will be displayed. Return the following JSX code: ```jsx return(

) ``` This is how it looks: ![register form][2] ## Using the session provider and displaying the authentication state In this section, we’ll demonstrate how to use the `SessionProvider` in the parent layout to ensure session management is available throughout the application. We’ll retrieve the authentication state from the session and dynamically display a "Sign Out" button if the user is authenticated, or a "Sign In" button if the user is not authenticated. Create a `app/provider.tsx` file and add the following code: ```ts "use client"; import { SessionProvider } from "next-auth/react"; type Props = { children?: React.ReactNode; }; export const Provider = ({ children }: Props) => { return {children}; }; ``` Update the `app/layout.tsx` with the provider we created. First import it: ```ts import { Provider } from "./provider"; ``` Then, add it as follows: ```jsx export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( {children} ); } ``` Update the `app/page.tsx` file as follows: ```ts "use client"; import { signOut, useSession } from "next-auth/react"; import Link from "next/link"; import { useRouter } from "next/navigation"; export default function Home() { const { status } = useSession(); const router = useRouter(); const showSession = () => { if (status === "authenticated") { return ( ) } else if (status === "loading") { return ( Loading... ) } else { return ( Sign In ) } } return (

Home

{showSession()}

); } ``` Update the `app/globals.css` file to remove custom CSS and only keeping the following: ```css @tailwind base; @tailwind components; @tailwind utilities; ``` ## Testing You first need to register from this interface: ![sign-in interface][1] You can then log in from this interface: ![register interfact][2] You’ll be redirected to the home page with the “Sign Out” button that appears only when the user is logged in, and you can use it to log out from the app: ![sign-out button][3] ## Conclusion In this tutorial, we walked through the steps to set up NextAuth.js authentication with MongoDB as the backend database. We started by creating a new Next.js project and installing necessary dependencies. Then, we established a connection to MongoDB using Mongoose and defined a user schema to structure our user data. Next, we configured NextAuth.js by generating a secret key, defining authentication options, and implementing the authorization logic to verify user credentials against MongoDB. We also created server actions for user registration, handling database operations securely on the server-side. After configuring authentication, we created login and registration pages using React components and integrated them with NextAuth.js for authentication. We handled form submissions, error handling, and user redirection based on authentication status. Finally, we updated the layout to include a session provider for managing user sessions and ensured proper display of authentication status on the home page. By following these steps, you can effectively implement authentication in your Next.js application using NextAuth.js and MongoDB, providing a secure and seamless experience for your users while simplifying the authentication setup process for developers. Want to continue the conversation? Head to the [MongoDB Developer Community](https://www.mongodb.com/community/forums/) next. [1]: https://images.contentstack.io/v3/assets/blt39790b633ee0d5a7/blt65469105b9b1e7c5/6685b2aecf6f65ce6f6e4b00/nextauth-img-1.png [2]: https://images.contentstack.io/v3/assets/blt39790b633ee0d5a7/blt40d3ad05da1f2a9e/6685b2aea4dbae35da4d8c7a/nextauth-img-2.png [3]: https://images.contentstack.io/v3/assets/blt39790b633ee0d5a7/bltc63aef3514c54a12/6685b2ae42bface63d868a25/nextauth-img-3.png

Mongoose

All Mongoose Content

Related Topics