Creating a React — Firebase Context with Social media authentications.
Part 2
https://miro.medium.com/max/1050/0*raFGKp4ABuayXEL8
This is the second part of our authentication series, and today we’ll go over how to set the Firebase up with the social media keys and how to create our application in Facebook, Twitter, GitHub and any of the social media platforms you would like your React app to have!
Exciting, isn’t it?
Let’s set up our email and authentication, in our Firebase App console, under the Sign-in methods, we enable Email/Password:
We also want to enable others, so let’s keep going:
Google:
With Google it’s easy because Firebase is from Google, we don’t need to set up keys and clients!
Now let’s do Facebook:
When we click on enable, Firebase will ask for an App ID and App Secret. Where do we get this?
Simple, we go to Facebook for developers: https://developers.facebook.com/apps/ and create a new app:
Then, go to the Dashboard > Settings > Basic, grab the App ID and the App Secret and paste into the Firebase configuration.
Now, copy this OAuth redirect URI from Firebase and paste it in the Facebook app you just created, this is how we tell Facebook where to redirect to once the login Promise is resolved.
Similarly for Twitter, LinkedIn and others if you want to have those as well, here are the links:
Twitter: https://developer.twitter.com/en
LinkedIn: https://www.linkedin.com/developers/
Microsoft: https://developer.microsoft.com/en-gb/
Let’s do GitHub now:
Go to your GitHub Account > Settings > Developer Settings and create an App.
Grab the App ID and Client Secret and paste in the Firebase App.
Don’t forget to put the redirect URL as a callback into the GitHub App, otherwise Firebase will complete the authentication, but the user will be lost in limbo.
Easy, right? Now we finally have all of our configuration done for our app!
In the next instalment, we’ll jump into the code and make this work with useContext, useEffect, useState, and others React hooks!
Hope you are enjoying it and I’ll see you next week!
