cli

Overview

You have to run the following command to install the complete mongodb setup.

Project Setup

• Start from the scratch by initializing a new Next.js project using the following command.

npx create-next-app@latest

- Project name : my-app(default)
- Use TypeScript: Yes
- Use ESLint: Yes
- Use Tailwind CSS: Yes
- Use src/ directory: Yes/no // Your choice.
- Use App Router: Yes
- Use Turbopack: Yes
- Customize the default import alias (@/*): No

Explain

• my-app: The name of your project directory. Replace this with your desired project name.
• typescript: Initializes the project with TypeScript configuration.
• eslint: Sets up ESLint for linting your code.
• tailwind: Includes Tailwind CSS for styling.
• src-dir: Creates a src/ directory and places your application code inside it.
• router: Enables the App Router feature.
• alias: Customizes the default import alias (@/*) to a custom path.

Install Required Packages

To apply the Authentication feature, you will need the following packages:

• next-auth
• react-hook-form
• zod
• mongoose
• bcryptjs
• sonner
• next-themes
• @hookform/resolvers
• axios

Install the required packages by running the following command:

pnpm install next-auth react-hook-form zod mongoose bcryptjs sonner next-themes @hookform/resolvers axios

Run This CLI

• To install the setup complete authentication in nextjs.

pnpm dlx shadcn@latest add https://shadwui.com/r/mongodb.json

Now you get full authentication setup done.

ENV Setup

Already have a .env.local file in the root of your project.

MONGODB_URI= #Paste you mongodb uri here
 
NEXTAUTH_URL=http://localhost:3000 # For the development environment change it to production url
NEXTAUTH_SECRET=
 
GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=

mongodb

You can get the mongodb uri from the mongodb atlas.

Google

You can get it from the Google Developer Console.

Note: You can also use other providers like facebook, github, twitter, discord, twitch, slack, okta, twitch, auth0, cognito, identity-server, credentials, email, etc. Check the next-auth documentation for more information.

Done

Now the full authentication setup done