Supabase config for Apparencekit flutter starter

Setup ApparenceKit with Supabase

ApparenceKit will help you bootstrap your flutter app with authentication, monetization, theme, internationalization...
It's fully working with Supabase.
To make your life easier, we created a CLI that will generate tons of code for you depending on your needs.
Here is a step by step guide to setup your app with ApparenceKit and Supabase.

Note: Even if you use Supabase we still require Firebase for push notifications and remote config. As Supabase doesn't provide this

Prerequisites

You must have installed

1 - Generate your app

ApparenceKit CLI will generate tons of code

Open a terminal and run the following command in the root of your project:

dart pub global run apparence_cli setup .

You will be asked to choose between using Firebase or Supabase or Http Client.
Choose Supabase then press enter.

You will also be asked about

Using Sentry for error reporting
Using Firebase Remote Config for A/B testing
Using Mixpanel for analytics
Adding Internationalization
Adding introduction screens ...

2 - Setup Supabase

For this you must have a Supabase account and a project.

Supabase config

- Your Supabase project url
- Your Supabase project token

Using VSCode

Open the '.VSCode/launch.json' file and add your Supabase project url and token in the 'args' section.

...
    {
        "name": "Supabase - Development",
        "request": "launch",
        "type": "dart",
        "program": "lib/main.dart",
        "args": [
            "--dart-define=ENV=dev",
            "--dart-define=BACKEND_URL=", // 1 - Your Supabase project url
            "--dart-define=SUPABASE_TOKEN=", // 2 - Your Supabase project token
        ]
    },

Using command line

Run the following command in the root of your project:

flutter run --dart-define=ENV=dev \
--dart-define=BACKEND_URL=YOUR_SUPABASE_PROJECT_URL \
--dart-define=SUPABASE_TOKEN=YOUR_SUPABASE_PROJECT_TOKEN

Directly in your code (not recommended)

Open the 'lib/main.dart' file

await env.map(
    dev: (_) => Supabase.initialize(
      url: env.backendUrl, // 1 - Your Supabase project url
      anonKey: const String.fromEnvironment('SUPABASE_TOKEN'), // 2 - Your Supabase project token
    ),
    prod: (vars) => Supabase.initialize(
      url: env.backendUrl, // 1 - Your Supabase project url for production
      anonKey: const String.fromEnvironment('SUPABASE_TOKEN'), // 2 - Your Supabase project token for production
    ),
);

3 - Setup authentication providers

In order to use any provider you have to enable it in your Supabase project.

Email and password provider

Go to your Supabase project > authentication > providers and enable the email and password provider.

Supabase authentication config

Enable the email and password provider
Disable the confirm email (In most case, you don't want to a new users to quit your app to confirm their email. This is a bad user experience and will lead to many users getting distracted and never coming back to your app)

4 - Setup your database

Depending on the features you chose, ApparenceKit will require some tables in your database.
You can run the following command to create them in your Supabase project.

Tables for notifications

create table
  public.devices (
    id uuid not null default gen_random_uuid (),
    user_id uuid not null,
    creation_date timestamp with time zone not null,
    last_update_date timestamp with time zone not null,
    installation_id text not null,
    token text not null,
    "operatingSystem" text not null,
    constraint devices_pkey primary key (id),
    constraint devices_user_id_fkey foreign key (user_id) references auth.users (id) on update cascade on delete cascade
  ) tablespace pg_default;

create table
  public.notifications (
    id uuid not null default gen_random_uuid (),
    user_id uuid not null,
    title text not null,
    body text not null,
    creation_date timestamp with time zone not null,
    read_date timestamp with time zone null,
    constraint notifications_pkey primary key (id),
    constraint notifications_user_id_fkey foreign key (user_id) references auth.users (id) on update cascade on delete cascade
  ) tablespace pg_default;

Table for Subscriptions

create table
  public.subscriptions (
    id uuid not null default gen_random_uuid (),
    creation_date timestamp with time zone not null default now(),
    offer_id text not null,
    sku_id text not null,
    last_update_date timestamp with time zone not null,
    period_end_date timestamp with time zone null,
    user_id uuid null,
    constraint subscriptions_pkey primary key (id),
    constraint subscriptions_user_id_fkey foreign key (user_id) references auth.users (id) on update cascade on delete cascade
  ) tablespace pg_default;

This is where our webhook from Glassfy will save the subscription informations.

Table for User informations

create table
  public.users (
    id uuid not null default gen_random_uuid (),
    creation_date timestamp with time zone not null default now(),
    last_update_date timestamp without time zone null,
    name character varying null,
    email character varying null,
    "avatarPath" text null,
    constraint users_pkey primary key (id),
    constraint users_id_key unique (id)
  ) tablespace pg_default;

Table policies

Policies are used to manage access to your database.
Without them, your users won't be able to access their data. If you are new to Supabase, you can read more about database policies here.

Here's how you should setup your policies with ApparenceKit tables.

Supabase policies

4 - Setup firebase for notifications or remote config

ApparenceKit uses Firebase Cloud Messaging to send notifications to your users.
So you need to install the firebase_tools

We need firebase for the push notifications or remote config.

Google force us to create a project for Android application
Firebase allows us to send push notifications to iOS and Android devices

You must first create a firebase project here

Install firebase cli

On Mac, you can install it with

brew install firebase-cli

Or with npm

npm install -g firebase-tools

Check the official documentation for other OS.

Login to firebase

firebase login

Flutterfire cli

Flutter fire cli is a tool to generate firebase configuration files with flutter.

Install it with

dart pub global activate flutterfire_cli

Configure your project (dev environment here)

# flutterfire configure --project=YOUR_PROJECT_NAME --out lib/firebase_options_[environment].dart 
# Ex: 
flutterfire configure --project=apparencekit-pro --out lib/firebase_options_dev.dart

This will output a configuration file into your lib folder.
Create as many environments as you need.

Remove firebase generated files

I recommend you to remove any firebase generated files from Android / iOS folders.
Flutter recently added a new way to configure firebase, relying on dart code.

remove the google-services.json file from the android/app folder
remove the GoogleService-Info.plist file from the ios/Runner folder

Setup firebase

import 'package:apparence_kit/firebase_options_dev.dart' as firebase_dev;
...
void main() async {
    ...
    await env.when(
        dev: (_) => Firebase.initializeApp(
            options: firebase_dev.DefaultFirebaseOptions.currentPlatform,
        ),
        ...
    );
}