React with Firebase Hosting, Firebase Auth and Firebase Realtime Database

How to deploy a React application to Firebase Hosting, authenticate with Firebase Auth and manage users with Firebase Realtime Database

Sign In Page

Sign Up Page

Home Page

Account Page

Admin Page

Firebase Authentication

Firebase Database

Password Forget Page

Reset Password from email

Before run

Define the project environmental variables in a new .env file in your project’s root folder. The .env file was added to .gitignore file. Copying the configuration from your Firebase project’s dashboard. The .env file content:

NODE_ENV=production
REACT_APP_PROD_API_KEY=AAAAAAAAAAAAAAAAAAA
REACT_APP_PROD_AUTH_DOMAIN=AAAAAAAAAAAAAAAA.firebaseapp.com
REACT_APP_PROD_DATABASE_URL=https://AAAAAAAAAAAAAAAA.firebaseio.com
REACT_APP_PROD_PROJECT_ID=AAAAAAAAAAAAAAAA
REACT_APP_PROD_STORAGE_BUCKET=
REACT_APP_PROD_MESSAGING_SENDER_ID=AAAAAAAAAAAAAAAA
REACT_APP_PROD_APP_ID=A:AAAAAAAAAAAAAAAA:web:AAAAAAAAAAAAAAAA
REACT_APP_PROD_CONFIRMATION_EMAIL_REDIRECT=https://AAAAAAAAAAAAAAAA.firebaseapp.com/
REACT_APP_DEV_API_KEY=AAAAAAAAAAAAAAAA
REACT_APP_DEV_AUTH_DOMAIN=AAAAAAAAAAAAAAAA.firebaseapp.com
REACT_APP_DEV_DATABASE_URL=https://AAAAAAAAAAAAAAAA.firebaseio.com
REACT_APP_DEV_PROJECT_ID=AAAAAAAAAAAAAAAA
REACT_APP_DEV_STORAGE_BUCKET=
REACT_APP_DEV_MESSAGING_SENDER_ID=AAAAAAAAAAAAAAAA
REACT_APP_DEV_APP_ID=1:AAAAAAAAAAAAAAAA:web:AAAAAAAAAAAAAAAA
REACT_APP_DEV_CONFIRMATION_EMAIL_REDIRECT=http://localhost:3000

Run

In the project directory, run:

[Local test]

npm start

[Firebase deploy]

npm run build; firebase deploy

Sources

• A Firebase in React Tutorial for Beginners [2019]
• How to deploy a React application to Firebase
• The Road to React with Firebase (book)