A live demo of the project is found here.
This a simple Reactjs project showcasing use of firebase authentication. It has both public and private endpoints. Private endpoints are protected using session handling.
For users that signs in through email/password in the website, it is also possible to make password modifications (like reset or change password). For users that signs in using Facebook, this feature is disabled.
This project was bootstrapped with Create React App.
/: it's the root route, also called the landing page./signin: where the user is able to login either through Facebook or via email/password/signup: where the user can signup using email/password./account: protected endpoint, available only for users registered using email/password. At this endpoint, they can modify/reset their password./home: protected endpoint, reachable only for authenticated users.
Do the following:
git clone https://github.com/psatler/react-firebase-authentication.git
cd react-firebase-authentication
npm start
A live demo of the project can be found here
Make sure you have the Heroku CLI installed. Then, just follow this instructions.
Remember to add your new domain to the Firebase Console: firebase console -> Authentication -> Sign-in Method Tab -> Authorized Domains Section (at the bottom of the page)
NOTE: for the Facebook Login button, you need to create an app at Facebook Developers.
- React Router 4: Declarative Routing for React.js
- React Context API: Context provides a way to pass data through the component tree without having to pass props down manually at every level
- Firebase: Build apps fast, without managing infrastructure
- React Social Login Buttons: A simple package to display social login buttons using React.
- Reactstrap: Easy to use React Bootstrap 4 components.
- Bootstrap: Free and open-source front-end framework for designing websites.
This project is licensed under the terms of the MIT License © Pablo Satler 2018