In this project you will have a simple authentication, you can connect using auth with standard email and password, simulating a user login to be able to show your data like e-mail, full name and random motivational phrases, and you can change your profile picture for your account. Everything with Firebase Auth, Firestore and Storage.
by Hubert Ryan!
With React Js, using the React Router Dom to send to others pages, navigating to other pages of the application and checking the user's status, whether connected or not.
The project depends on a google config of Firebase Auth Config Web, this configuration comes in the creation of a Firebase project, you can acquire it, below I will explain where to put this data for Firebase to know in which database the application is connected.
This layout design was completely developed from scratch to be a realistic and original application for anyone who is going to clone and use it.
Below are all the dependencies that were used for this project to be completed. These three libraries were enough to make a project like this work. Firebase obviously serves as the database!
- Firebase
- React Router Dom
- React Loader Spinner
Important: Soon, more updates will come! Always update this repository to be able to see news like Styled Components and others.
First, you need to clone this project to an ideal location on your computer. You can clone either using the github command line or by downloading directly from the browser or the WINRAR file, after that, extract it.
$ git clone https://github.com/HubertRyanOfficial/Authentication-W-React-Js.git
or
Download direct to you computer with WINRAR or with GitHub Desktop.
Second, install all necessary project dependencies locally so that the project can run smoothly. Of course, go to the project folder before that!
$ yarn install
or
$ npm install
As I said above, you need to create a Firebase project and get the necessary settings for the database to work and not return any errors. They are in the folder src/config/database/firebaseConfig.js
you just have to change the settings that are in the constant and nothing else!
Important: Without this configuration the application will not work!
Now just run.
$ yarn start
or
$ npm start
Now we can use and develop our project, are we going to test together with me? Let's Go!
Thank you so much for reading this repository and seeing my code shares, a huge hug! Always keep learning and updating.
By Hubert Ryan ๐