atozas-google-login

Complete Google Login and Email OTP authentication package with frontend React components and backend server.

Installation

npm install atozas-google-login

This installs both:

• Frontend: React components for Google OAuth and Email OTP
• Backend: Express server with SMTP support for OTP emails

Quick Start

1. Frontend Usage

import { 
  AtoZGoogleLoginProvider, 
  AtoZGoogleLogin, 
  AtoZEmailOTP 
} from 'atozas-google-login';

function App() {
  return (
    <AtoZGoogleLoginProvider apiEndpoint="http://localhost:3000/api/auth/google-config">
      {/* Google Login - Client ID fetched from backend */}
      <AtoZGoogleLogin
        onSuccess={async (response) => {
          const res = await fetch('http://localhost:3000/api/auth/google', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ credential: response.credential }),
          });
          const data = await res.json();
          // Handle authentication
        }}
      />
      
      {/* Email OTP - Uses backend SMTP */}
      <AtoZEmailOTP
        apiEndpoint="http://localhost:3000/api/auth/otp"
        onSuccess={(data) => {
          // Handle authentication
        }}
      />
    </AtoZGoogleLoginProvider>
  );
}

2. Backend Usage

Option A: Use Built-in Backend Server

import express from 'express';
import { createAuthServer } from 'atozas-google-login/backend';

const app = express();
app.use(express.json());

// Create auth server with your configuration
const authServer = createAuthServer({
  smtpConfig: {
    name: process.env.SMTP_NAME,
    server: process.env.SMTP_SERVER,
    port: parseInt(process.env.SMTP_PORT),
    secure: process.env.SMTP_SECURE === 'true',
    email: process.env.SMTP_EMAIL,
    password: process.env.SMTP_EMAIL_PASSWORD,
  },
  googleClientId: process.env.GOOGLE_CLIENT_ID,
  googleClientSecret: process.env.GOOGLE_CLIENT_SECRET,
});

app.use(authServer);

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

Option B: Use Individual Routes

import express from 'express';
import { 
  createGoogleConfigRouter,
  createOTPRouter,
  createGoogleAuthRouter,
  createSMTPTransporter,
  createOTPStore
} from 'atozas-google-login/backend';

const app = express();
app.use(express.json());

// Create OTP store
const otpStore = createOTPStore();

// Create SMTP transporter
const transporter = createSMTPTransporter({
  name: process.env.SMTP_NAME,
  server: process.env.SMTP_SERVER,
  port: parseInt(process.env.SMTP_PORT),
  secure: process.env.SMTP_SECURE === 'true',
  email: process.env.SMTP_EMAIL,
  password: process.env.SMTP_EMAIL_PASSWORD,
});

// Add routes
app.use('/api/auth/google-config', createGoogleConfigRouter({
  googleClientId: process.env.GOOGLE_CLIENT_ID,
}));

app.use('/api/auth/otp', createOTPRouter({
  transporter,
  otpStore,
  otpExpiryMinutes: 10,
}));

app.use('/api/auth/google', createGoogleAuthRouter({
  googleClientId: process.env.GOOGLE_CLIENT_ID,
  googleClientSecret: process.env.GOOGLE_CLIENT_SECRET,
}));

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

Option C: Standalone Server

// server.js
import server from 'atozas-google-login/backend/server';

// Server starts automatically with environment variables from .env
// Create .env file with:
// SMTP_NAME=Your App
// SMTP_SERVER=smtp.gmail.com
// SMTP_PORT=465
// SMTP_SECURE=true
// [email protected]
// SMTP_EMAIL_PASSWORD=your-app-password
// GOOGLE_CLIENT_ID=your-client-id
// GOOGLE_CLIENT_SECRET=your-client-secret
// PORT=3000

Environment Variables

Create a .env file in your project root:

# SMTP Configuration (Gmail - PORT 465, SECURE=true)
SMTP_NAME=Your App Name
SMTP_SERVER=smtp.gmail.com
SMTP_PORT=465
SMTP_SECURE=true
[email protected]
SMTP_EMAIL_PASSWORD=your-app-password

# Google OAuth Configuration
GOOGLE_CLIENT_ID=your-google-client-id.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=your-google-client-secret

# Server Configuration
PORT=3000
OTP_EXPIRY_MINUTES=10

Important: For Gmail, use an App Password instead of your regular password.

Package Structure

atozas-google-login/
├── frontend/          # React components
│   ├── src/          # Source code
│   └── dist/         # Built files
├── backend/          # Express server
│   └── src/         # Backend source code
└── package.json      # Root package config

API Endpoints

The backend provides these endpoints:

• GET /api/auth/google-config - Returns Google Client ID
• POST /api/auth/otp/send - Sends OTP via email (SMTP)
• POST /api/auth/otp/verify - Verifies OTP
• POST /api/auth/google - Verifies Google OAuth credential

Features

Frontend Components

• ✅ Google OAuth login with backend-fetched Client ID
• ✅ Email OTP verification form
• ✅ Auto-focus OTP inputs
• ✅ Paste support for OTP codes
• ✅ Resend OTP with cooldown timer
• ✅ Light and dark themes
• ✅ TypeScript support
• ✅ Fully accessible

Backend Server

• ✅ SMTP email sending (Gmail support)
• ✅ OTP generation and verification
• ✅ Google OAuth credential verification
• ✅ In-memory OTP store (use Redis in production)
• ✅ CORS enabled
• ✅ Error handling
• ✅ Environment variable configuration

Development

Build Both Frontend and Backend

npm run build

This builds:

• Frontend React components
• Backend (installs dependencies)

Development Mode

# Frontend development
npm run dev:frontend

# Backend development (with auto-reload)
npm run dev:backend

Peer Dependencies

This package requires:

• react (^18.0.0)
• react-dom (^18.0.0)

Install them in your project:

npm install react react-dom

Note: This package uses Google Identity Services directly - no additional Google OAuth packages required!

Documentation

• Frontend Components Documentation
• Backend Server Documentation
• Backend Usage Guide

License

MIT