npx create-react-app your-project-name --template firebase-starter

OR

yarn create react-app your-project-name --template firebase-starter

NOTE: This template is also available in TypeScript here.

1. Go to your Firebase Console

2. Click on Add project.

   • Follow steps and create project.

3. Click on web icon.

   • Register web app.
   • You will get details for setting up Firebase SDK.

4. Add the config details in your .env file (available in root of your project).

1. In your project console, click on Authentication and Get Started.

2. In Sign-in method, click on Google.

3. Toggle Enable and click on Save.

1. Create a new component in src/screens.

2. In your src/config/routes.ts.

{
    path: "/your-route",
    component: YourScreenComponentName,
    name: "Screen Name For Reference",
    protected: false, // if user needs to be authenticated to access this screen
}

1. Add your domain (your-github-username.github.io) to the OAuth redirect domains list in the Firebase console -> Auth section -> Sign in method tab.

2. update the homepage field in your package.json to the domain you are hosting on. (By default it is: http://your-github-username.github.io/your-repo-name)

3. (Optional) Test production build locally: Update the homepage field to / and run:

npm i -g serve # install serve globally via npm
npm run build-and-serve

4. Deploy to GitHub Pages run:

npm run deploy

Routing setup using react-router-dom.

• With easily implementable private routes (routes only authenticated users can use).

• Easily add new screens.

Authentication implemented implemented

SignIn with Google implemented using firebase and react-firebase-hooks.

Firebase configured with GoogleAuthProvider implemented.

Login Screen UI built using @mui/material.

Deploying on GitHub pages powered by gh-pages and spa-github-pages

├── src
│   ├── components
│   │   ├── auth
│   │   |   ├── AuthChecker.js
│   │   |   ├── AuthContainer.js
│   │   |   ├── Logout.js
│   │   ├── utils
│   │   |   ├── Center.js
│   ├── config
│   │   ├── firebase.config.js
│   │   ├── firebase.js
│   │   ├── routes.js
│   ├── screens
│   │   ├── Login.js
│   │   ├── Home.js

• Hussain Pettiwala (@pettiboy)

Special thanks to this well written blog and this repo by alexandr-g.