How to use Supabase in your Flutter application with DhiWise?



January 17, 2023


January 17, 2023

PostgreSQL is the world's most scalable database, which helps developers build secure apps by protecting data integrity no matter how small or large your database is. So if you want to build a secure web or mobile app that may grow high in the database and supports analytics simply use the PostgreSQL tool. 

In this article, we are going to explore how to use the PostgreSQL database for your Flutter backend without actually writing server-side code with Supabase and DhiWise.

So let's get started!

Table of Content:

  1. What is the PostgreSQL database tool?
  2. What is Supabase?
  3. Why use Supabase for web and mobile apps?
  4. How to set up Supabase authentication in your Flutter app with DhiWise?

What is a PostgreSQL database?

It is a relational open-source database that is powerful, simple, flexible, and extends SQL along with multiple features. It safely stores and scales even the most complicated data workloads for any kind of application.

It has earned a strong reputation among the developer community for its reliability, scalability, and robust features. It runs well on all major operating systems and it has been ACID-compliant since 2001. 

Well if you want to get started with the PostgreSQL database without getting into the stress of writing and maintaining server-side code it is good to go with the Backend as a Service option and Supabase is the best among them. 

But, what is Supabase and why should you use it for the web or mobile application backend?

What is Supabase?

Supabase is an open-source alternative to Firebase that uses PostgreSQL. Supabase offers remote database capabilities along with real-time data access, authentication, media storage, edge functions, and other services. 

It is Backend as a Service Model that simplifies all the backend aspects of web and mobile app development. It is a good choice if you want to use a remote database that is structured in nature and comes with decades of useful Postgres extensions and plugins. 

It has the following features that are added straight on top of PostgreSQL.

  1. Auto-generated APIs- Allows users to query data straight from the client.
  2. Any changes in the data will be directly streamed to your app in real-time.
  3. It gives a simple to-integrate authentication system with an SQL-based rule engine.
  4. Provides JavaScript and TypeScript functions that can be deployed globally. 
  5. Simplify image, video, and pdf file hosting.

Why use Supabase for web and mobile apps backend?

Consider you have a personal project that needs authentication and a database to store some data, and you want something similar to Firebase but that can accept relational data.

Supabase is the most loved and simple way that comes with three options to deal with the backend database,  storage, and authentication. So what users need to do is to just call the API that Supabase generated automatically for apps to do any operations and developers can easily deploy their app using any web hosting options like Vercel with GitHub. 

With supabase users can get started easily and it provides all the features required for relational database creation and management. 

The authentication feature provides many methods such as SignIn SignUp, Session, etc. This helps front-end developers to build apps smoothly and conveniently with backend connectivity. 

Now, you have enough information about PostgreSQL, and Supabase, and why to use them for your app backend. Next, we will look into its implementation in the Flutter application with DhiWise. 

How to set up Supabase authentication in your Flutter app with DhiWise?

Before directly diving into Supabase implementation into your Flutter app first understand about DhiWise and what it offers to make your app development a smooth, efficient, and fun process.

DhiWise is a web and mobile app development platform for developers, backed with advanced app development features that empower developers to build secure apps faster. For that, it offers an intuitive GUI with visual programming support for a range of technologies like Flutter, React.js, Android, iOS, Laravel, and Node.js. 

Additionally, it is integrated with the most popular developers' tools and technologies like Supabase, Firebase, GitHub, GitLab, Vercel, Storybook, and so on, helping developers to extend their app development capabilities without leaving the platform. 

Well, here we are going to explore more about Supabase and Flutter. And we have already seen that Supabase provides three main features i.e storage, database, and authentication. These features can be quickly and efficiently accessed using DhiWise Supabase integration. 

So how and when can you use this capability with DhiWise?

To implement Supabase in the Flutter application using DhiWise, you must have a registered account with DhiWise and Supabase. Also, you must have your Flutter application boilerplate ready. 

Here, we are assuming that you already have the Flutter app boilerplate. Read this article to know more about generating boilerplate code for the Flutter app using DhiWise and Figma. 

Follow the steps below to set up social authentication in the Flutter app with the Supabase:

Step 1: Select Supabase from the supported type of authentication. 

With DhiWise you can select and add Supabase from the supported type of authentication on the onClick method as shown below. 


Step 2: Set up the configuration- Add URL and API Key

For authenticating your application with Supabase using Email Sign-In/Sign-Up, set up the below configuration. 

Inside your Supabase app Project dashboard, go to the project setting. Here under the API section, copy the URL and the API key for your app. 

Then in the downloaded source code navigate to the /lib/core/utils/initial_binding.dart and paste the URL and the API key as the value for the supabaseUrl and supabasePublicKey variables, respectively.


Step 3: Set up Supabase authentication

Next, navigate to the Authentication on your Supabase project dashboard. And enable the Email option for authenticating your Flutter app using Email as shown here. 


And that's it, very simple!

Bottom Line:

In this article, we have covered the basics of the PostgreSQL tool, Supabase, and its implementation in the Flutter application with DhiWise.

We have also covered why and when to use Supabase for web and mobile backend apps and how DhiWise simplifies the Supabase implementation into the Flutter application.

So if you are one among the Flutter developers who want to accelerate their frontend app development and backend Supabase integration, simply try DhiWise.