AtoZas Continue with Google

Easy Google OAuth authentication package for Node.js and React applications.

Installation

npm install atozas-continue-with-google

Backend Setup (Node.js/Express)

const express = require('express');
const cors = require('cors');
const AtozasGoogleAuth = require('atozas-continue-with-google');

const app = express();

// CORS middleware
app.use(cors({
  origin: 'http://localhost:3000',
  credentials: true
}));

app.use(express.json());

// Initialize Google Auth
const googleAuth = new AtozasGoogleAuth({
  clientID: process.env.GOOGLE_CLIENT_ID,
  clientSecret: process.env.GOOGLE_CLIENT_SECRET,
  callbackURL: '/auth/google/callback',
  successRedirect: 'http://localhost:3000/dashboard',
  failureRedirect: 'http://localhost:3000/login',
  sessionSecret: 'your-session-secret'
});

// Setup authentication
googleAuth.setup(app);

// Protected route example
app.get('/api/protected', googleAuth.requireAuth, (req, res) => {
  res.json({ message: 'This is protected', user: req.user });
});

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

Frontend Setup (React)

1. Wrap your app with AuthProvider

import React from 'react';
import { AuthProvider } from 'atozas-continue-with-google/react';
import App from './App';

function Root() {
  return (
    <AuthProvider apiBaseUrl="http://localhost:5000">
      <App />
    </AuthProvider>
  );
}

export default Root;

2. Use the Google Login Button

import React from 'react';
import { GoogleLoginButton, useAuth } from 'atozas-continue-with-google/react';

function LoginPage() {
  const { user, loading } = useAuth();

  if (loading) return <div>Loading...</div>;
  if (user) return <div>Welcome {user.name}!</div>;

  return (
    <div>
      <h1>Login</h1>
      <GoogleLoginButton />
    </div>
  );
}

export default LoginPage;

3. Use Authentication Hook

import React from 'react';
import { useAuth, ProtectedRoute } from 'atozas-continue-with-google/react';

function Dashboard() {
  const { user, logout } = useAuth();

  return (
    <ProtectedRoute fallback={<div>Please login</div>}>
      <div>
        <h1>Dashboard</h1>
        <p>Welcome, {user.name}!</p>
        <img src={user.photo} alt="Profile" />
        <button onClick={logout}>Logout</button>
      </div>
    </ProtectedRoute>
  );
}

export default Dashboard;

Environment Variables

Create a .env file:

GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret

Google OAuth Setup

1. Go to Google Cloud Console
2. Create a new project
3. Enable Google+ API
4. Create OAuth 2.0 credentials
5. Add authorized redirect URI: http://localhost:5000/auth/google/callback
6. Add authorized JavaScript origins: http://localhost:3000, http://localhost:5000

API Reference

Backend

Constructor Options

• clientID: Google OAuth client ID
• clientSecret: Google OAuth client secret
• callbackURL: OAuth callback URL (default: '/auth/google/callback')
• successRedirect: Redirect URL after successful login
• failureRedirect: Redirect URL after failed login
• sessionSecret: Session secret key

Methods

• setup(app): Complete setup with middleware and routes
• initializeMiddleware(app): Setup only middleware
• setupRoutes(app): Setup only routes
• requireAuth: Middleware to protect routes

Frontend

Components

• AuthProvider: Context provider for authentication
• GoogleLoginButton: Pre-styled Google login button
• ProtectedRoute: Component to protect routes

Hooks

• useAuth(): Access authentication state and methods

License

MIT

Support

For issues and questions, please visit: https://github.com/atozas/continue-with-google/issues