Getting started with Supabase.io(firebase Alt) on flutter

Supabase.io is an open-source backend as a service(BASS) that allows seamless integration of backend services into your application without the need for complex structure. supabase.io is a fast-growing alternative to Firebase and they have similar features which include database service, authentication service, storage service, and coming soon cloud functions.
Supabase.io has seamless integration with flutter application with fast integration of its core features. So in this article, we'll work through how to set up supabase.io in your flutter project.

Getting started

firstly we have to create a new project in app.supabase.io then enter the project details and wait for the project to launch.
Next, we are going to set up the database schema. We can use the "User Management Starter" quickstart in the SQL Editor.

1. Go to the "SQL" section.
2. Click "User Management Starter".
3. Click "Run".

Then you've created some database tables, you are ready to insert data using the auto-generated API. We just need to get the URL and anon key from the API settings.

1. Go to the "Settings" section.
2. Click "API" in the sidebar.
3. Find your API URL on this page.
4. Find your "anon" key on this page.

Note: your API URL and "anon" key would use when initializing supabase inside your project.

Setting Your App.

After creating your fultter app, you will have to install the supabase_flutter dependency,
Run the following command in your terminal to get the newest version of supabase_flutter to your project.

flutter pub add supabase_flutter

Then run

flutter pub get

to install the dependencies.

Now that we have the dependencies installed let's set up deep links so users who have logged in via magic link or OAuth can come back to the app.

1. Go to the "Authentication" section.
2. Click "Settings" in the sidebar.
3. Type io.supabase.flutterquickstart://login-callback/ in the Additional Redirect URLs input field.
4. Hit save.

This happened in the supabase end now we also have to add for android and ios.
For android: locate your AndroidManifest.xml file in android/app/src/main/AndroidManifest.xml to add an intent-filter to enable deep linking

<manifest ...>
  <!-- ... other tags -->
  <application ...>
    <activity ...>
      <!-- ... other tags -->

      <!-- Add this intent-filter for Deep Links -->
      <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <!-- Accepts URIs that begin with YOUR_SCHEME://YOUR_HOST -->
        <data
          android:scheme="io.supabase.flutterquickstart"
          android:host="login-callback" />
      </intent-filter>

    </activity>
  </application>
</manifest>

For Ios: add CFBundleURLTypes to enable deep linking in ios/Runner/Info.plis

<!-- ... other tags -->
<plist>
<dict>
  <!-- ... other tags -->

  <!-- Add this array for Deep Links -->
  <key>CFBundleURLTypes</key>
  <array>
    <dict>
      <key>CFBundleTypeRole</key>
      <string>Editor</string>
      <key>CFBundleURLSchemes</key>
      <array>
        <string>io.supabase.flutterquickstart</string>
      </array>
    </dict>
  </array>
  <!-- ... other tags -->
</dict>
</plist>

After the deep linking, we have to initialize supabase before ranApp() in main.dart to enable use it in our project.

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Supabase.initialize(
    url: '[YOUR_SUPABASE_URL]',
    anonKey: '[YOUR_SUPABASE_ANON_KEY]',
  );
  runApp(MyApp());
}

With this, you are all set to start building your project with supabase.io. so the next step is to set up the authentication with supabase.