Skip to content

Sagnik-Coder24/Firebase-Login

Repository files navigation

React + Vite Firebase Authentication App

This is a practice web application built with React and Vite. It uses Firebase Authentication to allow users to log in or sign up using Google or email and password. Once logged in, users can view their data, including their name and email. The app is deployed using Netlify CLI.

Features

  • User authentication with Firebase
    • Sign up with email and password
    • Log in with email and password
    • Sign in with Google
  • Display user data (name and email)
  • Deployed using Netlify CLI

Getting Started

Prerequisites

  • Node.js and npm installed
  • Firebase project set up
  • Netlify account

Installation

  1. Clone the repository:

    git clone https://github.com/Sagnik-Coder24/Firebase-Login.git
    cd Firebase-Login
    
  2. Install dependencies:

    npm install

Set up Firebase

  • Go to the Firebase Console.
  • Create a new project.
  • Add a web app to your project.
  • Copy the Firebase SDK configuration and add it to your project.

Create a .env file in the root of your project and add your Firebase configuration:

VITE_FIREBASE_API_KEY=your-api-key
VITE_FIREBASE_AUTH_DOMAIN=your-auth-domain
VITE_FIREBASE_PROJECT_ID=your-project-id
VITE_FIREBASE_STORAGE_BUCKET=your-storage-bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your-messaging-sender-id
VITE_FIREBASE_APP_ID=your-app-id

Running the App

  1. Start the development server:

    npm run dev
  2. Open your browser and navigate to http://localhost:5173 to see the app in action.

Deployment

  1. Install Netlify CLI:

    npm install -g netlify-cli
  2. Log in to Netlify:

    netlify login
  3. Deploy the app:

    netlify deploy
  4. Follow the prompts to link your site to a Netlify project and deploy your app.

Usage

  • Sign up or log in using email and password or Google.
  • View your name and email on the next page.

Technologies Used

  • React
  • Vite
  • Firebase Authentication
  • Netlify CLI

Contributing

Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

  1. Fork the Project
  2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
  3. Commit your Changes (git commit -m 'Add some AmazingFeature')
  4. Push to the Branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request
Thank you for checking out this project! If you have any questions or need further clarification, feel free to ask.