Dive into Supabase Auth on Flutter: Email/Password, Google, Facebook Provider

Hi there,👋 in this article, we are gonna build🚀 a simple application showing authentication flow using Flutter and Supabase.

This project will include:

1. Email Auth
2. External OAuth Providers

• Google
• Facebook

Step 1: Create a project

Filled the project details as shown in the image and select the pricing plan. If you want to create a project without paying then select Free tier in Pricing Plan selection and go ahead with the project setup.

After completing the project setup you can see the dashboard from there select your project and from there follow the below steps to get your URL and Public Anon Key.

Step 2: Enable Email Auth, Google, and Facebook

Now for google and Facebook provider integration, we have to do additional setups.

1. Google:

Follow the steps mentioned in the Supabase Auth doc guide for creating Google Cloud Platform Project. And if get stuck in between feel free to contact.

2. Facebook

Follow the steps mentioned in the Supabase Auth doc guide for creating Facebook Developer Project. And if get stuck in between feel free to contact.

Step 3: Add Client Id, Secret for Google, and Facebook

Step 4: Create Flutter Application

Please add the below dependencies in your project:

For Deep-link Integration, you have to add the below intent-filter inside the main activity.

This is the folder structure for our project:

Now let’s initialize supabase instance inside the main.dart file and configure the app routes. Replace SUPABASE_URL and SUPABASE_ANON_KEY with your own credentials.

Now we are going to integrate Email Auth in sign_up_screen.dartand after signing up will redirect to dashboard.dart . sign_up_screen.dart will be an AuthState Widget which is the SupabaseAuth State Widget that handles the authentication and unauthenticated implementation.

auth_state.dart will manage the SupabaseAuthState for authentication and another state.

In sign_in_screen.dart we are going to implement supabase sign-in auth with email, google provider, and facebook provider. For providers, we are going to pass AuthOptions along with the provider name.

After successful sign-in or signup, the redirection will be done on the dashboard screen. Inside the dashboard screen, we have implemented supabase signout and extended AuthRequiredState which will manage onUnAuthenticated State.

auth_require_state.dart will be used by dashboard.dart

Conclusion

Congratulations! on implementing Supabase, Now let’s see what you have learned:

• implemented signup and sign in with email and password
• used external auth Google and Facebook sign-in for flutter app
• working with supabase_flutter plugin for Supabase Authentication in a Flutter app

Running the Project:

Resources:

GitHub - Snehal-Singh174/Supabase-Flutter-Tutorial

To know more about Supabase and its comparison with Firebase you can read this article written by me.

Supabase Vs. Firebase: What you should know about?