Xano - Facebook OAuth extension demo

Welcome to this beginner-friendly tutorial on integrating Facebook OAuth with your Xano application. By following these steps, you'll be able to allow your users to sign up and log in using their Facebook accounts, providing a seamless and familiar authentication experience. Let's dive in!

Step 1: Install the Facebook OAuth Extension

Head over to the Xano Marketplace and locate the Facebook OAuth extension. Click on the "Get Extension" button to purchase the extension. Once purchased, navigate to the desired workspace and click "Install" to merge the required schema into your user database table.

Step 2: Create a Facebook App and Configure OAuth

1. Visit the Facebook for Developers website and log in with your Facebook account.
2. Click on "My Apps" and then "Create App."
3. Select "Build Connected Experiences" and click "Continue."
4. Provide a name for your app and click "Create App."
5. In the app dashboard, locate the "Facebook Login" option and click "Set Up."
6. Navigate to the app's "Settings" > "Basic" section to find your App ID.
7. Copy the App ID and return to Xano. Click the "Configure" button and paste the App ID into the "OAuth Client ID" field.
8. Back in the Facebook app dashboard, find your App Secret (be careful not to share this with anyone) and copy it.
9. Return to Xano and paste the App Secret into the "OAuth Secret" field, then click "Update."

Step 3: Set Up the Redirect URI

1. In Xano, navigate to the API page and locate the "Facebook OAuth" API group that was added by the extension.
2. Click "Explore" and copy the Base URL provided on the right-hand side.
3. Open the Facebook OAuth Live Demo and paste the copied Base URL into the designated field, then click "Update Settings."
4. In the Facebook app dashboard, locate the "Facebook Login" settings and paste the provided URL into the "Valid OAuth Redirect URIs" field.
5. Click "Save Changes" in the Facebook app dashboard.

Step 4: Test the Integration

1. Return to the Facebook OAuth Live Demo in Xano.
2. You'll have three options: "Continue with Facebook" (for sign up and login), "Sign Up" (for first-time sign up only), and "Log In" (for existing users).
3. Click "Continue with Facebook" to initiate the OAuth flow.
4. You'll be redirected to Facebook, where you'll need to authorize the application to access your Facebook account information.
5. After authorizing, you'll be redirected back to the Live Demo page, completing the integration process.

Congratulations! You've successfully integrated Facebook OAuth with your Xano application. Your users can now enjoy the convenience of signing up and logging in with their Facebook accounts.

Remember, this guide focused on the integration process using the Live Demo. When implementing Facebook OAuth in your actual application, you'll need to replace the Live Demo URLs with your application's appropriate URLs.

Happy coding and building with Xano and Facebook OAuth!