Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/awran5/react-firebase-dashboard
Simple Google authentication sign-in page build with React and firebase.
https://github.com/awran5/react-firebase-dashboard
dashboard firebase firebase-auth firebase-authentication google-authentication google-sign material-ui react-hooks reactjs
Last synced: 13 days ago
JSON representation
Simple Google authentication sign-in page build with React and firebase.
- Host: GitHub
- URL: https://github.com/awran5/react-firebase-dashboard
- Owner: awran5
- License: mit
- Created: 2020-10-07T06:03:10.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2021-10-08T02:10:23.000Z (about 3 years ago)
- Last Synced: 2024-10-12T10:06:30.012Z (27 days ago)
- Topics: dashboard, firebase, firebase-auth, firebase-authentication, google-authentication, google-sign, material-ui, react-hooks, reactjs
- Language: TypeScript
- Homepage: https://react-firebase-dashboard.vercel.app/
- Size: 812 KB
- Stars: 2
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://material-ui.com/getting-started/templates/) starter [Sign-in side](https://material-ui.com/getting-started/templates/sign-in-side/) combined with [Dashboard](https://material-ui.com/getting-started/templates/dashboard/) templates.
## Installation
- Create a new [firebase](https://console.firebase.google.com/) 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](https://www.youtube.com/watch?v=e8GA1UOj8mE) you can follow.
- Create a new `.env.local` file inside the main app folder and copy/paste your firebase project `configuration`.
```bash
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](https://firebase.google.com/)
2. [React Firebase Hooks](https://www.npmjs.com/package/react-firebase-hooks)
3. [React Router Dom](https://reactrouter.com/web/guides/quick-start)
4. [Material-UI](https://material-ui.com)
5. [React Context API](https://reactjs.org/docs/context.html)
## 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](https://react-firebase-dashboard.vercel.app/)
## [CodeSandbox](https://codesandbox.io/s/react-material-ui-dashboard-99vt4) (code only - not authorized)
### License
This project is licensed under the terms of the [MIT License](https://opensource.org/licenses/MIT)