Add Google Login to .NET MAUI in Just 10 Minutes

🔐 Sign In with Google in .NET MAUI (Android & iOS) – A Step-by-Step Guide

Adding Google Sign-In to your .NET MAUI app is one of the most powerful ways to give users secure and seamless access. In this blog post, we’ll go from zero to working implementation, using a shared codebase that works on both Android and iOS.

This guide includes:

• Google API setup (with critical save steps)
• Android/iOS redirect configuration
• MAUI WebAuthenticator usage
• Fully working code

---

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.

---

🎯 Objective

We want a single Login with Google button that:

• Launches Google sign-in
• Authenticates the user
• Returns an authorization code
• (Optional) Exchanges code for tokens

---

✅ Step 1: Configure Google API Console

1. Go to https://console.cloud.google.com
2. Click on New Project, enter the project name, and create it.
3. Go to Dashboard
4. Enable APIs and Services
5. Go to APIs and Services => Choose Credential

---

🧾 Step 2: Create OAuth Client IDs

🔸 Android OAuth Client

1. Create credentials → OAuth Client ID
2. Choose Android
3. Enter:
   • Package name: packagename
   • SHA1: Use the command below

keytool -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android

4. Redirect URI: packagename:/oauth2redirect
5. Enable Custom URL
6. ✅ Click Create and Save

🔹 iOS OAuth Client

1. Repeat the steps to create a new client
2. Choose iOS
3. Bundle ID: bundleid
4. Redirect URI: bundleid:/oauth2redirect
5. ✅ Click Create and Save

---

---

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 4: Implement Login Logic in .NET MAUI

LoginViewModel.cs

public class LoginViewModel
{
    public ICommand LoginWithGoogleCommand { get; }

    public LoginViewModel()
    {
        LoginWithGoogleCommand = new Command(async () => await LoginWithGoogleAsync());
    }

    public async Task LoginWithGoogleAsync()
    {
        try
        {
            string clientId = string.Empty;

            if (DeviceInfo.Platform == DevicePlatform.Android)
                clientId = "xxxx.apps.googleusercontent.com"; // Android
            else
                clientId = "xxxx.apps.googleusercontent.com"; // iOS

            var redirectUri = "packagename:/oauth2redirect";

            var authUrl = $"https://accounts.google.com/o/oauth2/v2/auth" +
                          $"?client_id={clientId}" +
                          $"&redirect_uri={redirectUri}" +
                          $"&response_type=code" +
                          $"&scope=openid%20email%20profile" +
                          $"&access_type=offline" +
                          $"&prompt=consent";

            var result = await WebAuthenticator.Default.AuthenticateAsync(
                new Uri(authUrl),
                new Uri(redirectUri));

            var code = result?.Properties["code"];
            // TODO: Exchange code for token if needed
        }
        catch (Exception ex)
        {
            await Application.Current.MainPage.DisplayAlert("Login Failed", ex.Message, "OK");
        }
    }
}

---

🖼️ Step 5: Add Login Button to MainPage

MainPage.xaml

<Button
    Text="Login with Google"
    Command="{Binding LoginWithGoogleCommand}"
    HorizontalOptions="Fill" />

MainPage.xaml.cs

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        BindingContext = new LoginViewModel();
    }
}

---

🤖 Step 6: Android Platform Setup

Platforms/Android/WebAuthenticationCallbackActivity.cs

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

AndroidManifest.xml (inside <manifest>)

<queries>
  <intent>
    <action android:name="android.support.customtabs.action.CustomTabsService" />
  </intent>
</queries>

---

🍏 Step 7: iOS Setup

Info.plist

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>bundleid</string>
    </array>
  </dict>
</array>

---

🚀 Step 8: Run and Test

1. Build and deploy on Android or iOS
2. Click the Login with Google button
3. Authenticate and allow access
4. Receive an authorization code

---

✅ Summary

Step	Description
1️⃣	Google Console setup
2️⃣	Custom Redirect URI + Save
3️⃣	Create Android/iOS OAuth Clients
4️⃣	Implement WebAuthenticator Login
5️⃣	Android Activity + Manifest Setup
6️⃣	iOS URL Scheme in Info.plist
7️⃣	Test on Android/iOS

---

🔖 Hashtags

.NET MAUI, Google Sign-In, Android Login, iOS Login, OAuth2, WebAuthenticator, Mobile App Login, Cross-platform Auth, MAUI Authentication, Secure Signin, Xamarin Alternative