What is Supabase

Backend as a Service (BaaS) means that we no longer write or manage all server-side components and can use domain-generic remote components (rather than in-process libraries) to provide services. To understand BaaS, you need to understand how it differs from PaaS.

PaaS need to participate in application lifecycle management, while BaaS only provide third-party services that the application depends on. A typical PaaS platform needs to provide a means for developers to deploy and configure applications, such as automatically deploying applications into a Tomcat container and managing the application lifecycle. BaaS does not contain these contents. BaaS only provides the back-end services that applications depend on, such as databases and object storage, in the form of apis. BaaS can be provided by public cloud service providers or third-party vendors. Second, functionally, BaaS can be seen as a subset of PaaS, that is, the part that provides third party dependent components.

The BaaS service also allows us to rely on application logic that others have already implemented. Certification is a good example of this. Many applications have to write their own code to implement the logic of registration, login, password management, and so on, and the code is often the same for different applications. It’s perfectly possible to take these repetitive tasks and turn them into external services, which is the goal of products like Auth0 and Amazon Cognito. They enable comprehensive authentication and user management, and the development team no longer has to write or manage the code that implements these capabilities.

Firebase is a typical BaaS company that makes it easy for mobile and web developers to build apps. Firebase’s framework makes it easy to develop an App, requiring no servers or infrastructure. In short, it’s a complete solution.

Supabase is an open source alternative to Firebase. Officials say they are building Firebase’s features using enterprise-class open source tools. Supabase can:

  • Listen for changes to the database.

  • Query your tables, including filtering, paging, and deep nesting (like GraphQL).

  • Create, update, and delete rows.

  • Manage your users and their permissions.

  • Use a simple user interface to interact with your database.

The beauty of Supabase is that, where possible, they chose to use existing libraries and databases. Instead of using state-of-the-art technology, they use PostgreSQL for a lot of functionality and other libraries for other functionality. From a locking perspective, the lack of customization is a good thing.

Here are five quick steps to developing a web application that doesn’t require a back-end server

Let’s start the experiment

Cloning code

Git clond gitee.com/memfiredb/s…

Create an

Log in to Memfire Cloud to create an application and obtain the service address and token information

Anon public is the client API key. It allows “anonymous access” to your database until the user logs in. After login, the key is switched to the user’s own login token. This enables row-level security for the data.

Note: Service_role Secret can bypass any security policy to gain full access to your data. These keys must be kept secret and used in a server environment, never on a client or browser.

In the following sample code, you need to provide REACT_APP_SUPABASE_URL and REACT_APP_SUPABASE_KEY.

Configure the access key

Set the anon public and url obtained in the previous step to REACT_APP_SUPABASE_KEY and REACT_APP_SUPABASE_URL, respectively

supabase/examples/react-todo-list/src/lib/constants.js

Create table

Locate the corresponding database and click the online SQL editor button to create tables and security policies

create table public.todos (
  id bigint generated by default as identity primary key,
  user_id uuid references auth.users not null,
  task text check (char_length(task) > 3),
  is_complete boolean default false,
  inserted_at timestamp with time zone default timezone('utc'::text, now()) not null
);

alter table public.todos enable row level security;

create policy "Individuals can create todos." on public.todos for
    insert with check (auth.uid() = user_id);

create policy "Individuals can view their own todos. " on public.todos for
    select using (auth.uid() = user_id);

create policy "Individuals can update their own todos." on public.todos for
    update using (auth.uid() = user_id);

create policy "Individuals can delete their own todos." on public.todos for
    delete using (auth.uid() = user_id);

Copy the code
To run the program
npm config set registry https://registry.npm.taobao.org
cd supabase/examples/react-todo-list
npm install
npm run start --host 0.0.0.0

Copy the code

The program interface is shown below