Dive into Supabase Auth on Flutter: Email/Password, Google, Facebook Provider
This project will include:
- Email Auth
- External OAuth Providers
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.
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.
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
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.
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
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:
GitHub - Snehal-Singh174/Supabase-Flutter-Tutorial
Contribute to Snehal-Singh174/Supabase-Flutter-Tutorial development by creating an account on GitHub.
To know more about Supabase and its comparison with Firebase you can read this article written by me.