Merge pull request #12121 from supabase/master

Prod deploy dashboard
This commit is contained in:
Joshen Lim authored and GitHub committed 2023-02-02 15:45:15 +08:00
commit c20ed925ad
139 files changed
+1733 -470

No files matched your search

+11 -1
View File
@@ -1,6 +1,6 @@
import Image from 'next/image'
import Link from 'next/link'
import { Button, IconGitHub, IconTwitter } from '~/../../packages/ui'
import { Button, IconGitHub, IconTwitter, IconYoutube } from '~/../../packages/ui'
import footerData from '~/data/footer.json'
import { useTheme } from 'common/Providers'
@@ -20,6 +20,16 @@ const Footer = () => {
))}
</div>
<div className="flex items-center gap-2">
<Button
type="text"
as="a"
// @ts-ignore
href="https://youtube.com/c/supabase"
target="_blank"
rel="noreferrer noopener"
>
<IconYoutube size={16} />
</Button>
<Button
type="text"
as="a"
@@ -3,6 +3,7 @@ import Image from 'next/image'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { Fragment } from 'react'
import { Badge } from '~/../../packages/ui'
const home = [
[
@@ -94,17 +95,19 @@ const home = [
href: '/reference/dart/introduction',
level: 'reference_dart',
},
{
label: 'C#',
icon: '/img/icons/menu/reference-csharp',
href: '/reference/csharp/introduction',
level: 'reference_csharp',
},
{
label: 'Python',
icon: '/img/icons/menu/reference-python',
href: '/reference/python/introduction',
level: 'reference_python',
community: true,
},
{
label: 'C#',
icon: '/img/icons/menu/reference-csharp',
href: '/reference/csharp/introduction',
level: 'reference_csharp',
community: true,
},
{
label: 'Tools',
@@ -177,6 +180,7 @@ const NavigationMenuHome = ({ active }) => {
className="w-4 h-4 group-hover:scale-110 ease-out transition-all"
/>
{link.label}
{link.community && <Badge size="small">Community</Badge>}
</li>
</a>
</Link>
@@ -453,6 +453,11 @@ export const functions = {
url: '/guides/functions/examples/cloudflare-turnstile',
items: [],
},
{
name: 'Connect to Postgres',
url: '/guides/functions/examples/connect-to-postgres',
items: [],
},
{ name: 'GitHub Actions', url: '/guides/functions/examples/github-actions', items: [] },
{ name: 'OG Image', url: '/guides/functions/examples/og-image', items: [] },
{ name: 'Storage Caching', url: '/guides/functions/examples/storage-caching', items: [] },
@@ -712,6 +717,7 @@ export const integrations = {
{ name: 'DhiWise', url: '/guides/integrations/dhiwise', items: [] },
{ name: 'Directus', url: '/guides/integrations/directus', items: [] },
{ name: 'Draftbit', url: '/guides/integrations/draftbit', items: [] },
{ name: 'FlutterFlow', url: '/guides/integrations/flutterflow', items: [] },
{ name: 'Plasmic', url: '/guides/integrations/plasmic', items: [] },
{ name: 'ILLA', url: '/guides/integrations/illa', items: [] },
],
@@ -816,7 +822,6 @@ export const reference_dart_v1 = {
parent: '/reference',
}
export const reference_csharp_v0 = {
icon: 'reference-csharp',
title: 'c#',
@@ -253,7 +253,7 @@ const NavigationMenu = () => {
commonSections={libCommonSections}
lib="csharp"
spec={spec_csharp_v0}
/>
/>
<NavigationMenuRefList
key={'reference-python-menu-v2'}
@@ -262,7 +262,6 @@ const NavigationMenu = () => {
commonSections={libCommonSections}
lib="python"
spec={spec_python_v2}
/>
{/* // Tools */}
<NavigationMenuRefList
@@ -179,7 +179,6 @@ const Content: React.FC<INavigationMenuRefList> = ({ id, lib, commonSections, sp
if (!sections) console.error('no common sections imported')
const menu = NavItems[id]
//console.log(menu)
const databaseFunctions = find(sections, { title: 'Database' })
? find(sections, { title: 'Database' }).items
: []
+56 -1
View File
@@ -13,6 +13,10 @@ custom_edit_url: https://github.com/supabase/supabase/edit/master/web/spec/supab
Initializing a new client is pretty straightforward. Find your project url and public key from the
admin panel and pass it into your client initialization function.
`supabase-csharp` is heavily dependent on Models deriving from `BaseModel`. To interact with the API, one must have the associated model (see example) specified.
Leverage `Table`, `PrimaryKey`, and `Column` attributes to specify names of classes/properties that are different from their C# Versions.
</RefSubLayout.Details>
<RefSubLayout.Examples>
@@ -29,7 +33,7 @@ admin panel and pass it into your client initialization function.
var options = new Supabase.SupabaseOptions
{
AutoConnectRealtime = true
AutoConnectRealtime = true
};
var supabase = new Supabase.Client(url, key, options);
@@ -61,6 +65,57 @@ admin panel and pass it into your client initialization function.
```
</TabPanel>
<TabPanel id="csharp-init-showing-models" label="With Models Example">
```csharp
// Given the following Model representing the Supabase Database (Message.cs)
[Table("messages")]
public class Message : BaseModel
{
[PrimaryKey("id")]
public int Id { get; set; }
[Column("username")]
public string UserName { get; set; }
[Column("channel_id")]
public int ChannelId { get; set; }
public override bool Equals(object obj)
{
return obj is Message message &&
Id == message.Id;
}
public override int GetHashCode()
{
return HashCode.Combine(Id);
}
}
void Initialize()
{
// Get All Messages
var response = await client.Table<Message>().Get();
List<Message> models = response.Models;
// Insert
var newMessage = new Message { UserName = "acupofjose", ChannelId = 1 };
await client.Table<Message>().Insert();
// Update
var model = response.Models.First();
model.UserName = "elrhomariyounes";
await model.Update();
// Delete
await response.Models.Last().Delete();
// etc.
}
```
</TabPanel>
</Tabs>
</RefSubLayout.Examples>
+16 -5
View File
@@ -8,13 +8,24 @@ hideTitle: true
<img src="/docs/img/icons/menu/reference-csharp.svg" className="w-8 h-8 rounded" />
<div className="flex flex-col gap-2">
<h1 className="text-3xl text-scale-1200 m-0">C# Client Library</h1>
<h2 className="text-base font-mono text-scale-1100">supabase-csharp</h2>
<h2 className="text-base font-mono text-scale-1100">@supabase-community/supabase-csharp</h2>
</div>
</div>
<div className="max-w-xl">
This reference documents every object and method available in Supabase's C#
library, [supabase-csharp](https://www.nuget.org/packages/supabase-csharp). You can
use supabase-csharp to interact with your Postgres database, listen to database changes, invoke
Deno Edge Functions, build login and user management functionality, and manage large files.
This reference documents every object and method available in Supabase's C# library,
[supabase-csharp](https://www.nuget.org/packages/supabase-csharp). You can use supabase-csharp to
interact with your Postgres database, listen to database changes, invoke Deno Edge Functions,
build login and user management functionality, and manage large files.
</div>
<div className="max-w-xl bg-slate-300 px-4 py-2 rounded-md">
<p>The C# client library is created and maintained by the Supabase community, and is not an official library. Please be tolerant of areas where the library is still being developed, and — as with all the libraries — feel free to contribute wherever you find issues.</p>
<p>
Huge thanks to official maintainer, [Joseph Schultz](https://github.com/acupofjose), and to [Ben
Randall](https://github.com/veleek) and [Rhuan Barros](https://github.com/rhuanbarros) for their
help.
</p>
</div>
@@ -3,6 +3,39 @@ id: release-notes
title: Release Notes
---
## 0.8.0 - 2023-01-31
- Update dependency: realtime-csharp@5.0.0
- Re: [#21](https://github.com/supabase-community/realtime-csharp/pull/21) Provide API for `presence`, `broadcast` and `postgres_changes`
- [Major, New] `Channel.PostgresChanges` event will receive the wildcard `*` changes event, not `Channel.OnMessage`.
- [Major] `Channel.OnInsert`, `Channel.OnUpdate`, and `Channel.OnDelete` now conform to the server's payload of `Response.Payload.**Data**`
- [Major] `Channel.OnInsert`, `Channel.OnUpdate`, and `Channel.OnDelete` now return `PostgresChangesEventArgs`
- [Minor] Rename `Channel` to `RealtimeChannel`
- Supports better handling of disconnects in `RealtimeSocket` and adds a `Client.OnReconnect` event.
- [Minor] Moves `ChannelOptions` to `Channel.ChannelOptions`
- [Minor] Moves `ChannelStateChangedEventArgs` to `Channel.ChannelStateChangedEventArgs`
- [Minor] Moves `Push` to `Channel.Push`
- [Minor] Moves `Channel.ChannelState` to `Constants.ChannelState`
- [Minor] Moves `SocketResponse`, `SocketRequest`, `SocketResponsePayload`, `SocketResponseEventArgs`, and `SocketStateChangedEventArgs` to `Socket` namespace.
- [New] Adds `RealtimeBroadcast`
- [New] Adds `RealtimePresence`
- [Improvement] Better handling of disconnection/reconnection
- Update dependency: postgrest-csharp@3.1.3
- Another fix for [#61](https://github.com/supabase-community/postgrest-csharp/issues/61) which further typechecks nullable values.
## 0.7.2 - 2023-01-27
- Update dependency: gotrue-csharp@3.0.4
- Makes `Session.CreatedAt` a publicly settable property, which should fix incorrect dates on retrieved `Session`s.
- Update dependency: postgrest-csharp@3.1.2
- Fix [#61](https://github.com/supabase-community/postgrest-csharp/issues/61) which did not correctly parse Linq `Where` when encountering a nullable type.
- Add missing support for transforming for `== null` and `!= null`
## 0.7.1 - 2023-01-17
- Update dependency: postgrest-csharp@3.1.1
- Fix issue from supabase-community/supabase-csharp#48 where boolean model properties would not be evaluated in predicate expressions
## 0.7.0 - 2023-01-16
- Update dependency: postgrest-csharp@3.1.0
+12 -2
View File
@@ -8,7 +8,6 @@ import components from '~/components'
import { highlightSelectedTocItem } from '~/components/CustomHTMLElements/CustomHTMLElements.utils'
import GuidesTableOfContents from '~/components/GuidesTableOfContents'
import useHash from '~/hooks/useHash'
import { getPageType } from '~/lib/helpers'
interface Props {
meta: {
@@ -17,6 +16,8 @@ interface Props {
hide_table_of_contents?: boolean
breadcrumb?: string
subtitle?: string
video?: string
canonical?: string
}
children: any
toc?: any
@@ -67,12 +68,21 @@ const Layout: FC<Props> = (props) => {
<NextSeo
title={`${props.meta?.title} | Supabase Docs`}
description={props.meta?.description ? props.meta?.description : props.meta?.title}
canonical={`https://supabase.com/docs${asPath}`}
canonical={props.meta?.canonical ?? `https://supabase.com/docs${asPath}`}
openGraph={{
title: props.meta?.title,
description: props.meta?.description,
url: `https://supabase.com/docs${asPath}`,
type: 'article',
videos: props.meta?.video && [
{
// youtube based video meta
url: props.meta?.video,
width: 640,
height: 385,
type: 'application/x-shockwave-flash',
},
],
article: {
publishedTime: new Date().toISOString(),
modifiedTime: new Date().toISOString(),
+1 -1
View File
@@ -93,4 +93,4 @@
"tsconfig": "*",
"typescript": "^4.5.3"
}
}
}
+1
View File
@@ -5,6 +5,7 @@ export const meta = {
title: 'Serverless APIs',
description: 'Auto-generating and Realtime APIs.',
sidebar_label: 'Overview',
video: 'https://www.youtube.com/v/rPAJJFdtPw0',
}
Supabase auto-generates three types of API directly from your database schema.
@@ -4,6 +4,7 @@ export const meta = {
id: 'generating-types',
title: 'Generating Types',
description: 'How to generate types for your API and Supabase libraries.',
video: 'https://www.youtube.com/v/7CqlTU9aOR4',
}
Supabase APIs are generated from your database, which means that we can use database introspection to generate type-safe API definitions.
@@ -4,6 +4,7 @@ export const meta = {
id: 'auth-captcha',
title: 'Enable Captcha Protection',
description: 'Add Captcha Protection to your Supabase project',
video: 'https://www.youtube.com/v/em1cpOAXknM',
}
Supabase provides you with the option of adding captcha to your sign-in, sign-up, and password reset forms. This keeps your website safe from bots and malicious scripts. Supabase authentication has support for [hCaptcha](https://www.hcaptcha.com/).
+1
View File
@@ -7,6 +7,7 @@ export const meta = {
title: 'Auth',
description: 'Use Supabase to Authenticate and Authorize your users.',
sidebar_label: 'Overview',
video: 'https://www.youtube.com/v/6ow_jW4epf8',
}
## Overview
@@ -4,6 +4,7 @@ export const meta = {
id: 'auth-twilio',
title: 'Phone Auth with Twilio',
description: 'How to set up and use Mobile OTP with Twilio and Supabase.',
video: 'https://www.youtube.com/v/akScoPO01bc',
}
## Overview
@@ -4,6 +4,7 @@ export const meta = {
id: 'row-level-security',
title: 'Row Level Security',
description: 'Secure your data using Postgres Row Level Security.',
video: 'https://www.youtube.com/v/Ow_Uzedfohk',
}
When you need granular authorization rules, nothing beats PostgreSQL's [Row Level Security (RLS)](https://www.postgresql.org/docs/current/ddl-rowsecurity.html).
@@ -4,6 +4,7 @@ export const meta = {
id: 'local-development',
title: 'Local Development',
description: 'How to use Supabase on your local development machine.',
video: 'https://www.youtube.com/v/vyHyYpvjaks',
}
Learn how to use the Supabase CLI to develop your project locally and deploy to the Supabase Platform.
@@ -4,6 +4,7 @@ export const meta = {
id: 'managing-environments',
title: 'Managing Environments',
description: 'How to deploy Supabase schema changes with a CI / CD pipeline.',
video: 'https://www.youtube.com/v/rOLyOsBR1Uc',
}
## Overview
@@ -4,6 +4,7 @@ export const meta = {
id: 'http',
title: 'http: RESTful Client',
description: 'An HTTP Client for PostgreSQL Functions.',
video: 'https://www.youtube.com/v/rARgrELRCwY',
}
The `http` extension allows you to call RESTful endpoints within Postgres.
@@ -4,6 +4,7 @@ export const meta = {
id: 'full-text-search',
title: 'Full Text Search',
description: 'How to use full text search in PostgreSQL.',
video: 'https://www.youtube.com/v/b-mgca_2Oe4',
}
Postgres has built-in functions to handle `Full Text Search` queries. This is like a "search engine" within Postgres.
@@ -4,6 +4,7 @@ export const meta = {
id: 'functions',
title: 'Database Functions',
description: 'Creating and using Postgres functions.',
video: 'https://www.youtube.com/v/MJZCCpCYEqk',
}
Postgres has built-in support for [SQL functions](https://www.postgresql.org/docs/current/sql-createfunction.html).
@@ -4,6 +4,7 @@ export const meta = {
id: 'tables',
title: 'Tables and Data',
description: 'Creating and using Postgres tables.',
video: 'https://www.youtube.com/v/TKwF3IGij5c',
}
Tables are where you store your data.
@@ -4,6 +4,7 @@ export const meta = {
id: 'webhooks',
title: 'Database Webhooks',
description: 'Trigger external payloads on database events.',
video: 'https://www.youtube.com/v/codAs9-NeHM',
}
Database Webhooks allow you to send real-time data from your database to another system whenever a table event occurs.
+1
View File
@@ -4,6 +4,7 @@ export const meta = {
id: 'examples',
title: 'Examples and Resources',
description: 'Examples you can use to get started with Supabase',
video: 'https://www.youtube.com/v/7uKQBl9uZ00',
}
{/* <!-- This page is outdated and should not be added to the sidebar until it has been reworked --> */}
@@ -4,6 +4,7 @@ export const meta = {
id: 'cicd-workflow',
title: 'CI / CD Workflow',
description: 'How to deploy Supabase Edge Functions with a CI / CD pipeline.',
video: 'https://www.youtube.com/v/6OMVWiiycLs',
}
As described in the Supabase CLI [Environments Guide](/docs/guides/cli/managing-environments), you can use the [`setup-cli` GitHub Action](https://github.com/marketplace/actions/supabase-cli-action) to run Supabase CLI commands in your GitHub Actions, for example to deploy a Supabase Edge Function:
@@ -4,6 +4,7 @@ export const meta = {
id: 'examples-cloudflare-turnstile',
title: 'Cloudflare Turnstile',
description: 'Protecting Forms with Cloudflare Turnstile.',
video: 'https://www.youtube.com/v/OwW0znboh60',
}
<div class="video-container">
@@ -0,0 +1,68 @@
import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
id: 'examples-postgres-on-the-edge',
title: 'Connect to Postgres',
description: 'Connecting to Postgres from Edge Functions.',
}
<div class="video-container">
<iframe
src="https://www.youtube-nocookie.com/embed/cl7EuF1-RsY"
frameBorder="1"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
></iframe>
</div>
Supabase Edge Functions allow you to go beyond HTTP and can connect to your Postgres Database directly!
```ts index.ts
import * as postgres from 'https://deno.land/x/postgres@v0.14.2/mod.ts'
import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
// Get the connection string from the environment variable "DATABASE_URL"
const databaseUrl = Deno.env.get('DATABASE_URL')!
// Create a database pool with three connections that are lazily established
const pool = new postgres.Pool(databaseUrl, 3, true)
serve(async (_req) => {
try {
// Grab a connection from the pool
const connection = await pool.connect()
try {
// Run a query
const result = await connection.queryObject`SELECT * FROM animals`
const animals = result.rows // [{ id: 1, name: "Lion" }, ...]
console.log(animals)
// Encode the result as pretty printed JSON
const body = JSON.stringify(
animals,
(key, value) => (typeof value === 'bigint' ? value.toString() : value),
2
)
// Return the response with the correct content type header
return new Response(body, {
status: 200,
headers: {
'Content-Type': 'application/json; charset=utf-8',
},
})
} finally {
// Release the connection back into the pool
connection.release()
}
} catch (err) {
console.error(err)
return new Response(String(err?.message ?? err), { status: 500 })
}
})
```
export const Page = ({ children }) => <Layout meta={meta} children={children} />
export default Page
@@ -4,6 +4,7 @@ export const meta = {
id: 'examples-github-actions',
title: 'GitHub Actions',
description: 'Deploying Edge Functions with GitHub Actions.',
video: 'https://www.youtube.com/v/l2KlzGrhB6w',
}
<div class="video-container">
@@ -4,6 +4,7 @@ export const meta = {
id: 'examples-og-image',
title: 'Generating OG Images',
description: 'Generate Open Graph images with Deno and Supabase Edge Functions.',
video: 'https://www.youtube.com/v/jZgyOJGWayQ',
}
<div class="video-container">
@@ -4,6 +4,7 @@ export const meta = {
id: 'examples-storage-caching',
title: 'Caching Images with Supabase Storage CDN',
description: 'Integrate Edge Functions with Supabase Storage to cache images on the Edge (CDN).',
video: 'https://www.youtube.com/v/wW6L52v9Ldo',
}
<div class="video-container">
@@ -4,6 +4,7 @@ export const meta = {
id: 'examples-stripe-webhooks',
title: 'Handling Stripe Webhooks',
description: 'Handling signed Stripe Webhooks with Edge Functions.',
video: 'https://www.youtube.com/v/6OMVWiiycLs',
}
<div class="video-container">
@@ -4,6 +4,7 @@ export const meta = {
id: 'examples-telegram-bot',
title: 'Telegram Bot',
description: 'Building a Telegram Bot with Edge Functions.',
video: 'https://www.youtube.com/v/AWfE3a9J_uo',
}
<div class="video-container">
@@ -4,6 +4,7 @@ export const meta = {
id: 'functions-import-maps',
title: 'Import Maps',
description: 'Using Import Maps.',
video: 'https://www.youtube.com/v/ILr3cneZuFk',
}
<div class="video-container">
@@ -5,6 +5,7 @@ export const meta = {
title: 'Edge Functions Quickstart',
description: 'Globally distributed TypeScript Functions.',
sidebar_label: 'Quickstart',
video: 'https://www.youtube.com/v/rzglqRdZUQE',
}
Learn how to build an Edge Function locally and deploy it to the Supabase Platform in less than 7 minutes.
@@ -5,6 +5,7 @@ export const meta = {
title: 'Quickstart: Next.js',
description: 'Learn how to use Supabase in your Next App.',
sidebar_label: 'Next.js',
video: 'https://www.youtube.com/v/0Fs96oZ4se0',
}
<QuickstartIntro />
@@ -24,7 +24,7 @@ Let's start building the Svelte app from scratch.
### Initialize a Svelte app
We can use the [SvelteKit Skeleton Project](https://kit.svelte.dev/docs) to initialize
an app called `supabase-sveltekit` (for this tutorial you do not need TypeScript, ESLint, Prettier, or Playwright):
an app called `supabase-sveltekit` (for this tutorial we will be using TypeScript):
```bash
npm init svelte@next supabase-sveltekit
@@ -4,6 +4,7 @@ export const meta = {
id: 'fezto',
title: 'Frontend Zero to One',
description: 'Create an app automatically from your Supabase Postgres using OpenAPI',
video: 'https://www.youtube.com/v/GOC6a0_AlgI',
}
[Frontend Zero to One is](https://www.fezto.xyz) is a service which creates an app for your Supabase Postgres database on-the-fly without any drag and drop, using the OpenAPI spec provided by PostgREST.
@@ -0,0 +1,147 @@
import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
id: 'flutterflow',
title: 'FlutterFlow',
description:
'FlutterFlow is a low-code tool that allows you to build Flutter apps incredibly fast.',
canonical: 'https://docs.flutterflow.io/actions/actions/backend-database/supabase',
}
[FlutterFlow](https://flutterflow.io/) is a low-code builder for developing native mobile applications using Flutter. You can use the simple drag-and-drop interface to build your app faster than traditional development.
<div className="video-container">
<iframe
src="https://www.youtube-nocookie.com/embed/hw9Q-NjASbU"
frameBorder="1"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
></iframe>
</div>
This guide gives you a quick overview of implementing basic CRUD operations using FlutterFlow and Supabase. You can find the full docs on FlutterFlow and Supabase [here](https://docs.flutterflow.io/actions/actions/backend-database/supabase).
## Step 1: Connect FlutterFlow to Supabase
Before we dive into the code, this guide assumes that you have the following ready:
- [Supabase](https://database.new/) project created
- Have setup tables in your Supabase project
- [FlutterFlow](https://app.flutterflow.io/) project created
You can then connect your Supabase project to your FlutterFlow project with the following steps:
1. In your Supabase project, navigate to Project Settings > API. Copy the Project URL.
2. Return to FlutterFlow, navigate to Settings and Integrations > Integrations > Supabase. Turn on the toggle (i.e., enable Supabase) and paste the API URL.
3. Similarly, from the Supabase API section, copy the anon key (under Project API keys) and paste it inside the FlutterFlow > Settings and Integrations > Integrations > Supabase > Anon Key.
4. Click on the Get Schema button. This will show the list of all tables with their schema (structure) created in Supabase.
5. (Optional) If you have defined an Array for any Column Data Type in Supabase, you must set its type here. To do so, tap the "Click to set Array type" and choose the right one.
<video width="99%" muted playsInline controls={true}>
<source
src="/docs/videos/guides/integrations/flutterflow/connect-flutterflow-to-supabase.mp4"
type="video/mp4"
muted
playsInline
/>
</video>
## Step 2: Inserting rows
Go to your project page on FlutterFlow and follow the steps below to define the Action to any widget.
1. Select the Widget (e.g., Button) on which you want to define the action.
2. Select Actions from the Properties panel (the right menu), and click Open. This will open an Action flow Editor in a new popup window.
1. Click on + Add Action.
2. On the right side, search and select the Supabase > Insert Row action.
3. Set the Table to your table name (e.g., assignments).
4. Under the Set Fields section, click on the + Add Field button.
5. Click on the Field name and scroll down to find the Value Source dropdown and change it to From Variable.
6. Click on UNSET and select Widget State > Name of the TextField.
7. Similarly, add the field for the other UI elements.
<video width="99%" muted playsInline controls={true}>
<source
src="/docs/videos/guides/integrations/flutterflow/insert.mp4"
type="video/mp4"
muted
playsInline
/>
</video>
## Step 3: Selecting and displaying rows
To query a Supabase table on a ListView:
1. Select the ListView widget. Make sure you choose the ListView widget, not the ListTile.
2. Select Backend Query from the properties panel (the right menu), and click Add Backend Query.
3. Set the Query Type to Supabase Query.
4. Select your Table from the dropdown list
5. Set the Query Type to List of Rows.
6. Optional: If you want to display the limited result, say, for example, you have thousands of entries, but you want to display only 100, you can specify the limit.
7. Click Confirm.
<video width="99%" muted playsInline controls={true}>
<source
src="/docs/videos/guides/integrations/flutterflow/select.mp4"
type="video/mp4"
muted
playsInline
/>
</video>
## Step 4: Updating rows
Go to your project page on FlutterFlow and follow the steps below to define the Action to any widget.
1. Select the Widget (e.g., Button) on which you want to define the action.
2. Select Actions from the Properties panel (the right menu), and click Open. This will open an Action flow Editor in a new popup window.
1. Click on + Add Action.
2. On the right side, search and select the Supabase > Update Row action.
3. Set the Table to your table name (e.g., assignments).
4. Optional: If you want to get the rows after the update is finished, enable the Return Matching Rows option.
5. Now, you must set the row you want to update. Usually, this is done by finding a row in a table that matches the current row ID. To do so, click + Add Filter button inside the Matching Rows section.
1. Set the Field Name to the field that contains the IDs. Typically, this is the id column.
2. Set the Relation to Equal To because you want to find a row with the exact id.
3. Into the Value Source, you can select the From Variable and provide the id of the row for which you just updated values in the UI.
6. Under the Set Fields section, click on the + Add Field button.
7. Click on the field name.
8. Scroll down to find the Value Source dropdown and change it to From Variable.
9. Click on UNSET and select Widget State > Name of the TextField.
10. Similarly, add the field for the other UI elements.
## Step 5: Deleting rows
Go to your project page on FlutterFlow and follow the steps below to define the Action to any widget.
1. Select the Widget (e.g., Button) on which you want to define the action.
2. Select Actions from the Properties panel (the right menu), and click Open. This will open an Action flow Editor in a new popup window.
1. Click on + Add Action.
2. On the right side, search and select the Supabase -> Delete Row action.
3. Set the Table to your table name (e.g., assignments).
4. Optional: Later, if you want to know which rows were deleted from a table, enable the Return Matching Rows option.
5. Now, you must set the row you want to delete. Usually, this is done by finding a row in a table that matches the current row ID. To do so, click + Add Filter button inside the Matching Rows section.
1. Set the Field Name to the field that contains the IDs. Typically, this is the id column.
2. Set the Relation to Equal To because you want to find a row with the exact id.
3. Into the Value Source, you can select the From Variable and provide the id of the row you want to delete.
<video width="99%" muted playsInline controls={true}>
<source
src="/docs/videos/guides/integrations/flutterflow/delete.mp4"
type="video/mp4"
muted
playsInline
/>
</video>
## Resources
You can find more detailed guides on FlutterFlow’s docs.
- [FlutterFlow Supabase available actions](https://docs.flutterflow.io/actions/actions/backend-database/supabase)
- [Retrieving Data from Supabase on FlutterFlow](https://docs.flutterflow.io/data-and-backend/supabase/supabase-database/retrieving-data)
- [Adding data to Supabase DB from FlutterFlow](https://docs.flutterflow.io/data-and-backend/supabase/supabase-database/adding-data)
export const Page = ({ children }) => <Layout meta={meta} children={children} />
export default Page
@@ -5,6 +5,7 @@ export const meta = {
title: 'Keyri',
description:
'QR authentication for an easy and flexible biometric solution across all platforms.',
video: 'https://www.youtube.com/v/jrjrcpc2PFQ',
}
Keyri can be used to incorporate sign-in-with-QR functionality into your Supabase app, allowing users to scan a QR code on your web app with your mobile app and be instantly logged into the web app without having to input any credentials.
@@ -5,6 +5,7 @@ export const meta = {
title: 'OneSignal',
description:
'OneSignal allows you to send cloud messages to your users. Combine OneSignal with your Supabase apps and you can reach out to your users whenever there is a change in your database.',
video: 'https://www.youtube.com/v/mw0DLwItue4',
}
[OneSignal](https://onesignal.com/) is a tool that allows you to send messages across different channels such as the following to keep your users engaged.
@@ -4,6 +4,7 @@ export const meta = {
id: 'custom-domains',
title: 'Custom Domains',
description: 'Configuring a Custom Domain for your Supabase project.',
video: 'https://www.youtube.com/v/6rcGnW_Mh-0',
}
<Admonition type="note">
@@ -14,6 +15,15 @@ Custom Domains are currently in beta, and are being slowly made available to pro
Custom domains allow you to present a branded experience to your users. Custom domains are available as a [add-on for projects on a paid tier](https://app.supabase.com/project/_/settings/billing/update). Setting up a custom domain requires [Owner or Admin permissions](/docs/guides/platform/access-control#manage-team-members) for the project. Currently, you must use a subdomain (e.g., `api.example.com`, rather than `example.com`) for the purposes of this guide.
<div className="video-container">
<iframe
src="https://www.youtube-nocookie.com/embed/6rcGnW_Mh-0"
frameBorder="1"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
></iframe>
</div>
## Configure a Custom Domain using the Supabase Dashboard
Follow the **Custom Domains** steps in the [General Settings](https://app.supabase.com/project/_/settings/general) page in the Dashboard to set up a custom domain for your project.
@@ -5,6 +5,7 @@ export const meta = {
title: 'Realtime Quickstart',
description: "Getting started with Realtime's Features",
sidebar_label: 'Quickstart',
video: 'https://www.youtube.com/v/BelYEMJ2N00',
}
Learn how to build [multiplayer.dev](https://multiplayer.dev), a collaborative app that demonstrates Broadcast, Presence, and Postgres Changes using [Realtime](/docs/guides/realtime).
@@ -5,6 +5,7 @@ export const meta = {
title: 'Migrate from Heroku to Supabase',
description: 'Migrate your Heroku Postgres database to Supabase.',
sidebar_label: 'Heroku',
video: 'https://www.youtube.com/v/xsRhPMphtZ4',
}
Supabase is one of the best [free alternatives to Heroku Postgres](https://supabase.com/alternatives/supabase-vs-heroku-postgres). This guide shows how to migrate your Heroku Postgres database to Supabase. This migration requires the [pg_dump](https://www.postgresql.org/docs/current/app-pgdump.html) and [psql](https://www.postgresql.org/docs/current/app-psql.html) CLI tools, which are installed automatically as part of the complete PostgreSQL installation package.
+1
View File
@@ -5,6 +5,7 @@ export const meta = {
title: 'Storage',
description: 'Use Supabase to store and serve files.',
sidebar_label: 'Overview',
video: 'https://www.youtube.com/v/J9mTPY8rIXE',
}
Supabase Storage makes it simple to store and serve large files.
@@ -4,6 +4,7 @@ export const meta = {
id: 'storage-access-control',
title: 'Access Control',
description: 'Manage who can access your Supabase Storage files.',
video: 'https://www.youtube.com/v/4ERX__Y908k',
}
Supabase Storage is integrated with your [Postgres Database](/docs/guides/database).
@@ -5,6 +5,7 @@ export const meta = {
title: 'Storage Image Transformations',
description: 'Transform images with Storage',
sidebar_label: 'Image Transformations',
video: 'https://www.youtube.com/v/dLqSmxX3r7I',
}
Supabase Storage offers the functionality to transform and resize images dynamically. Any image stored in your buckets can be transformed and optimized for fast delivery.
@@ -4,6 +4,7 @@ export const meta = {
id: 'auth-deep-dive-jwts',
title: 'Part One: JWTs',
description: 'Supabase Auth Deep Dive Part 1 - JWTs',
video: 'https://www.youtube.com/v/v3Exg5YpJvE',
}
### About
@@ -4,6 +4,7 @@ export const meta = {
id: 'auth-google-oauth',
title: 'Part Five: Google Oauth',
description: 'Supabase Deep Dive Part 5: Google OAuth Provider',
video: 'https://www.youtube.com/v/_XM9ziOzWk4',
}
### About
@@ -4,6 +4,7 @@ export const meta = {
id: 'auth-policies',
title: 'Part Three: Policies',
description: 'Supabase Auth Deep Dive Part 3: User Based Access Policies',
video: 'https://www.youtube.com/v/0LvCOlELs5U',
}
### About
@@ -4,6 +4,7 @@ export const meta = {
id: 'auth-row-level-security',
title: 'Part Two: Row Level Security',
description: 'Supabase Auth Deep Dive Part Two - Row Level Security',
video: 'https://www.youtube.com/v/qY_iQ10IUhs',
}
### About
Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

@@ -9,6 +9,7 @@ authorURL: https://github.com/kiwicopple
tags:
- supabase
date: '06-01-2020'
video: https://www.youtube.com/v/e4qXmcEFaUs
---
It has been a monster month at [Supabase](/) and we're back with a video update. It's a longer video this month because we have a couple of housekeeping items.
@@ -10,6 +10,7 @@ image: supabase-october-2020.png
tags:
- supabase
date: '11-02-2020'
video: https://www.youtube.com/v/1gNDMMsUPI0
---
We're now 8 months into building Supabase. We're focused on performance, stability, and reliability but that hasn't prevented us from shipping some great features.
@@ -10,6 +10,7 @@ image: supabase-november-2020.png
tags:
- supabase
date: '12-01-2020'
video: https://www.youtube.com/v/unC_de7iytA
---
We've been building for 9 months now, and we're getting even closer to Beta.
@@ -11,6 +11,7 @@ tags:
- case-study
- no-code
date: '12-02-2020'
video: https://www.youtube.com/v/8A6_pg41M2s
---
Omar Kamali is the founder of [Monitoro](https://www.monitoro.xyz/), a service for scraping countless websites 24/7 to notify customers when these websites change. To create this product, Monitoro's team needed to handle massive data throughput whilst ensuring the product was reliable and resilient to satisfy a rapidly growing user base.
@@ -11,6 +11,7 @@ thumb: supabase-december-2020.png
tags:
- supabase
date: '01-02-2021'
video: https://www.youtube.com/v/ofSm4BJkZ1g
---
After 10 hectic months of building, Supabase is now in Beta.
@@ -11,6 +11,7 @@ thumb: supabase-january-2021.png
tags:
- supabase
date: '02-02-2021'
video: https://www.youtube.com/v/DlybOLANG4s
---
New year, new features. We've been busy at Supabase during January and our community has been even busier. Here's a few things you'll find interesting.
@@ -10,6 +10,7 @@ image: /images/blog/release-feb-2021.jpg
tags:
- release-notes
date: '03-02-2021'
video: https://www.youtube.com/v/h-ses99G45g
---
Supabase is an open source Firebase alternative. We've now been building for one year. Here's what we released last month.
@@ -13,6 +13,7 @@ tags:
- node-js
- postgres
date: '03-11-2021'
video: https://www.youtube.com/v/lQ5iIxaYduI
---
[Replit.com](http://replit.com) is an awesome new browser based IDE where you can code alone or collaboratively with friends using their awesome multiplayer features! It's particularly useful for education, and sharing code examples with others.
@@ -10,6 +10,7 @@ thumb: march-2021/release-mar-2021.jpg
tags:
- release-notes
date: '2021-04-06'
video: https://www.youtube.com/v/TtLxxaYE1rA
---
Launch week, Storage, Supabase CLI, Connection Pooling, Supabase UI, and Pricing. Here's what we released last month.
@@ -10,6 +10,7 @@ thumb: april-2021/release-apr-2021.jpg
tags:
- release-notes
date: '2021-05-05'
video: https://www.youtube.com/v/uWJmUTCFdak
---
This month was a "gardening" month for Supabase. The team focused on stability, security, and community support.
@@ -10,6 +10,7 @@ thumb: 2021-may/release-may-2021.jpg
tags:
- release-notes
date: '2021-06-02'
video: https://www.youtube.com/v/qETcl3SUfzU
---
Apple & Twitter Logins, Supabase Grid, Go & Swift Libraries. Lots of great stuff to try out this month.
@@ -11,6 +11,7 @@ tags:
- release-notes
date: '2021-06-02'
toc_depth: 3
video: https://www.youtube.com/v/m3yRPNyYolk
---
Supabase is gearing up for another Launch Week on July the 26th. Until then, here's a few new things to try.
@@ -12,6 +12,7 @@ tags:
- auth
date: '2021-07-28'
toc_depth: 3
video: https://www.youtube.com/v/akScoPO01bc
---
Since launching Supabase Auth [last summer](https://news.ycombinator.com/item?id=24072051) it's proven to be a key part of the Supabase Stack.
@@ -11,6 +11,7 @@ tags:
- release-notes
date: '2021-08-12'
toc_depth: 2
video: https://www.youtube.com/v/Vj5fPA-vjfw
---
July ended with our second "Launch Week", where we shipped something every day for a week. There's a lot to get through this time!
@@ -11,6 +11,7 @@ tags:
- release-notes
date: '2021-09-10'
toc_depth: 3
video: https://www.youtube.com/v/YYpTh2DAvho
---
We've raised $30M and shipped a bunch of features. Let's dive into what's been happening at Supabase during the month of August.
@@ -11,6 +11,7 @@ tags:
- release-notes
date: '2021-10-04'
toc_depth: 3
video: https://www.youtube.com/v/5fsKMTeBKKY
---
Did you know it's been 2 years since the [first commit](https://github.com/supabase/realtime/commit/175f649784147af80acfc9ff5be9d160285c76ea) to Realtime, our real-time engine for Postgres? Before we even existed as a company!
@@ -11,6 +11,7 @@ tags:
- release-notes
date: '2021-11-07'
toc_depth: 3
video: https://www.youtube.com/v/yL5WbAKAKjE
---
We released three new Auth providers, multi-schema support, and we're gearing up for another Launch Week.
@@ -12,6 +12,7 @@ tags:
- community
date: '2021-11-29'
toc_depth: 2
video: https://www.youtube.com/v/6ptUrE4QRPQ
---
Supabase combines existing open-source tools with our own open-source contributions to provide a delightful experience for developers. As part of this goal we hope to build a community of communities, bringing together developers from many different tools, as well as new developers looking to get involved with open source.
@@ -13,6 +13,7 @@ tags:
- security
date: '2021-12-01'
toc_depth: 3
video: https://www.youtube.com/v/zHvatf2wySI
---
Realtime is a server that listens to changes in your PostgreSQL database and broadcasts the changes to clients through a websocket connection.
@@ -12,6 +12,7 @@ tags:
- logging
date: '2021-12-02'
toc_depth: 3
video: https://www.youtube.com/v/MdKWR_Zpu50
---
Back in May 2020, we [tweeted about](https://twitter.com/supabase/status/1265922290237071361?lang=bg) one of the most impressive products we had ever used: Logflare, a log ingestion platform.
@@ -11,6 +11,7 @@ tags:
- release-notes
date: '2022-01-20'
toc_depth: 3
video: https://www.youtube.com/v/I6nnp9AINJk
---
Happy 2022. We're looking forward to a year of shipping product and helping our users build great things!
@@ -11,6 +11,7 @@ tags:
- release-notes
date: '2022-02-22'
toc_depth: 3
video: https://www.youtube.com/v/codAs9-NeHM
---
This month's beta update is more stacked than the Superbowl (\*Supa-bowl) halftime show. Here’s all of the highlights from January...
@@ -11,6 +11,7 @@ tags:
- launch-week
date: '2022-03-25'
toc_depth: 2
video: https://www.youtube.com/v/bpzQCViwLLA
---
By now you probably know the drill. Supabase Launch Week: we launch one thing, or sometimes a couple,
@@ -12,6 +12,7 @@ tags:
- community
date: '2022-03-28'
toc_depth: 3
video: https://www.youtube.com/v/aRgHKofrupU
---
Supabase combines existing open-source tools with our own open-source contributions to provide a delightful experience for all developers. As part of this, we’re building a community of communities, bringing together developers from many different backgrounds, as well as new developers looking to get involved with open source.
@@ -9,6 +9,7 @@ tags:
- functions
date: '2022-03-31'
toc_depth: 3
video: https://www.youtube.com/v/rzglqRdZUQE
---
Today we're launching one of our [most](https://twitter.com/lau_cazanove/status/1506530181946691592) [requested](https://twitter.com/edgarasben/status/1506653203458363393) and [highly-](https://twitter.com/runjep/status/1507462077216088069)[anticipated](https://twitter.com/marcopolotwo/status/1506431782362632195) [features](https://github.com/supabase/supabase/discussions/4269) — Edge Functions. Edge Functions let you execute Typescript code close to your users, no matter where they're located.
@@ -9,6 +9,7 @@ tags:
- realtime
date: '2022-04-01T22:30:00'
toc_depth: 3
video: https://www.youtube.com/v/BelYEMJ2N00
---
Today is the 1st of April, or April Fool's Day, but I like to think of today as Supabase Realtime Day where we announce and demo the next version of Realtime.
@@ -8,6 +8,7 @@ tags:
- release-notes
date: '2022-07-13'
toc_depth: 9
video: https://www.youtube.com/v/VgYPGOr3F-4
---
We've been hard at work making an Auth experience that is as smooth as possible for Supabase developers. One of the challenges has been creating a simple experience for server-side rendering (SSR) environments. We [previously released](https://supabase.com/blog/community-day#server-side-auth-for-nextjs-and-nuxt-sveltekit-and-remix-coming-soon) our Auth Helpers libraries with support for React and NextJS, and today we’re announcing some exciting updates.
@@ -9,6 +9,7 @@ tags:
- hackathon
date: '2022-08-10'
toc_depth: 3
video: https://www.youtube.com/v/rI3Ik7GyYEw
---
# The Supabase Open Source Hackathon
@@ -8,6 +8,7 @@ tags:
- supabase
date: '2022-08-12'
toc_depth: 3
video: https://www.youtube.com/v/4t_63HT3rZY
---
Supabase raised $80M in May, bringing our total funding to $116M. This comes one year after our Series A, and so we're revisiting the plans
@@ -8,6 +8,7 @@ tags:
- launch-week
date: '2022-08-15'
toc_depth: 3
video: https://www.youtube.com/v/OpPOaJI_Z28
---
Today we are moving the Supabase CLI v1 out of beta. The Supabase CLI is capable of managing database migrations and generating TypeScript types. Follow these [install instructions](https://supabase.com/docs/guides/cli) to get started.
@@ -8,6 +8,7 @@ tags:
- launch-week
date: '2022-08-16'
toc_depth: 3
video: https://www.youtube.com/v/iqZlPtl_b-I
---
<div className="bg-gray-300 rounded-lg p-6 italic">
@@ -8,6 +8,7 @@ tags:
- launch-week
date: '2022-08-17'
toc_depth: 3
video: https://www.youtube.com/v/6bGQotxisoY
---
Supabase is now SOC2 Type 1 compliant. Let’s dig into what that means, and explain the process we went through to get there. If you’re building a SaaS product, this blog post should provide a rough guide to getting your SOC2 certification.
@@ -8,6 +8,7 @@ tags:
- launch-week
date: '2022-08-18'
toc_depth: 3
video: https://www.youtube.com/v/CGZr5tybW18
---
During our last Launch Week, we teased our plans for "multiplayer" features. If you need a refresher,
@@ -9,6 +9,7 @@ tags:
- community
date: '2022-08-19'
toc_depth: 2
video: https://www.youtube.com/v/4A6RKPp1b70
---
Supabase combines existing open-source tools with our own open-source contributions to provide a delightful experience for developers of all skill levels. Just as versatile as our platform, we're building a community of communities, bringing together developers from many different backgrounds, as well as new developers looking to get involved with open source.
@@ -10,6 +10,7 @@ tags:
- community
date: '2022-08-24'
toc_depth: 2
video: https://www.youtube.com/v/jmCiI_OSarA
---
Everyone can code up a little hello world example quickly with a platform like [Supabase](https://supabase.com/) - but what about a _real world_ project of bigger scale?
@@ -8,6 +8,7 @@ tags:
- Next.js
date: '2022-11-17'
toc_depth: 3
video: https://www.youtube.com/v/QH0P5xZt5wY
---
The biggest announcement from Next.js Conf 2022 was the [release of Next.js 13](https://nextjs.org/blog/next-13), which introduces a collection of improvements, most exciting of which is Server Components. The combination of Server Components and Suspense allow for a more streamlined, reimagined way to fetch and cache data in Next.js applications. This provides excellent DX improvements — such as async components — and aligns the Next framework even closer with the future of React.
@@ -1,6 +1,7 @@
---
title: 'Who We Hire at Supabase'
description: Traits we look for to maintain a culture of shipping fast and often
video: https://www.youtube.com/v/-BG9XptyCKI
author: ant_wilson
image: who-we-hire.jpg
thumb: who-we-hire-cover.jpg
@@ -8,6 +8,7 @@ tags:
- launch-week
date: '2022-12-12'
toc_depth: 3
video: https://www.youtube.com/v/Q1Amk6iDlF8
youtubeHero: https://www.youtube-nocookie.com/embed/Q1Amk6iDlF8
---
@@ -102,4 +103,3 @@ Docs are more than just the tech behind them. The goal of docs is to give you, t
- [Point in Time Recovery is now available](https://supabase.com/blog/postgres-point-in-time-recovery)
- [Custom Domain Names are now available](https://supabase.com/blog/custom-domain-names)
- [Wrap Up: everything we shipped](https://supabase.com/blog/launch-week-6-wrap-up)
@@ -8,6 +8,7 @@ tags:
- launch-week
date: '2022-12-13'
toc_depth: 3
video: https://www.youtube.com/v/NpEl20iuOtg
youtubeHero: https://www.youtube-nocookie.com/embed/NpEl20iuOtg
---
@@ -11,6 +11,7 @@ tags:
- saml
date: '2022-12-14'
toc_depth: 3
video: https://www.youtube.com/v/He7LI2mv9v0
---
Today, we’re releasing Multi Factor Authentication for everyone.
@@ -8,6 +8,7 @@ tags:
- launch-week
date: '2022-12-15'
toc_depth: 3
video: https://www.youtube.com/v/QA2qC5F-4OU
---
Today we're releasing [Supabase Wrappers](https://github.com/supabase/wrappers), a framework for building Postgres Foreign Data Wrappers (FDW) which connects Postgres to external systems.
@@ -9,6 +9,7 @@ tags:
- community
date: '2022-12-16'
toc_depth: 3
video: https://www.youtube.com/v/hw9Q-NjASbU
---
Supabase is a collaborative company. We work with, sponsor, and support as many open source tools as possible. The great thing about this approach is that each tool brings their own community and it's starting to feel like Supabase is really just a “community of communities”. Far too much has happened in the Supabase community in the last 3 months for us to possibly feature it all here, so here's a collection of the highlights!
@@ -8,6 +8,7 @@ tags:
- launch-week
date: '2022-12-16'
toc_depth: 3
video: https://www.youtube.com/v/hw9Q-NjASbU
---
That's a wrap on Supabase Launch Week Day 6. Here's everything we shipped in one long blog post.
@@ -11,6 +11,7 @@ tags:
- planetpg
date: '2022-12-16'
toc_depth: 3
video: https://www.youtube.com/v/QHLPNDrdN2w
---
During our last Launch Week we [announced](/blog/supabase-vault) Supabase Vault as our “one more thing”. Today we're releasing it progressively across the platform.
Loaded 100 of 139 files, more files were not shown because too many files have changed in this diff. Show more