Creating a React — Firebase Context with Social media authentications.
Part 1
Welcome again! We are starting a new series about Authentication, which makes me think I am really into this topic!
One problem I often face is needing some private routes, almost every time I create an application. I might need a login page, we have to handle JWT tokens, localStorage and countless other configurations.
So, I decided to write more re-usable code with React components so it can be used to Sign up and Sign In/ Sign Out the user.
I had worked with Firebase and Firestore before, and I knew that this amazing platform has a lot of built in tools, so this is what we are going to explore in this new series:
Firebase is backed by Google and is a very powerful platform that helps developers by doing a lot of heavy lifting, to get started, you just need a google account:
To jump into the code, I just started with a create-react-app boilerplate.
Install firebase and react-firebaseui for the social media login with the command:
npm I firebase react-firebaseui
First, we need to create a new app on firebase, so in firebase console we create a new app:
Then give it a name and click “Create”. Once this is done, go to settings, in the general tab you will see a SDK snippet like this:
Of course this one doesn’t exist anymore as I created just for this example, so you will have to create your own!
Copy this config variable and in the react app, create a firebase.js file. Copy your configuration as well as the ui configuration:
As you can see, for this example, I have Google, Facebook and GitHub providers, but we could also have Apple, Twitter, Email and others:
We imported firebase and we have the config. Now we just have to initiate an instance of the firebase app to have access to all the tools we need:
Now, we are ready to start creating our functions and components, in the next instalment, we will start with the context API and useContext Hook in React, that way our whole app will know about the user, so we won’t need to keep passing it as a prop. This will prevent what is known as prop drilling.
That’s it, see you next week!
