Features
Auth

Authentication Guide

This boilerplate project includes a robust and flexible authentication system powered by NextAuth.js, enabling you to set up authentication quickly and easily for Email, Google, and other providers such as Facebook and GitHub.

Key Features

  • Quick Setup: Configure authentication in under a minute.
  • Multiple Providers: Built-in support for Email and Google, with easy extension for additional providers like Facebook and GitHub.
  • Customizable: Easily modify the logo and branding.

Setup Authentication

Step 1: Update Environment Variables

To set up authentication providers, update the environment variables in your project. Add the following variables to your .env file:

MONGODB_URI=your-mongodb-connection-string
NEXTAUTH_SECRET=your-random-secret
SENDGRID_API_KEY=your-sendgrid-api-key
GOOGLE_ID=your-google-client-id
GOOGLE_SECRET=your-google-client-secret
  • MONGODB_URI: MongoDB connection string.
  • NEXTAUTH_SECRET: Random string for securing NextAuth.js.
  • SENDGRID_API_KEY: API key from SendGrid for email sending.
  • GOOGLE_ID: Google client ID for OAuth.
  • GOOGLE_SECRET: Google client secret for OAuth.

Step 2: Customize the Logo

You can customize the authentication pages by modifying the ...nextAuth.js file. This includes changing the logo and other UI elements. Here is an example of how to customize the logo:

export default NextAuth({
  ...
  theme: {
    logo: "/path-to-your-logo.png",
    ...
  },
});

Step 3: Add Additional Providers (Optional)

To add more providers like Facebook and GitHub, include their configurations in the providers array:

import NextAuth from "next-auth";
import Providers from "next-auth/providers";
 
export default NextAuth({
  providers: [
    Providers.Email({
      server: process.env.SENDGRID_API_KEY,
      from: "your-email@example.com",
    }),
    Providers.Google({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
    }),
    Providers.Facebook({
      clientId: process.env.FACEBOOK_ID,
      clientSecret: process.env.FACEBOOK_SECRET,
    }),
    Providers.GitHub({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
  ],
  // Additional NextAuth.js configuration options
});

Add the respective environment variables to your .env file:

FACEBOOK_ID=your-facebook-client-id
FACEBOOK_SECRET=your-facebook-client-secret
GITHUB_ID=your-github-client-id
GITHUB_SECRET=your-github-client-secret

By following these steps, you can easily configure and extend the authentication system to meet your project's needs.

FacebookChatGPT