Implementing OAuth Social Logins in Flutter

Introduction

In mobile development with Flutter, offering OAuth-based social logins (Google, Facebook) simplifies user onboarding and boosts conversion. Flutter’s rich ecosystem and plugins let you integrate OAuth flows with minimal boilerplate. This tutorial guides you through setting up OAuth credentials, adding dependencies, and implementing Google and Facebook logins in your Flutter app. We’ll also show how to centralize authentication logic and secure tokens for a seamless user experience.

Configuring OAuth Providers

Before writing Flutter code, register your app with each provider:

Google:

• Go to Google Cloud Console. Create a project and an OAuth client ID (Android/iOS).

• Add your app’s package name and SHA-1 certificate fingerprint.

• Note the generated client ID for later.

Facebook:

• Visit Facebook Developers. Create a new app and choose “Consumer.”

• Under Products, enable Facebook Login, then set your bundle ID (iOS) or package and key hashes (Android).

• Copy the App ID and App Secret for your Flutter app.

For both, configure redirect URIs if you use custom schemes or a backend. Ensure your AndroidManifest.xml and Info.plist match the package identifiers and URL schemes provided by each console.

Integrating Google Sign-In

Add the google_sign_in package to pubspec.yaml:

dependencies: 
  flutter:
    sdk: flutter
   google_sign_in

Import and initialize in your Dart code:

import 'package:google_sign_in/google_sign_in.dart';

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

Future<void> signInWithGoogle() async {
  try {
    final GoogleSignInAccount? account = await _googleSignIn.signIn();
    if (account == null) return; // user canceled
    final auth = await account.authentication;
    final accessToken = auth.accessToken;
    // Send accessToken to your backend or persist it
  } catch (error) {
    print('Google sign-in error: $error');
  }
}

Use this method behind a UI button. On Android, ensure your google-services.json is in android/app, and on iOS, configure the reversed client ID in Info.plist.

Integrating Facebook Login

Add flutter_facebook_auth to pubspec.yaml:

dependencies

Import and trigger login:

import 'package:flutter_facebook_auth/flutter_facebook_auth.dart';

Future<void> signInWithFacebook() async {
  final LoginResult result = await FacebookAuth.instance.login(
    permissions: ['email', 'public_profile'],
  );
  if (result.status == LoginStatus.success) {
    final AccessToken token = result.accessToken!;
    // Use token.token for your API calls or backend verification
  } else {
    print('Facebook login failed: ${result.status}');
  }
}

On Android, add your Facebook App ID and protocol to AndroidManifest.xml. On iOS, update Info.plist with FacebookAppID, display name, and URL types. Follow the flutter_facebook_auth docs for full platform setup.

Unified OAuth Flow

Maintain a single AuthService to handle multiple providers and token storage. This simplifies UI and ensures consistent error handling:

• Define an abstract AuthProvider interface with signIn() and signOut().

• Implement GoogleAuthProvider and FacebookAuthProvider classes.

• Use flutter_secure_storage to persist access tokens securely:

import 'package:flutter_secure_storage/flutter_secure_storage.dart';
final _storage = FlutterSecureStorage(); await _storage.write(key: 'google_token', value: accessToken);

• In your AuthService, inject providers and expose a single signInWith(ProviderType type) method.

• Centralize refresh logic: detect expired tokens and reauthenticate silently if possible.

With this structure, adding Twitter, LinkedIn, or custom OAuth2 providers becomes straightforward. Your UI only calls AuthService.signInWith(ProviderType.google) or ProviderType.facebook, keeping widgets clean.

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

Implementing OAuth social logins in Flutter enhances user experience and reduces friction in mobile development. By configuring credentials in provider consoles, integrating google_sign_in and flutter_facebook_auth packages, and centralizing logic in an AuthService with secure token storage, you create a robust and maintainable authentication system. Follow platform setup guides carefully, test on both Android and iOS, and keep your dependencies up to date to ensure smooth integration and security.