Flutter Supabase Google Login: A Complete Guide

by Faj Lennon 48 views

Hey guys! Ready to dive into how to easily implement Google login with Supabase in your Flutter app? This guide is going to walk you through every step, making it super simple even if you're new to Supabase or Flutter. We'll cover everything from setting up your Supabase project to handling user authentication and displaying user data. By the end of this tutorial, you'll have a fully functional Google login system integrated into your Flutter application, allowing users to seamlessly authenticate with their Google accounts. Let's get started and make this process a breeze!

Setting Up Your Supabase Project

First things first, we need to set up our Supabase project. If you don't already have one, head over to Supabase and create an account. Once you're in, create a new project. Choose a name, select a region, and set up a database password. After your project is created, you’ll be taken to the project dashboard.

Now, let's enable the Google OAuth provider. In your Supabase dashboard, go to the Authentication section. Click on Providers and then select Google. You'll need to fill in some details here. You'll need a Google Client ID and a Google Client Secret. To get these, you’ll need to create an OAuth 2.0 client ID in the Google Cloud Console. Let me walk you through those steps!

  1. Go to the Google Cloud Console: Navigate to the Google Cloud Console.
  2. Create a Project (if needed): If you don't have a project already, create one by clicking the project dropdown at the top and then clicking "New Project".
  3. Navigate to Credentials: In the left sidebar, go to APIs & Services and then Credentials.
  4. Create Credentials: Click on "+ Create Credentials" and select "OAuth client ID".
  5. Configure Consent Screen: If you haven't configured the consent screen yet, you'll be prompted to do so. Configure it with the necessary information (app name, support email, etc.) and save it. Choose the User Type according to your project needs. For testing, choose External.
  6. Choose Application Type: Select “Web application” as the application type, in your case. Give it a name (e.g., “Flutter Supabase App”).
  7. Add Authorized Redirect URIs: This is crucial. Add the redirect URI provided by Supabase in your Google OAuth provider settings. The redirect URI is typically in the format: https://your-project-ref.supabase.co/auth/v1/callback. Copy the Redirect URL from your Supabase Google Auth Provider settings.
  8. Create Client ID: Click “Create”. You'll be presented with your Client ID and Client Secret. Copy these; you'll need them in the Supabase authentication settings.

Back in your Supabase dashboard, paste your Google Client ID and Client Secret into the respective fields. Configure the rest of the settings as needed. Save your changes. With your Supabase project ready, we're one step closer to making our Flutter app work with Google login.

Setting Up Your Flutter Project

Next up, we need to set up our Flutter project. If you haven't already, make sure you have Flutter installed and configured on your machine. You can find instructions on how to do this on the Flutter website.

Let’s start by creating a new Flutter project using the following command in your terminal:

flutter create supabase_google_login
cd supabase_google_login

Now, add the necessary dependencies to your pubspec.yaml file. You'll need the supabase_flutter package. Open your pubspec.yaml file and add the following under the dependencies section:

dependencies:
  flutter:
    sdk: flutter
  supabase_flutter: ^2.0.0 # Use the latest version

Then, run flutter pub get in your terminal to install the dependencies. Great! Now that the project and dependencies are set up, we can move on to the actual implementation of the Google login functionality. This is where the real fun begins, so stick with me, guys!

Initializing Supabase in Your Flutter App

Alright, let’s initialize Supabase in your Flutter app. This involves setting up the Supabase client with your project's URL and API key. Open your main.dart file and import the supabase_flutter package.

import 'package:flutter/material.dart';
import 'package:supabase_flutter/supabase_flutter.dart';

Inside your main function, before running your app, initialize Supabase. You can find your project URL and API key in your Supabase project dashboard under the Settings -> API section. The code should look something like this:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Supabase.initialize(
    url: 'YOUR_SUPABASE_URL',
    anonKey: 'YOUR_SUPABASE_ANON_KEY',
  );

  runApp(MyApp());
}

Replace 'YOUR_SUPABASE_URL' and 'YOUR_SUPABASE_ANON_KEY' with your actual Supabase project URL and anonymous key. After initializing Supabase, the runApp(MyApp()); call runs the main application. This sets up the Supabase client so you can interact with your Supabase backend from your Flutter app. Let’s create the UI now.

Creating the UI for Google Login

Time to create a simple UI for our Google login. This UI will contain a button that, when pressed, triggers the Google login flow. The UI should also display the user's information after a successful login. Let's create a basic LoginScreen widget.

import 'package:flutter/material.dart';
import 'package:supabase_flutter/supabase_flutter.dart';

class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  bool _isLoading = false;

  Future<void> _signInWithGoogle() async {
    setState(() {
      _isLoading = true;
    });
    try {
      await Supabase.instance.client.auth.signInWithOAuth(
        Provider.google,
        redirectTo: 'YOUR_REDIRECT_URI', // Use the same URI as in Supabase settings
      );
    } on AuthException catch (error) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(error.message)));
    } catch (error) {
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('An unexpected error occurred.')));
    } finally {
      setState(() {
        _isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Google Login with Supabase')),
      body:
      Center(
        child: _isLoading
            ? const CircularProgressIndicator()
            : ElevatedButton(
          onPressed: _signInWithGoogle,
          child: const Text('Sign in with Google'),
        ),
      ),
    );
  }
}

In this code, we have a LoginScreen widget that displays a button labeled