Flutter Authentication Flow with Supabase (Opensource Firebase Alternative)
Intro
Supabase is a opensource Firebase Alternative which provides Authentication, Relational(Postgres) database integrated with APIS/Realtime APIS, File Storage and many more features coming.
In this article we gonna build a simple user Register/Login app (from scratch!) using Supabase Authentication and Flutter.
By the end of this guide you’ll have an app which allows users to register and login with supabase:
Whenever you get stuck at any point, take a look at this repo.
Project set up
Before we start building we’re going to set up our Supabase account.
- Go to app.supabase.io.
- Login with your Github account.
- Click on “New Project”.
- Enter your project details.
- Wait for the new database to launch.
To make the process easier, let’s remove the email confirmation constraint on the supabase portal.
Now that you’ve setup your Supabase account, you are ready login and register your users. We just need to get the URL and anon key from the API settings.
Building the Flutter App
Let’s start building the Flutter app from scratch.
On the terminal:
Then open the supabase_flutter folder on your favorite editor.
Project Setup:
Before we start, let’s create the project folder structure and our view files
- on the lib folder, create one folder called “views”
- inside the “views” folder, create 4 files (home_view.dart, login_view.dart, register_view.dart and splash_view.dart)
This is our final files/folder structure:
Now, on our terminal, let’s install some dependencies to help us:
- Supabase — Supabase client for Flutter
- get_it — Service locator to help us inject Supabase Client on our pages
- shared_preferences — To persist the user session on our app
And check the pubspec.yaml file (the packages versions may differ from mine):
Let’s open the main.dart file to setup the Supabase client as Singleton instance and configure the app routes:
- don’t forget to change the SUPABASE_URL and SUPABASE_ANON_KEY to the url and key generated before.
On the main() method we are creating a singleton instance of SupabaseClient, using the supabase_url and supabase_anon_key to link this project with our Supabase account. and in the MyApp method we are defining the routes off our app.
Register View:
Open the register_view.dart file and place the following code:
In this view, we are defining tree TextFormField(), email, password and password confirm and a _register() method wich will be called on press of the Register button.
When the Register button is pressed, an instance of SupabaseClient is called and the method .auth.signup is invoked with the e-mail and password fields provided.
If the result.data is different than null, we are redirected to the Login view and a Dialog is shown. If we have some problem on registration, like duplicated e-mail field, an error dialog is shown, with the register error message.
Login View:
Open the login_view.dart file and place the following code:
In this view, we are defining two TextFormField(), email and password and a _login() method which will be called on press of the Login button.
When the Login button is clicked, an instance of SupabaseClient is called and the method .auth.signin is invoked with the e-mail and password fields provided.
If the result.data is different than null, we are using shared_preferences to set an String ‘user’ key with the value of the persistSessionString returned from the signin method.
This key will be used on the SplashView (we will create this on the next steps) to check if the user is already logged in on the application and redirects user to the HomeView and renew the Supabase credentials (token) without need to login again.
Home View:
This view is quite straightforward. There’s only a Text() widget which shows the Logged User’s Email and a Logout button.
On the build() method we are getting the current logged in user with final currentUser = GetIt.instance<SupabaseClient>().auth.user(); and using the currentUser.email property to show the User’s e-mail on the screen.
The _logout() method is responsible to signOut the user from the Supabase server and clean the shared_preferences so the user will need to login again.
Splash View:
As i mentioned before, the Splash View will be the entry point route (‘/’) of our app. It will check if the user already has a session on the app. If there’s a session, the user will be redirected to the Home View and their credentials will be renewed on the Supabase server. If the session is not present, the user will be redirected to the Login View.
At this stage you have a fully functional application! Let’s run the app on the emulator/device:
**Some design patterns could have been used to make the code better, but they would increase the difficulty level of this article .
Next steps
- Got a question? Ask here or reply to this article.
- Sign in: app.supabase.io
