React Firebase Dashboard

Simple React App that showcasing how you can implement Google Sign-in method using firebase authentication. This App is built with React Hooks and Context API and used free Material-UI starter Sign-in side combined with Dashboard templates.

Installation

• Create a new firebase project or use your existing one.
• You'll need to enable Google authentication from Authentication > Sign-in method and Cloud Firestore database in order to save users in firestore database. Here is a good tutorial you can follow.
• Create a new .env.local file inside the main app folder and copy/paste your firebase project configuration.

  REACT_APP_FIREBASE_API_KEY = xxxxxxxxxxxxxxxxxxxxxx
  REACT_APP_FIREBASE_AUTH_DOMAIN = xxxxxxxxxxxxxxxxxxxxxx
  REACT_APP_FIREBASE_DATABASE_URL = xxxxxxxxxxxxxxxxxxxxxx
  REACT_APP_FIREBASE_PROJECT_ID = xxxxxxxxxxxxxxxxxxxxxx
  REACT_APP_FIREBASE_STORAGE_BUCKET = xxxxxxxxxxxxxxxxxxxxxx
  REACT_APP_FIREBASE_MESSAGING_SENDER_ID = xxxxxxxxxxxxxxxxxxxxxx
  REACT_APP_FIREBASE_APP_ID = xxxxxxxxxxxxxxxxxxxxxx

Dependencies

1. Firebase
2. React Firebase Hooks
3. React Router Dom
4. Material-UI
5. React Context API

Changelog

10/08/2021

• Update: MUI 5
• Update: dependencies

12/09/2021

• Update: firebase 9
• Update: All dependencies
• Add: eslint airbnb config
• Remove: React Context
• Remove: option to add users to cloud firesote
• Clean up code and minor bug fixed.

11/16/2020

• Refactor code to TypeScript
• Add: Error message when sign-in
• Add: Timestamp for newly created users
• Update: Dependencies
• fix: Minor bugs

Live example

CodeSandbox (code only - not authorized)

License

This project is licensed under the terms of the MIT License