Working with OAuth 2.0
For my last project in Bootcamp, I had the chance to work with OAuth 2.0 to give the users option to sign in through their Facebook and Google accounts. This feature was something I wanted to try ever since I learned authorization. So, I was so happy when I was able to successfully log users in through this feature. To be honest, I’m not too sure how others used OAuth to their advantage, but here’s a step by step guide to show how I was able to apply this feature into my application.
OAuth Flow
I researched and found this flow chart and it really helped me understand how I should make my application flow. When using OAuth, it authenticates the user through existing accounts they have with some major vendors such as Google, Facebook, Linked In, and more. When you request and receive the access token from these vendors, you can use then request for the user’s data that you can use to do an email verification in your application.
So here’s my take on breaking down this chart and integrating it into my application.
1. Getting access to Google and Facebook
In order for you to get user’s data from these major vendors, you have to hack them… I’m just kidding, they made it very easy and simple for you to use their feature because obviously they want you to take advantage of their authorization.
Facebook: https://developers.facebook.com/apps
Login in and you will get to this page and click “Create App’.
Then I chose the option to “Build Connected Experience”, but depending on your use case do whatever you need to do. Once you finally created your app, go into “Product” which is located on the tab. Then you can find “Facebook Login” to enable this service for your app.
Then you can set up which platform you are going to use the service from. For me, I’m using it from a web app and chose “WWW” and copied the link.
You will use the App ID that appears on the top of the page when you request for user data.
Google: https://console.developers.google.com/apis/credentials
We will repeat similar steps for google. After clicking “Create Credentials”, choose OAuth client ID, enter your app ID, and the link to your JavaScript origins.
For Google, you will use Client ID to request for user’s data.
2. Setting up OAuth in the application.
My application uses JavaScript and ReactJS, so I was able to find node package modules that can help me with this step.
Facebook: https://www.npmjs.com/package/react-google-login
Google: https://www.npmjs.com/package/react-facebook-login
I npm installed these into my react app and this is how it looked for me.
It would be smart to put your ids inside your .env, but I coded them in, directly for testing purposes. Now I finally have these magical components loading up on my app. When I click on these buttons, it will fire up a request to respective vendors and retrieve the user’s data.
This is how google’s response looks like when you ask for the user’s data. You can see my name in there, but basically, you want to take a look and just get the information that you want to use. For my app, I really only needed the email and some unique id to make a password for this account, so I took the email and the ID. If you parse through the JSON, they actually even send you a link for the profile picture of the user, so I’m sure that can be very practical for your application. Now that you have authorized the user, you can use this data in your back end to either create/authorize/update your user depending on your case.
Hope this was easy to understand and if there’s anything that seems wrong with this, please feel free to reach out to me. Thank you for reading!!
