React Login with Firebase
One of the fundamentals requirements of every project is security and access level control, today we're going to build a simple login using Google's Firebase authentication provider.
Acknowledgment
To move forward on this paper some basic knowledge on Yarn, React, Firebase and bootstrap are required.
To read more about it:
Hands-On
Finally, we're about to write some code, I'll break-down this process into steps for readability purposes, so we can go back to a specific step if required.
Step 1
Create a new React Project.
yarn create react-app firebase-login
add the required packages
yarn add firebase bootstrap reactstrap
Step 2
Let's run our application and add the basic folder structure for our project.
cd src mkdir components mkdir utils cd utils mkdir Firebase cd Firebase touch FirebaseHelper.js touch Config.js touch index.js
Great you made this far, awesome. Now we need to add the configuration from our firebase project, go to your firebase console > project settings.
Click on the button `add new app` then select the option `web` and copy the configuration generated into your project.
Step 3
Open the utils/FirebaseHelper/Config.js file and export the firebase generated configuration as a default module.
Step 4
Awesome, now that we have our custom configuration setup we can start building our firebase helper class.
Export your module in the right way from the index.js file.
Step 5
Alright, we have just one more thing to do. Let's create our sign-in component. I'll be using the old react component and not the new react hooks way for easy understanding for all of us.
Add the scaffolding for the component:
Inside the components folder let's create a new SignIn Folder and add a new index.js file.
Step 6
Great we're almost there, set your SignIn component as a default in your app. Go edit your src/App.js file.
Step 7
Run your project with
yarn start
You're app should look similar to this of course we can work on the styling, remember our main focus is to consume the authentication service from firebase, we can make it look good later.
Once you click on your button a new window should pop-up asking you to choose an account to log in. After you select one, the component should update and display the information from the current authenticated user.
Great, I'll let you explore all the information provided by the authentication service and play arround with the different providers.
Let me know if you have some questions and of course it's been a pleasure to code alongside with you.
Best regards,
Alan Alvarenga.