Implementing Social Login with OAuth2 (Google)

Introduction

Integrating social login in Flutter apps enhances user onboarding by reducing friction and leveraging proven authentication systems. Google’s OAuth2 mechanism, paired with Flutter’s google_sign_in plugin, streamlines sign-in without custom backends or UI. This tutorial walks you through configuring Google OAuth2 credentials, adding the plugin to your project, implementing the authentication flow, and securing tokens.

Configuring Google OAuth2 Credentials

1. Open Google Cloud Console and create or select a project.

2. Under API & Services, enable the “Google+ API” or “Google People API.”

3. Navigate to Credentials and click “Create Credentials > OAuth client ID.”

4. Choose “Android” (or “iOS”) application type:

   • For Android, supply your app’s package name and SHA-1 fingerprint.

   • For iOS, enter your bundle identifier.

5. Download the generated google-services.json (Android) or GoogleService-Info.plist (iOS) and place it in your project’s android/app/ or ios/Runner/ directory.

6. In android/app/build.gradle, add: • apply plugin: 'com.google.gms.google-services' • Under dependencies: classpath 'com.google.gms:google-services:4.3.8'.

Adding the google_sign_in Package

Open pubspec.yaml and add:

dependencies:
  flutter:
    sdk: flutter
  google_sign_in

Then run flutter pub get. Import the package where you’ll invoke sign-in:

import 'package:google_sign_in/google_sign_in.dart';

Implementing the Authentication Flow

Use GoogleSignIn to prompt the user and fetch tokens:

final GoogleSignIn _googleSignIn = GoogleSignIn(
  scopes: ['email', 'profile'],
);

Future<void> signInWithGoogle() async {
  try {
    final account = await _googleSignIn.signIn();
    if (account == null) return; // User canceled
    final auth = await account.authentication;
    // auth.accessToken & auth.idToken available here
    print('Access Token: ${auth.accessToken}');
  } catch (error) {
    print('Google sign-in failed: $error');
  }
}

Attach signInWithGoogle() to a button’s onPressed or app initialization logic. Always handle the null case when users cancel the prompt.

Securing Tokens and Refresh Handling

GoogleSignIn automatically refreshes tokens while the session is active. For persistent authentication across launches:

1. Store auth.idToken or auth.accessToken in secure storage (e.g., flutter_secure_storage).

2. On app start, call GoogleSignIn.signInSilently() to restore the session without user interaction.

3. In case of token expiration, prompt a fresh sign-in or handle refresh errors gracefully.

final storage = FlutterSecureStorage();

Future<void> silentSignIn() async {
  final account = await _googleSignIn.signInSilently();
  if (account != null) {
    final auth = await account.authentication;
    await storage.write(key: 'accessToken', value: auth.accessToken);
  }
}

Vibe Studio

Vibe Studio, powered by Steve’s advanced AI agents, is a revolutionary no-code, conversational platform that empowers users to quickly and efficiently create full-stack Flutter applications integrated seamlessly with Firebase backend services. Ideal for solo founders, startups, and agile engineering teams, Vibe Studio allows users to visually manage and deploy Flutter apps, greatly accelerating the development process. The intuitive conversational interface simplifies complex development tasks, making app creation accessible even for non-coders.

Conclusion

By following these steps, you can quickly add Google OAuth2-based social login to your Flutter app. Proper credential configuration, use of the google_sign_in plugin, and secure token storage result in a smooth, secure user experience.