authcomp

AuthComp - Next.js Authentication Component

A comprehensive authentication solution for Next.js applications that provides customizable authentication UI with social login options, email OTP authentication, and middleware for protected routes.

Features

Authentication Component

• 🔐 Built-in support for Google, GitHub, and LinkedIn authentication
• 📧 Email OTP authentication for passwordless login
• 🎨 Fully customizable with Tailwind CSS
• 🚀 CLI tool for automatic setup and configuration
• 📦 Easy to install and integrate

Installation

# Run the setup wizard
npx authcomp

Quick Start Guide

Option 1: Create a New Next.js Project with AuthComp

Running npx authcomp without an existing Next.js project will:

1. Create a new Next.js application
2. Install and configure authentication components
3. Set up necessary files and environment variables

npx authcomp

The setup wizard will guide you through the installation process.

Option 2: Add AuthComp to an Existing Next.js Project

If you already have a Next.js project:

# Navigate to your project
cd your-nextjs-project

# Run the setup wizard
npx authcomp

What the Setup Wizard Does

The AuthComp setup wizard performs the following tasks:

1. Creates Authentication Routes:

   • Sets up NextAuth route at app/api/auth/[...nextauth]/route.ts
   • Creates OTP authentication endpoints:
     • /api/auth/request-otp
     • /api/auth/verify-otp

2. Adds Middleware:

   • Creates a middleware.ts file for route protection
   • Configures protected routes and authentication redirects

3. Sets Up Utility Files:

   • utils/auth.ts - Authentication helper functions
   • utils/db.ts - Database utilities for OTP storage
   • utils/email.ts - Email sending functionality for OTP

4. Configures Environment Variables:

   • Creates or updates .env file with necessary configuration

5. Handles File Conflicts:

   • If files already exist, they are renamed to {filename}.old.{extension}
   • Preserves your existing code while adding new functionality

Authentication Methods

Social Authentication

AuthComp supports the following social authentication providers:

• Google - OAuth 2.0 authentication with Google accounts
• GitHub - OAuth authentication with GitHub accounts
• LinkedIn - OAuth authentication with LinkedIn accounts

Email OTP Authentication

Passwordless authentication using one-time passwords sent via email:

1. User enters their email address
2. A one-time code is sent to their email
3. User enters the code to authenticate
4. A session is created upon successful verification

Using the AuthLogin Component

"use client"

import { AuthLogin } from 'authcomp';

export default function LoginPage() {
  return (
    <AuthLogin
      redirectUrl="/dashboard"
      logoUrl="/your-logo.svg"
      title="Welcome Back"
      subtitle="Sign in to continue"
      showGoogle={true}
      showGithub={true}
      showLinkedin={true}
      showOTP={true}
      buttonClassName="custom-button-class"
      containerClassName="custom-container-class"
    />
  );
}

AuthLogin Component Props

Prop	Type	Default	Description
className	string	""	Additional CSS classes for the root element
redirectUrl	string	"/"	URL to redirect after successful login
title	string	"Welcome to Aganitha"	Main title text
subtitle	string	"You can sign in using your preferred login method"	Subtitle text
showGoogle	boolean	true	Toggle Google login button
showGithub	boolean	true	Toggle GitHub login button
showLinkedin	boolean	true	Toggle LinkedIn login button
showOTP	boolean	true	Toggle Email OTP authentication
buttonClassName	string	""	Additional CSS classes for buttons
containerClassName	string	""	Additional CSS classes for container
termsUrl	string	"#"	URL to terms of service
privacyUrl	string	"#"	URL to privacy policy
logoUrl	string	"https://www.aganitha.ai/wp-content/uploads/2023/07/logo-crop.svg"	URL to your logo
logoClassName	string	""	Additional CSS classes for logo

Route Protection with Middleware

AuthComp includes a middleware configuration that protects routes based on authentication status:

// middleware.ts (automatically created by setup wizard)
export const config = {
  matcher: ['/', '/dashboard/:path*', '/profile/:path*']
};

You can customize the protected routes by modifying the matcher array.

Environment Configuration

Update your .env file with your OAuth credentials:

# Authentication
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-secret-key-here

# Google OAuth
GOOGLE_ID=your-google-client-id
GOOGLE_SECRET=your-google-client-secret

# GitHub OAuth
GITHUB_ID=your-github-client-id
GITHUB_SECRET=your-github-client-secret

# LinkedIn OAuth
LINKEDIN_CLIENT_ID=your-linkedin-client-id
LINKEDIN_CLIENT_SECRET=your-linkedin-client-secret

# Email (for OTP)
EMAIL_SERVER=smtp://username:[e-mail]:587
EMAIL_FROM=[e-mail]

Advanced Usage

Custom Email Templates

You can customize the OTP email template by modifying the utils/email.ts file:

// Customize the email content and styling
const html = `
  <div style="...">
    <h1>Your Authentication Code</h1>
    <p>Your one-time password is: <strong>${otp}</strong></p>
    <p>This code will expire in 10 minutes.</p>
  </div>
`;

Database Integration

By default, AuthComp uses a SQLite database for OTP storage. You can customize the database configuration in utils/db.ts.

Styling Customization

The AuthLogin component is built with Tailwind CSS and is fully customizable:

• Use the className, buttonClassName, and containerClassName props to add custom styles
• The component uses a modern, responsive design that adapts to different screen sizes
• Animation effects are included for a polished user experience

Requirements

• Next.js 13+ (App Router)
• React 18+
• Node.js 16+
• Tailwind CSS 3+

Troubleshooting

File Conflicts

If you encounter file conflicts during setup, AuthComp will rename existing files to {filename}.old.{extension} and create new ones. You can:

1. Compare the old and new files to merge your changes
2. Delete the .old files once you've verified everything works

OAuth Configuration

For social login to work correctly:

1. Create OAuth applications with the respective providers
2. Configure the correct redirect URIs:
   • Google: https://your-domain.com/api/auth/callback/google
   • GitHub: https://your-domain.com/api/auth/callback/github
   • LinkedIn: https://your-domain.com/api/auth/callback/linkedin

License

MIT