Facebook Sign-In in .NET MAUI (No SDK Required!)

🔐 Facebook Login in .NET MAUI Using WebAuthenticator: A Step-by-Step Guide

Implementing Facebook login in your .NET MAUI app can greatly simplify user authentication. In this post, we’ll walk through how to integrate Facebook Login using WebAuthenticator, so you can securely sign in users on both Android and iOS.

---

Join our exclusive WhatsApp group for Xamarin and .NET MAUI developers to connect with experts, share insights, and get help with your projects. Whether you're a beginner or an experienced developer, this group is the perfect place to enhance your skills and collaborate with the community.

---

Estimated reading time: ⏱️ 5 minutes

🚀 Why Use WebAuthenticator?

.NET MAUI provides WebAuthenticator from Microsoft.Maui.Authentication, a cross-platform API that opens a web-based login page for OAuth providers like Facebook. The benefit is:

• No SDK to install
• Secure
• Built-in callback handling via deep link

🛠 Step 1: Create a Facebook App

1. Go to 👉 https://developers.facebook.com
2. Click Create App
3. Select a use case (e.g., Consumer), click Next
4. Enter your App Name, then click Next again
5. Facebook may ask for your password. Enter it to proceed.
6. You’ll land on the App Dashboard

⚙ Step 2: Add Facebook Login Use Case

1. Click: Customize the Authenticate and request data from users with Facebook Login
2. Go to Permission and Features tab → Click Add to request permission like email
3. Under the Settings tab (inside Facebook Login), add:
• Add Redirect URI: https://gray-kacie-24.tiiny.site
• Valid OAuth Redirect URIs: https://gray-kacie-24.tiiny.site
4. Add yourself as a Tester under Roles → Testers
5. To go live: Complete Business Verification, Submit App for Review, and Publish

🔑 Step 3: Get the Facebook App ID

Go to Settings → Basic and copy your App ID. You’ll use this in your code as client_id.

📱 Step 4: Handle Redirect in Android

Add this class inside your Platforms/Android/ folder:

using Android.App;
using Android.Content;
using Android.OS;
using Microsoft.Maui.Authentication;

namespace YourAppNamespace.Platforms.Android
{
    [Activity(NoHistory = true, LaunchMode = LaunchMode.SingleTop, Exported = true)]
    [IntentFilter(
        new[] { Intent.ActionView },
        Categories = new[] { Intent.CategoryDefault, Intent.CategoryBrowsable },
        DataScheme = "com.kt.socialauthentication",
        DataPath = "/oauth2redirect")]
    public class WebAuthenticationCallbackActivity : WebAuthenticatorCallbackActivity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
        }
    }
}

---

Table of Contents for .Net Maui

• What is .NET MAUI and why it’s important
• Applying the MVVM pattern for cleaner architecture
• Working with Renderers and Mappers
• Storing data locally using SQLite and Preferences
• Image Picker from gallery
• Sending push notifications using Firebase
• Publishing your app to Android and iOS stores
• 🌟 Explore More Topics

---

🧑‍💻 Step 5: Implement Facebook Login in MAUI

Call this method on your login button click:

public async Task LoginWithFacebookAsync()
{
    var redirectUri = "https://gray-kacie-24.tiiny.site";
    var callbackUri = "com.kt.socialauthentication://oauth2redirect";

    var authUrl = $"https://www.facebook.com/v19.0/dialog/oauth" +
                  $"?client_id=yourappid" +
                  $"&redirect_uri={Uri.EscapeDataString(redirectUri)}" +
                  $"&response_type=token" +
                  $"&scope=email";

    try
    {
        var authResult = await WebAuthenticator.AuthenticateAsync(
            new Uri(authUrl),
            new Uri(callbackUri));

        if (authResult?.Properties != null &&
            authResult.Properties.TryGetValue("access_token", out var accessToken))
        {
            await App.Current.MainPage.DisplayAlert("Access Token", accessToken, "OK");

            // Optional: Use Facebook Graph API here
        }
    }
    catch (Exception ex)
    {
        await App.Current.MainPage.DisplayAlert("Error", ex.Message, "OK");
    }
}

📜 Code Explanation

• redirectUri: Hosted HTTPS page that redirects to your app
• callbackUri: Your custom URI that triggers the callback activity
• authUrl: Facebook's login URL
• AuthenticateAsync: Launches browser login flow
• access_token: Captured from redirect

🌐 Sample fb-redirect.html

This is hosted on GitHub Pages or Tiiny.site to handle the redirection from Facebook to your app:

<!DOCTYPE html>
<html>
<head>
    <title>Redirecting...</title>
    <script>
        const hash = window.location.hash;
        window.location.href = "com.kt.socialauthentication://oauth2redirect" + hash;
    </script>
</head>
<body>
    <p>Redirecting back to the app...</p>
</body>
</html>

✅ Final Touches

• Be sure to add your Facebook user as a tester
• Confirm the redirect page is publicly accessible
• Ensure your IntentFilter matches your URI scheme and path

🎉 You're Done!

Facebook login using WebAuthenticator is now working in your .NET MAUI app!

📌 Bonus Tips

• Use the same callback activity for Google login
• Fetch user profile using Facebook Graph API

🔗 Useful Links

• Facebook Login Docs
• MAUI WebAuthenticator Docs