React Auth Login UI

A beautiful and customizable authentication login UI component for React applications. This component provides a modern, responsive login interface with support for multiple authentication methods including:

• Social Login (Google, GitHub, LinkedIn)
• Email OTP Authentication
• LDAP Authentication

Installation

npm install react-auth-login-ui
# or
yarn add react-auth-login-ui

Prerequisites

This package requires the following peer dependencies:

{
  "react": ">=16.8.0",
  "react-dom": ">=16.8.0",
  "next-auth": ">=4.0.0",
  "react-icons": ">=4.0.0"
}

Usage

import { AuthLogin } from 'react-auth-login-ui';

function App() {
  return (
    <AuthLogin
      title="Welcome"
      subtitle="Sign in to continue"
      showGoogle={true}
      showGithub={true}
      showLinkedin={true}
      showOTP={true}
      showLDAP={true}
      redirectUrl="/dashboard"
      ldapDomain="example.com"
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | className | string | "" | Additional CSS classes for the component | | redirectUrl | string | "/" | URL to redirect after successful login | | title | string | "Welcome to Aganitha" | Main title of the login page | | subtitle | string | "You can sign in using your preferred login method" | Subtitle text | | showGoogle | boolean | true | Show/hide Google login button | | showGithub | boolean | true | Show/hide GitHub login button | | showLinkedin | boolean | true | Show/hide LinkedIn login button | | showOTP | boolean | true | Show/hide Email OTP login option | | showLDAP | boolean | true | Show/hide LDAP login option | | buttonClassName | string | "" | Additional CSS classes for buttons | | containerClassName | string | "" | Additional CSS classes for container | | termsUrl | string | "#" | URL for Terms of Service | | privacyUrl | string | "#" | URL for Privacy Policy | | logoUrl | string | "https://www.aganitha.ai/..." | URL for the logo image | | logoClassName | string | "" | Additional CSS classes for logo | | ldapDomain | string | "" | Domain for LDAP authentication |

API Integration

Next.js API Routes

You'll need to set up the following API routes in your Next.js application:

1. /api/auth/request-otp - For requesting OTP
2. /api/auth/verify-otp - For verifying OTP

Example implementation for /api/auth/request-otp:

// pages/api/auth/request-otp.ts
import type { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed' });
  }

  try {
    const { email } = req.body;
    // Implement your OTP generation and sending logic here
    const userId = 'generated-user-id';
    
    return res.status(200).json({ userId });
  } catch (error) {
    return res.status(500).json({ error: 'Failed to send OTP' });
  }
}

NextAuth.js Configuration

Configure NextAuth.js to support the authentication providers:

// pages/api/auth/[...nextauth].ts
import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';
import GitHubProvider from 'next-auth/providers/github';
import LinkedInProvider from 'next-auth/providers/linkedin';

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
    }),
    GitHubProvider({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
    LinkedInProvider({
      clientId: process.env.LINKEDIN_ID,
      clientSecret: process.env.LINKEDIN_SECRET,
    }),
    // Add custom providers for OTP and LDAP
  ],
  // Add your NextAuth.js configuration
});

Styling

The component uses Tailwind CSS for styling. Make sure to include Tailwind CSS in your project:

npm install tailwindcss postcss autoprefixer
# or
yarn add tailwindcss postcss autoprefixer

License

MIT