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
- Go to https://console.cloud.google.com
- Click on New Project, enter the project name, and create it.
- Go to Dashboard
- Enable APIs and Services
- Go to APIs and Services => Choose Credential
๐งพ Step 2: Create OAuth Client IDs
๐ธ Android OAuth Client
- Create credentials → OAuth Client ID
- Choose Android
- Enter:
- Package name: packagename
- SHA1: Use the command below
keytool -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android
- Redirect URI:
packagename:/oauth2redirect
- Enable Custom URL
- ✅ Click Create and Save
๐น iOS OAuth Client
- Repeat the steps to create a new client
- Choose iOS
- Bundle ID:
bundleid
- Redirect URI:
bundleid:/oauth2redirect
- ✅ 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
- Build and deploy on Android or iOS
- Click the Login with Google button
- Authenticate and allow access
- 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
Comments
Post a Comment