Host a BI report using ReactJs+Firebase with Auth — Part3 react-router (Routing)+ Auth set up

In previous articles Part one & Part two, we have created a webpage with our data and desired UI components. Now, we will create a Login page and route between Login and Home page. Then, prepare for deploy and Auth.

Code can be found at https://github.com/reneelin1712/simple-BI-report

Add Login Page

To add Authentification, a login page is needed, which means there will be navigation from the login page to the home page. Therefore, we need to add a routing function. A quick solution is the react-router library.

Renaming the current App.js to Home.js and add signIn.js. There is no need to re-create the UI components, copy a simple example from Mui https://mui.com/getting-started/templates/

https://github.com/mui/material-ui/tree/master/docs/data/material/getting-started/templates/sign-in

Add Routing

Install React Router, https://v5.reactrouter.com/web/guides/quick-start

npm install react-router-dom