Add Google Login to .NET MAUI in Just 10 Minutes

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.

Please, support my blog by clicking on our sponsors ad!


๐ŸŽฏ 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
  1. Redirect URI: packagename:/oauth2redirect
  2. Enable Custom URL
  3. ✅ 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


Add Google Login to .NET MAUI in Just 10 Minutes



Add Google Login to .NET MAUI in Just 10 Minutes

Add Google Login to .NET MAUI in Just 10 Minutes


๐Ÿง  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

StepDescription
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

Comments

Popular posts from this blog

Push Notifications in .NET MAUI: A Comprehensive Guide

Push Notification using Firebase in xamarin form (Android and IOS)

School UI Design using xamarin form