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

OR

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

1. Go to https://console.firebase.google.com/

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 your config details in your .env.

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 }

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.

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