logoCraftlyTech

Advanced Authentication in Next.js with Tailwind CSS

OVERVIEW • APR 2025

Authentication Template

Getting Started

Welcome to the comprehensive guide for using our Authentication Template. This powerful tool simplifies the implementation of secure user authentication in your projects.

FEATURES • APR 2025

Key Features

Our Authentication Template is designed to simplify the implementation of secure user authentication in your web and mobile applications. With support for social logins, JWT-based sessions, and email verification, this template saves you time while maintaining high security standards.

Social Logins
Seamless integration with Google and GitHub authentication.
JWT Sessions
Secure token-based authentication for robust session management.
Email Verification
Confirm user identities with email-based OTP verification.
Scalable Architecture
Modular design for both frontend and backend components.

INSTALLATION • APR 2025

SetUp Guide

Quick Start
Get up and running in minutes
  1. Download and Extract the Template

    Extract the template to your preferred project directory and open it in your code editor.

  2. Install Dependencies

    Open Frontend & Backend in different terminals


    cd Frontend
npm install --legacy-peer-deps

cd ../Backend
npm install
  3. Configure Environment Variables

    Create a .env file in the backend & frontend directory with the necessary environment variables (details in the next section).

  4. Start the Application
    cd Backend
npm run dev
  5. Test the Application

    Open your browser and visit http://localhost:3000 to interact with the login interface.

CONFIGURATION • APR 2025

Environment Configuration

Setting up your .env file
Configure your environment variables for optimal security

Create a .env file in the backend directory with the following variables:

MONGODB_URI=mongodb://localhost:27017/your_database

FRONTEND_URL=http://localhost:3000

BACKEND_URL=http://localhost:5000

SESSION_SECRET=your_secret_key

JSONWEBTOKEN_SECRET=your_jwt_secret

EMAIL_HOST=smtp.example.com

EMAIL_PORT=587

EMAIL_FROM=your_email@example.com

EMAIL_PASS=your_email_password

GOOGLE_CLIENT_ID=your_google_client_id

GOOGLE_CLIENT_SECRET=your_google_client_secret

GITHUB_CLIENT_ID=your_github_client_id

GITHUB_CLIENT_SECRET=your_github_client_secret

SESSION_SECRET & JWT_TOKEN

Use a secure random string generator to create these secret keys. You can use the following command in your terminal:

"node -e "console.log(require('crypto').randomBytes(64).toString('hex'))""

Run this command twice to generate both SESSION_SECRET and JSONWEBTOKEN_SECRET.


Secret Key Generation

Email Configuration

To set up email configuration for Gmail:

  1. Go to your Google Account settings.
  2. Navigate to the "Security" tab.
  3. Enable "2-Step Verification" if not already enabled.
  4. Go to "App passwords" under "Signing in to Google".
  5. Select "Mail" and "Other (Custom name)" from the dropdowns.
  6. Enter a name for the app (e.g., "AuthTemplate").
  7. Click "Generate" to get your app password.
  8. Use this password as your EMAIL_PASS in the .env file.
Email ConfigurationEmail ConfigurationEmail Configuration

Google OAuth Credentials

To set up Google OAuth:

  1. Go to the Google Cloud Console (https://console.cloud.google.com/).
  2. Create a new project or select an existing one.
  3. Navigate to "APIs & Services" > "Credentials".
  4. Click "Create Credentials" and select "OAuth client ID".
  5. Choose "Web application" as the application type.
  6. Add authorized JavaScript origins (e.g., http://localhost:3000).
  7. Add authorized redirect URIs (e.g., http://localhost:5000/auth/google/callback).
  8. Click "Create" to generate your client ID and client secret.
  9. Use these as GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET in your .env file.
Google OAuth CredentialsGoogle OAuth CredentialsGoogle OAuth Credentials

GitHub OAuth Credentials

To set up GitHub OAuth:

  1. Go to GitHub and navigate to Settings > Developer settings > OAuth Apps.
  2. Click "New OAuth App".
  3. Fill in the application name, homepage URL, and authorization callback URL.
  4. Click "Register application" to create your OAuth app.
  5. You'll see your new client ID. Click "Generate a new client secret".
  6. Use these as GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET in your .env file.
GitHub OAuth CredentialsGitHub OAuth Credentials

CUSTOMIZATION • APR 2025

Customization

Frontend Customization
Tailor the UI to match your brand

Modify React components and styles in the frontend/app folder to customize the UI.


├── Frontend
      ├── app
      │   └── |── Dashboard
      │       ├── forgot-password
      │       ├── login
      │       ├── signup
      │       ├── api.js
      │       ├── layout.ts
      │       ├── page.ts
      ├── components
      │   ├── ui
      │       ├── Button.tsx
      │       ├── Card.tsx
      │   ├── Home.tsx
      │   ├── Header.tsx
      │   ├── Footer.tsx     
      |── hooks
      │   ├── useAuth.js
      |── lib
      │   ├── utils.ts    
      |── public
      |      |── icons
      |      |── images
      |      |── favicon.ico
      |── styles
      |      |── globals.css
      |── .env
      |── .gitignore
      |── package.json
      |── README.md
      |── tsconfig.json
Backend Customization
Extend functionality to meet your needs

Add new routes in the backend/routes folder or modify existing middleware and controllers for specific business logic.


├── Backend
      |── config
      |   ├── database.js
      ├── controllers
      |   ├── auth.js
      |   ├── users.js
      ├── middleware
      |   ├── auth.js
      |── models
      |   ├── User.js
      |── routes
      |   ├── auth.js
      |   ├── users.js
      |── utils
      |   ├── email.js
      ├── server.js
      |── .env
      |── .gitignore
      |── package.json
      |── package-lock.json
      |── README.md

TROUBLESHOOTING • APR 2025

Troubleshooting

Common Issues and Solutions
Quick fixes for frequent problems

Missing Environment Variables

Ensure the .env file exists in the backend directory and contains all required values.

Solution: Double-check your .env file and make sure all variables are correctly set.

Port Already in Use

Another process might be using the default port for the frontend or backend server.

Solution: Change the port in the respective configuration files or terminate conflicting processes.

OAuth Login Issues

Problems with Google or GitHub authentication could be due to misconfigured credentials.

Solution: Verify your Google and GitHub client credentials and ensure the redirect URIs are correctly set in your OAuth provider's dashboard.

TECH STACK • APR 2025

Tech Stack Overview

Frontend
Building dynamic user interfaces
  • React.js for component-based UI development
  • Next.js for server-side rendering and routing
  • Tailwind CSS for responsive and customizable styling
  • Redux Toolkit for state management
  • Axios for API requests
Frontend Customization
Backend
Powering your application server
  • Node.js and Express.js for scalable server-side logic
  • MongoDB for flexible, document-based data storage
  • JWT for secure authentication token handling
  • Passport.js for authentication strategies
  • Mongoose for MongoDB object modeling
Backend Customization

If you're facing any issues or have questions, our support team is here to help!