Rork Project Backend and Authentication with Supabase

⚠️ Warning: Most apps do not NEED a backend! This can be complex work that breaks your project. Please read our introduction to backend document to know if you should do this to your Rork app.

This guide will help you use Supabase to build your backend. By the end of this guide, you will be able to sign users in with their email, establish all the backend databases for your app to fully function, and build out any functions needed to make your app personalized for the users. Overall, these are the Supabase products we will use:

Supabase DB. A database for storing your user data. Row Level Security so data is protected and users can only access their own information.
Supabase Auth - To allow users to login and sign up.
Supabase Storage - To allow users to upload a profile photo.

Create a Supabase account

Go to Supabase and create an account. This takes just a few minutes.
Create a new Supabase project (choose name, region, password).
Choose the region closest to where majority of your users will be.

Collect Your API Keys

Get the Project URL from the API settings and Publishable Key from the API Keys:

Go to the API Settings page in the Dashboard.
Find your Project URL and service_role keys on this page.
Then go to the API Keys page.
Find your Project Publishable Key on this page under the API Keys tab.

Install Supabase-JS into your project

Using supabase-js is the most convenient way of leveraging the full power of the Supabase stack as it conveniently combines all the different services (database, auth, realtime, storage, edge functions) together.

Install + init the Supabase SDK

Open your project in rork and ask to install these two packages

$ @supabase/supabase-js expo-sqlite

We need to create a config file to start the Supabase client (@supabase/supabase-js). Using the API URL and the Publishable Key we grabbed earlier. These variables are safe to expose in your Expo app since Supabase has Row Level Security enabled in the Database. Just copy and paste this with your proper keys to the Rork editor and say to build the utils/supabase.ts file.

utils/supabase.ts

import 'expo-sqlite/localStorage/install';
import { createClient } from '@supabase/supabase-js';

const supabaseUrl = "YOUR_API_URL";
const supabasePublishableKey = "YOUR_PUBLISHABLE_KEY";

export const supabase = createClient(supabaseUrl, supabasePublishableKey, {
  auth: {
    storage: localStorage,
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: false,
  },
});

For the rest of this guide, we will be building the Voice-Only social media app SPEEK.

Creating the Backend Data Schema

This is probably going to be the most challenging part of this whole process if you have never done this, but you can also use AI to help you out. You need to figure out the data schema needed for your application to work, and the functions that it should be able to do as well. You can ask it to generate all the relevant database schemas required for both user management + all aspects of the app by asking Rork.

Please list out all of the data schema objects required for our application to work. I will be using this list inside of the Supabase SQL AI editor to build out the proper tables.

For a social media app, there are two main points of focus: the user object and the post object.

As you can see, this is an exhaustive list of all the different aspects of each repeatable object in our app.

Create necessary tables for your app (with appropriate fields)

Now that you know exactly what your app’s schema is and how it functions, we can build our tables. Instead of manually building tables inside of Supabase, we can use the SQL editor inside of Supabase with its AI editor. Click on SQL Editor on the left panel inside your project. Then click on the AI editor on the top right. For this project, we will copy the objects above that were listed out inside of Rork and then ask the AI editor to build tables with them

If everything works out, there should be new tables established in your table editor. Double check that the information is correct. If not, work with the SQL AI editor to correct it.

Security Bonus: Enable Row Level Security (RLS) on your tables and setup the proper policies so that users can’t maliciously access other users’ data.

Set up authentication in Supabase dashboard (e.g., email/password, OAuth providers)

Now we just need to finish up by setting up the authentication services allowed and then connect them on the Rork app. For the sake of simplicity, let’s do email + password sign in. By default, Supabase enables email+password as a sign in option, but go to Authentication -> **Providers **to see all the options. You can sign in with Google, Apple, your phone number, and other options. You can also disable Email verification for your project to make things easier to start with inside of the Provider -> User Signups settings.

Integrate auth flows in your app (signup, login, session handling) If you go back to your Rork editor now, because we have setup the Supabase file, Rork will be able to build out the authentication. Ask Rork to integrate Supabase email+password sign up and sign in into your app. Make sure to note if there’s an email verification process so it routes correctly.

Integrate Supabase email+password sign up and sign in into the app and make
sure that connects properly + handles sessions properly.

Connect the functionality to the Rork app

Now let’s build out the rest of the helper functions needed. Please use the SQL editor in Supabase to list out all of the tables under “public”.

Paste the entire table schema from the SQL editor into the Rork chat and ask it to build out the helper functions. If all goes well, it should write out all of your app’s functions connected to your Supabase DB.

Updating your databases when your application changes

Sometimes, we add new features or update existing ones in ways where we ultimately need to update our data schema. You can always go to the Supabase SQL AI Editor and describe the changes you need to make. Rork can help you also generate the SQL changes, but always double check with the Supabase SQL AI editor before you use it.

Reminder: Updating your SQL is a very delicate process. Be careful that you do not delete your existing user data when updating. Please consult a professional software developer if you are worried and make backups.

Test and make sure your database updates with functions in your app

Now that you have everything connected, you should see your updates change the database tables and also persist! Congrats on building a backend!

Backend

​⚠️ Warning: Most apps do not NEED a backend! This can be complex work that breaks your project. Please read our introduction to backend document to know if you should do this to your Rork app.

​Create a Supabase account

​Collect Your API Keys

​Install Supabase-JS into your project

​Install + init the Supabase SDK

​Creating the Backend Data Schema

​Create necessary tables for your app (with appropriate fields)

​Set up authentication in Supabase dashboard (e.g., email/password, OAuth providers)

​Connect the functionality to the Rork app

​Updating your databases when your application changes

​Test and make sure your database updates with functions in your app