Introduction

Authentication is a crucial aspect of modern web applications, providing a secure way for users to access personalized content and features. In this tutorial, we'll be creating a Next.js project that demonstrates the implementation of Google, GitHub, and custom credential login using the NextAuth.js library. This app will provide a seamless authentication experience with a clean and responsive user interface.

Features

Our Next.js authentication project will have the following features:

• Google, GitHub, and Custom Credential Authentication: The authentication system we're looking at supports Google and GitHub account authentication, as well as custom email and password-based authentication. This functionality is evident from the handleGoogleSignin, handleGithubSignin, and signIn functions in the login.js file. By offering multiple sign-in options, the project caters to a wider range of users and increases the likelihood of successful user onboarding.

• Responsive Design: To ensure a smooth user experience across various devices and screen sizes, the project utilizes Tailwind CSS classes for its responsive design. With this adaptive approach, the interface elements automatically adjust to provide optimal usability, regardless of whether the user is on a desktop, tablet, or smartphone.

• Clean and Modern User Interface: A clean and modern user interface is essential for creating an intuitive and enjoyable user experience. This project features components like index.js, login.js, and register.js, which makes up the interface. The design is styled with custom CSS classes and Tailwind CSS, resulting in a visually appealing and easy-to-use application.

• Proper Form Validation: Form validation is crucial for ensuring that users enter valid information into the system. This project implements form validation using the useFormik hook from the Formik library. The login_validate and registerValidate functions in the lib/validate.js file are used to validate the input fields for login and registration forms. This helps prevent invalid data from being submitted, which could lead to security issues or other problems down the line.

• Informative Error Handling: If validation fails or an error occurs during the authentication process, it's important to provide clear feedback to the user. This project achieves this by displaying error messages in the login.js and register.js files. These messages are conditionally rendered depending on whether there are errors in the form fields, helping users quickly identify and correct any issues.

Tech Stack

The technologies we'll be using to build this project include:

• Next.js

• NextAuth.js

• React

• Mongoose

• Tailwind CSS

Getting Started

To begin, let's walk through the steps needed to set up and run the project.

Step 1: Clone the repository

First, clone the GitHub repository containing the project:

git clone https://github.com/Ritavdas/NextJS-Auth.git

Step 2: Change the directory

Navigate to the newly created directory:

cd NextJS-Auth

Step 3: Install the dependencies

To install all the required dependencies, run the following command:

npm install

Step 4: Set up environment variables

Rename the .env.example file to .env.local and set up the required environment variables:

NEXTAUTH_URL=http://localhost:3000
MONGODB_URI=your_mongodb_uri
GOOGLE_ID=your_google_client_id
GOOGLE_SECRET=your_google_client_secret
GITHUB_ID=your_github_client_id
GITHUB_SECRET=your_github_client_secret

Remember to replace the placeholders with your actual credentials.

Step 5: Start the development server

Launch the development server with the following command:

npm run dev

Step 6: Test the application

Open your browser and navigate to http://localhost:3000 to test the application.

Conclusion

You have successfully created a Next.js project that implements Google, GitHub, and custom credential login using the NextAuth.js library. This application provides a seamless authentication experience with a clean and responsive user interface. Feel free to customize and expand this project to meet your specific needs.

The GitHub repository for this project can be found at: github.com/Ritavdas/NextJS-Auth

The deployed project can be accessed here: next-js-auth-psi.vercel.app