React.js Template with Google Authentication

A ready-to-use React.js template with complete authentication system including email/password and Google OAuth integration. Perfect for competitions and rapid prototyping.

Features

• ✅ Complete authentication system (Email/Password + Google OAuth)
• ✅ Protected routes with React Router
• ✅ Firebase integration
• ✅ Responsive design
• ✅ Modern React hooks and context API
• ✅ Clean, organized project structure
• ✅ Ready for competition use

Quick Start

Prerequisites

• Node.js (v14 or higher)
• npm or yarn
• Firebase account

Installation

1. Clone or download this template

   git clone <repository-url>
   cd reactjs-template

2. Install dependencies

   npm install

3. Set up Firebase

   • Go to Firebase Console
   • Create a new project or use existing one
   • Enable Authentication and add Email/Password and Google as sign-in methods
   • Get your Firebase configuration from Project Settings

4. Configure environment variables

   cp .env.example .env

   Edit .env and add your Firebase configuration:

   REACT_APP_FIREBASE_API_KEY=your_api_key_here
   REACT_APP_FIREBASE_AUTH_DOMAIN=your_project_id.firebaseapp.com
   REACT_APP_FIREBASE_PROJECT_ID=your_project_id
   REACT_APP_FIREBASE_STORAGE_BUCKET=your_project_id.appspot.com
   REACT_APP_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
   REACT_APP_FIREBASE_APP_ID=your_app_id

5. Start the development server

   npm start

   Open http://localhost:3000 to view it in the browser.

Firebase Setup Guide

1. Create Firebase Project

1. Go to Firebase Console
2. Click "Create a project"
3. Follow the setup wizard

2. Enable Authentication

1. In your Firebase project, go to "Authentication"
2. Click "Get started"
3. Go to "Sign-in method" tab
4. Enable "Email/Password"
5. Enable "Google" and configure OAuth consent screen

3. Get Configuration

1. Go to Project Settings (gear icon)
2. Scroll down to "Your apps" section
3. Click on "</>" (Web) to add a web app
4. Register your app and copy the configuration

4. Configure OAuth (for Google Sign-in)

1. Go to Google Cloud Console
2. Select your project
3. Go to "APIs & Services" > "Credentials"
4. Configure OAuth consent screen
5. Add authorized domains (localhost:3000 for development)

Project Structure

src/
├── components/          # Reusable components
│   ├── Login.js        # Login form component
│   ├── Signup.js       # Signup form component
│   ├── Navbar.js       # Navigation bar
│   └── PrivateRoute.js # Protected route wrapper
├── pages/              # Page components
│   ├── Home.js         # Landing page
│   └── Dashboard.js    # Protected dashboard
├── hooks/              # Custom React hooks
│   └── useAuth.js      # Authentication hook and context
├── utils/              # Utility functions
│   └── firebase.js     # Firebase configuration
├── App.js              # Main app component with routing
├── index.js            # App entry point
└── index.css           # Global styles

Available Scripts

• npm start - Runs the app in development mode
• npm test - Launches the test runner
• npm run build - Builds the app for production
• npm run eject - Ejects from Create React App (one-way operation)

Authentication Features

Email/Password Authentication

• User registration with email and password
• User login with email and password
• Password confirmation on signup
• Form validation and error handling

Google OAuth

• One-click Google sign-in
• Automatic user profile creation
• Seamless integration with Firebase Auth

Protected Routes

• Dashboard accessible only to authenticated users
• Automatic redirect to login for unauthenticated users
• Persistent login state across browser sessions

Customization

Adding New Pages

1. Create a new component in src/pages/
2. Add the route in src/App.js
3. Optionally wrap with PrivateRoute for authentication

Styling

• Global styles are in src/index.css
• Component-specific styles can be added inline or as CSS modules
• The template uses a clean, responsive design that's easy to customize

Adding More Authentication Providers

1. Enable the provider in Firebase Console
2. Import the provider in src/utils/firebase.js
3. Add the sign-in method in src/hooks/useAuth.js
4. Create UI components for the new provider

Environment Variables

All environment variables must be prefixed with REACT_APP_ to be accessible in the React app.

Required variables:

• REACT_APP_FIREBASE_API_KEY
• REACT_APP_FIREBASE_AUTH_DOMAIN
• REACT_APP_FIREBASE_PROJECT_ID
• REACT_APP_FIREBASE_STORAGE_BUCKET
• REACT_APP_FIREBASE_MESSAGING_SENDER_ID
• REACT_APP_FIREBASE_APP_ID

Security Notes

• Never commit your .env file to version control
• Keep your Firebase API keys secure
• Configure Firebase security rules for production
• Use HTTPS in production

Competition Ready

This template is specifically designed for coding competitions and hackathons:

• Fast setup - Get authentication working in minutes
• Clean codebase - Easy to understand and extend
• Modern practices - Uses latest React patterns
• Responsive design - Works on all devices
• Scalable structure - Easy to add new features

Troubleshooting

Common Issues

1. Firebase configuration errors

   • Double-check your .env file
   • Ensure all required variables are set
   • Verify Firebase project settings

2. Google OAuth not working

   • Check OAuth consent screen configuration
   • Verify authorized domains in Google Cloud Console
   • Ensure Google sign-in is enabled in Firebase

3. Build errors

   • Run npm install to ensure all dependencies are installed
   • Check for any missing environment variables
   • Ensure Node.js version is 14 or higher

Getting Help

If you encounter issues:

1. Check the browser console for error messages
2. Verify Firebase configuration
3. Ensure all environment variables are properly set
4. Check Firebase Authentication logs in the console

Next Steps

After setting up the template:

1. Customize the design to match your project needs
2. Add your specific features and pages
3. Configure additional Firebase services (Firestore, Storage, etc.)
4. Set up deployment (Netlify, Vercel, Firebase Hosting)
5. Add proper error boundaries and loading states
6. Implement proper form validation
7. Add tests for your components

License

This template is free to use for any purpose. Feel free to modify and distribute as needed.

---

Happy coding! 🚀