-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' of https://github.com/Ikuzweshema/next-auth-example
- Loading branch information
Showing
1 changed file
with
98 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,36 +1,111 @@ | ||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). | ||
# Next.js Authentication Example with NextAuth.js | ||
|
||
## Getting Started | ||
This repository provides an example authentication system for Next.js using **NextAuth.js**. It includes user authentication with providers such as Google, GitHub, and credentials-based login, utilizing MongoDB as the database. | ||
|
||
First, run the development server: | ||
## Table of Contents | ||
|
||
```bash | ||
npm run dev | ||
# or | ||
yarn dev | ||
# or | ||
pnpm dev | ||
# or | ||
bun dev | ||
``` | ||
- [Introduction](#introduction) | ||
- [Features](#features) | ||
- [Prerequisites](#prerequisites) | ||
- [Installation](#installation) | ||
- [Environment Variables Setup](#environment-variables-setup) | ||
- [Database Setup](#database-setup) | ||
- [Running the Project](#running-the-project) | ||
- [Contributing](#contributing) | ||
- [License](#license) | ||
|
||
## Introduction | ||
|
||
This project demonstrates how to integrate Next.js with **NextAuth.js** for a fully functional authentication system. It supports multiple providers and stores user data in a MongoDB database using **Prisma** as an ORM. | ||
|
||
## Features | ||
|
||
- Authentication with Google, GitHub, and credentials | ||
- Session management using **NextAuth.js** | ||
- MongoDB as a persistent database via **Prisma ORM** | ||
- Secure environment with `.env` configuration | ||
|
||
## Prerequisites | ||
|
||
Before you begin, ensure you have the following installed on your system: | ||
|
||
- [Node.js](https://nodejs.org/) | ||
- [PNPM](https://pnpm.io/) (for package management) | ||
- [MongoDB](https://www.mongodb.com/) (for database setup) | ||
- [Prisma CLI](https://www.prisma.io/docs/concepts/components/prisma-cli) (for database schema management) | ||
|
||
## Installation | ||
|
||
Follow these steps to install and set up the project: | ||
|
||
1. **Clone the repository:** | ||
|
||
```bash | ||
git clone https://github.com/Ikuzweshema/next-auth-example.git | ||
``` | ||
|
||
2. **Navigate to the project directory:** | ||
|
||
```bash | ||
cd next-auth-example | ||
```` | ||
|
||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. | ||
3. **Install dependencies using PNPM:** | ||
|
||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. | ||
```bash | ||
pnpm install | ||
``` | ||
|
||
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. | ||
## Environment Variables Setup | ||
|
||
## Learn More | ||
Next, you need to set up the environment variables for the project. Create a `.env` file in the root directory and configure the following variables: | ||
|
||
To learn more about Next.js, take a look at the following resources: | ||
# .env file | ||
|
||
NEXTAUTH_SECRET=your-nextauth-secret | ||
|
||
# | ||
GOOGLE_CLIENT_ID=your-google-client-id | ||
# | ||
GOOGLE_CLIENT_SECRET=your-google-client-secret | ||
# | ||
GITHUB_ID=your-github-id | ||
# | ||
GITHUB_SECRET=your-github-secret | ||
# | ||
DATABASE_URL=mongodb+srv://username:[email protected]/dbname | ||
|
||
|
||
Ensure you replace the placeholder values with your actual credentials. | ||
|
||
## Database Setup | ||
|
||
The project uses **Prisma** to manage the database schema. To set up the MongoDB database: | ||
|
||
1. **Create a MongoDB database** on [MongoDB Atlas](https://www.mongodb.com/cloud/atlas) or any other MongoDB provider. | ||
|
||
2. Push the Prisma schema to the database using this command: | ||
|
||
```bash | ||
pnpm prisma db push | ||
``` | ||
|
||
This will synchronize your Prisma schema with your MongoDB database. | ||
|
||
## Running the Project | ||
|
||
Once you have the environment variables and database set up, you can start the development server: | ||
|
||
```bash | ||
pnpm dev | ||
``` | ||
|
||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. | ||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. | ||
The application will be running locally on [http://localhost:3000](http://localhost:3000) . | ||
|
||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! | ||
## Contributing | ||
|
||
## Deploy on Vercel | ||
Contributions are welcome! If you would like to contribute to this project, feel free to submit a pull request. Please ensure your contributions follow the project's coding standards. | ||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. | ||
## License | ||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. | ||
This project is licensed under the **MIT License**. See the [LICENSE](LICENSE) file for more details. |