Third-party login with Xano

Token Exchange Auth Type

This is a type of authentication where one outsources the authentication of users to a third party usually Google, Facebook and some other popular services.

The setup follows steps:

• Creating a developer account on the third party service of choice usually these can be created on the “developer” subdomain of your service of choice eg for google is developers.google.com for facebook its developers.facebook.com
• Creating an app on the platform and enabling the Authentication module on the app - this is because usually the service has other modules in its API, eg google has google contacts, facebook has fundraisers. This will provide you with an app ID and a secret.
• Listing valid redirect URLs for your app, this will be used in later steps.
• Sending out a request to the third party service - this usually leads to the page where the available accounts of the user under the services are listed
• The third party service sends the user back to your page with an appended URL parameter - this is usually called the “Redirect URL” in the service you’ll be using
• Using the URL parameter value (this is the access token) to send out the request to the third party service for user details

Below is a diagram showing the flow of this type of authentication for facebook as this is what we’ll use for this demo

We’ll be using the Xano Facebook since it will generate the endpoints quicker for us to use - if Xano isn’t used you can mimic the steps using the REST API calls. You can see it here: https://x8ki-letl-twmt.n7.xano.io/admin/workspace/17863-0/marketplace/item/32

We’ll use two endpoints that is the init and the continue

The init endpoint is like the “Click to Login With FB” button click

Below is the request for the init and its respective action which triggers on button the button click. We have to specify the redirect URL in the URL parameters - remember that this should be under your allowed redirect URLs in your API.

Once the init runs, we will be provided with a URL to redirect to, this will lead the user to the page where they can choose their accounts

After the user chooses the account they wish to proceed with, facebook will redirect to the redirect URL provided with an access token appended to it as a parameter

The token will be used in the “continue” endpoint to get the user details, below is a screenshot of it (Note that on this I have the URL parameter value directly put in the value of the code section however this needs to come from the parameter itself)

Once this request runs you’ll get the user details.

Here is a loom video to show you the steps:https://www.loom.com/share/0e8de4af91944ce5bd29aefc3ac30557