LogIn With Facebook - Set By Step Guide

:wave: Hello everyone

Today we are going to learn, How to integrate Login With Facebook feature in our apps. And for this, we are going to use Facebook OAuth APIs to

  • Generate verification code
  • Getting user approval
  • Getting User details like Name, Email & Profile Picture

But before we start we need an access token to make requests on Facebook OAuth API request. And for this, we need Client ID and Client Token.

here is the step-by-step guide available on my website to get the credentials. Follow the steps and get the access token.

Alright! I assume that you now have your access token with you. So let’s proceed to our project.

Design

Login to the @thunkable dashboard and create a new project. ( you can use your existing project too ). here we have to create three Columns named.

  • Step1: Contains a button to initiate the login process.
  • Step2: Contains a label to display the user Access Code, a button to cancel the Login process, and a web viewer to load the Facebook OAuth screen so users can log in to their Facebook and Approve the login. The URL of web viewer is by default set to https://m.facebook.com/device
  • Step3: Contains an image component to display profile picture, two labels to display User name and Email.

Blocks

First, let’s create an initialize variable code to store the code sent by Facebook OAuth API response for further use.

image

Now on the login button click. we’ll make a post request on

  • URL: https://graph.facebook.com/v2.6/device/login
  • Body: access_token=YOUR_ACCESS_TOKEN&scope=public_profile,email

In response to this request, we’ll get Code that we’ll store in initialize variable and User_Code that we’ll display to the user (in step2) so he/she can enter this code to access and approve the login request.

Please note that we are also using a clock component to keep checking if the user is redirected to the approval page so we can hide the Step2-Column and display Step3-Column.

As we know we have given a cancel button on Step2-Column so the user can cancel the Facebook login if he/she doesn’t want to. In this case, we’ll simply hide the Step2-Column and display Step1-Column with a message, try again. (you are free to change this message)

image

Now the clock will loop in every 100ms and check the current URL of the Web viewer. If the URL contains m.facebook.com/device/logged_in it means that the user has either approved/canceled the login request so we’ll hide the Step2-Column and make another API request to get the user_access_token so that we can get the user info using that.

  • URL: https://graph.facebook.com/v2.6/device/login_status
  • Body: access_token=YOUR_ACCESS_TOKEN&code=initialize variable code

In response to this API request if access_token is not null then we’ll use this access token and make another API request [GET] on

  • URL: https://graph.facebook.com/v2.3/me?fields=name,picture,email&amp&access_token= access_token

In response, we’ll get user info like name email, and profile picture. we just have to insert this info in labels we created to display user name email and load the profile picture to an image component.

All DONE :partying_face:

Congratulations… We have successfully integrated Login With Facebook option in our app. If you like this guide then do hit :heart: button and if you have any queries or suggestions feel free to comment below. you can also visit my website cttricks.com for more amazing guides.

10 Likes

It works perfectly just tried your app
Thanks for such a great tutorial

3 Likes

@cttricks Can you send a video how to login in this app as I tried but it returned error
Thanks

What’s the error?
have you followed the steps! Mainly creating access token from Client ID and Client Token.

1 Like

@cttricks It’s good for thunkable?
But how can I logout and change my login account?

Close the app clear storage open the app again

1 Like

Can someone make a button to log out of facebook?

It just you have to remove all stored info of the user from the app and write your bocks in such a way that if that info is not available then perform login again.

To know more on this visit Facebook Developers Docs - LogOut

@cttricks Is this device code header login only applicable to facebook? Are there other social account logins also applicable?

I am not able to login

I said to use an external browser to enter the code.
Use another button to check.
The comparison will not be wrong (you have to slide down the agree button to press).

The app api must be its own!

The default api can only be used by testers to log in, and you have to do it yourself (you need to go online! You need to submit a privacy policy.)

@cttricks
I sent you a private message.

I am following your instructions. A bit confused. As per the screenshots three columns are created named Step1, Step2 and Step3 on a single screen, Screen1. Just wondering how to create three columns on a single screen. Any help would be appreciated.