Setting Up Supabase in Simple Expo Kit

Let's get started with final and easiest part of setting your app, that you bootstrapped with SEK. This guide includes complete setup of supabase, so that you can finally start building your own app.

In previous step, we ran the npm install in the project root & the admin directory. For admin directory, I suggest using pnpm install instead of npm install, it's much faster.

Configuring Supabase

This expo scaffolding comes with supabase integration. The decision to integrate supabase along with firebase, was to allow founders and developers to choose, based on their application needs.

Both are great in their own ways.

Supabase provides SQL database, Edge Functions, Storage & Authentication out of the box.

Firebase also provides No SQL Firestore, Push Notification FCM, Auth & Storage.

Google just introduced new Firebase SQL Connect.

*** While you can choose any one, choosing both in an application, allows you to optimize your costs in the longer run and be profitable. ***

01. Setting up Public Access to Supabase

We only need to setup two variables in the root .env file for supabase.

• EXPO_PUBLIC_SUPABASE_URL - Your supabase project url.
• EXPO_PUBLIC_SUPABASE_ANON_KEY - Your supabase anon key.

Supabase recently migrated to publishable keys. we can set it up with that too. We are using old anon key for compatibility. We might shift to new publishable keys in future.

1. Go to Supabase Dashboard
2. Open your Organization & Select or create a project. (Enable Data API)
3. From your project dashboard copy project url. Looks something like https://xxxxxxxxxxx.supabase.co
4. Replace it with dummy value for EXPO_PUBLIC_SUPABASE_URL in your .env file.
5. Navigate to Settings > API Keys > Legacy anon, service_role API Keys from your project dashboard.
6. Copy anon public key and replace it with dummy value for EXPO_PUBLIC_SUPABASE_ANON_KEY in your .env file.

That's it, we are done with supabase public keys.

02. Setting Private Access to Supabase

We need super user access for admin and service role key allows us to bypass Row Level Security (RLS).

Ensure our admin/.gitignore includes admin/.env file. We already have that by default.

1. Follow the same steps above to get the service role key.
2. Copy paste it in admin/.env file under SUPABASE_SERVICE_ROLE_KEY
3. Copy paste SUPABASE_URL to admin/.env file for SUPABASE_URL.

This ensures we have right access to manage our supabase project, database, migrations, pg cron, edge functions and many other things.

03. Init Supabase

We have placed the keys correctly in .env and admin/.env files, now we setup & link the project with supabase remote.

I am using npx, you can install supabase cli globally and use that. Supabase CLI

1. Init Supabase CLI

   cd admin
   npx supabase init
   

2. Login to Supabase

   npx supabase login
   

3. Link to remote project.

$ npx supabase link --project-ref [PROJECT_REF] 

or you can npx supabase link & select the project, instead of using Project Id as reference.

4. Run migrations

$ npx supabase db push

This will push tables, pg functions and cron in your supabase project.

5. Deploy Push Notification Action using Edge Functions

$ npx supabase db deploy push-notifications

**This is barebone setup for push notification, pg cron handles the operations of push notifications. **

04. Setup PG Vault

We need a way to securely save our project private credentials and secrets, and enable edge functions to securely perform admin level operations. To do that we use Supabase PG Vault extension. Our project edge function is already configured to use those keys. In this setup we add those keys to the PG_VAULT, so that our admin operations, works smoothly.

1. First, Go to Integrations > Vault or Settings > Integrations > Vault
2. Our migrations must have enabled the vault, if not enable it.
3. Go to Vault > Secrets
4. Add a secret with Key name service_role_key and secret value as your supabase service role key.
5. Add a secret with Key name project_url and secret value as your project url.

Congratulations, we have successfully setup all the configurations for our app and now we can run the app for the first time.

Run the App

We ran the app already to get sha 1 for android, remember? At that point we knew app will not properly run, because we needed further setup. Now, we have completed, almost everything that is needed to run the project.

Ensure your Emulator (Android/iOS) or Physical Device (Android/iOS) is connected and visible in your IDE terminal.

Run the following command to run the app:

• For Android

npx expo run:android

• For iOS

npx expo run:ios

When you run the app for the first time, it is going to take a while to build the project. If there are any errors, fix them and run the app again.

Kudos, your app setup based on SEK is ready for you to build your awesome idea. You are ready to design and build your ios & android app, setup branding and go.

If you are stuck somewhere, feel free to reach out to us here Contact Support