A quick start Create React App template with react-router-dom, material-ui, gh-pages and firebase. With google authentication, routing and deployment capabilities built in.
MIT License
Make sure you ⭐️ this repository
if you find it helpful or interesting :)
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.
Go to your Firebase Console
Click on Add project
.
Click on web icon.
Firebase SDK
.Add the config details in your .env
file (available in root of your project).
In your project console, click on Authentication
and Get Started
.
In Sign-in method
, click on Google
.
Toggle Enable
and click on Save
.
Create a new component in src/screens
.
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
}
Add your domain (your-github-username.github.io) to the OAuth redirect domains list in the Firebase console -> Auth section -> Sign in method tab
.
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
)
(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
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
Special thanks to this well written blog
and this repo
by alexandr-g.