From 318fee66f77691a174a5ce6fd721b2d2bd7dc1a9 Mon Sep 17 00:00:00 2001 From: Thiago Resende Date: Sun, 25 Dec 2022 16:50:13 -0300 Subject: [PATCH 001/111] Update README.pt-br.md --- i18n/README.pt-br.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/i18n/README.pt-br.md b/i18n/README.pt-br.md index 9d22a6c7282..7101f9d2fb3 100644 --- a/i18n/README.pt-br.md +++ b/i18n/README.pt-br.md @@ -142,7 +142,7 @@ Nossa biblioteca de cliente é modular. Cada sub-biblioteca é uma implementaç - gotrue-java - - - + storage-java - From 1185405146393ad29892a3a669a589b8f8ed473c Mon Sep 17 00:00:00 2001 From: Long Hoang <1732217+loong@users.noreply.github.com> Date: Tue, 27 Dec 2022 17:29:05 +0800 Subject: [PATCH 002/111] Add user survey fields to org creation --- studio/pages/new/index.tsx | 75 ++++++++++++++++++++++++++++++++++++-- 1 file changed, 72 insertions(+), 3 deletions(-) diff --git a/studio/pages/new/index.tsx b/studio/pages/new/index.tsx index 290d515599b..4e66c177e03 100644 --- a/studio/pages/new/index.tsx +++ b/studio/pages/new/index.tsx @@ -1,6 +1,6 @@ import { useState } from 'react' import { observer } from 'mobx-react-lite' -import { Button, Input } from 'ui' +import { Button, Input, Listbox } from 'ui' import { useRouter } from 'next/router' import { API_URL } from 'lib/constants' @@ -10,6 +10,25 @@ import { WizardLayout } from 'components/layouts' import Panel from 'components/ui/Panel' import { NextPageWithLayout } from 'types' +const ORG_KIND_TYPES = { + PERSONAL: 'Personal', + EDUCATIONAL: 'Educational', + STARTUP: 'Startup', + AGENCY: 'Agency', + COMPANY: 'Company', + UNDISCLOSED: 'Don’t know', +} +const ORG_KIND_DEFAULT = 'PERSONAL' + +const ORG_SIZE_TYPES = { + '1': '1 - 10', + '10': '10 - 49', + '50': '50 - 99', + '100': '100 - 299', + '300': 'More than 300', +} +const ORG_SIZE_DEFAULT = '1' + /** * No org selected yet, create a new one */ @@ -18,6 +37,8 @@ const Wizard: NextPageWithLayout = () => { const router = useRouter() const [orgName, setOrgName] = useState('') + const [orgKind, setOrgKind] = useState(ORG_KIND_DEFAULT) + const [orgSize, setOrgSize] = useState(ORG_SIZE_DEFAULT) const [newOrgLoading, setNewOrgLoading] = useState(false) function validateOrgName(name: any) { @@ -29,6 +50,14 @@ const Wizard: NextPageWithLayout = () => { setOrgName(e.target.value) } + function onOrgKindChange(value: any) { + setOrgKind(value) + } + + function onOrgSizeChange(value: any) { + setOrgSize(value) + } + async function onClickSubmit(e: any) { e.preventDefault() const isOrgNameValid = validateOrgName(orgName) @@ -40,6 +69,8 @@ const Wizard: NextPageWithLayout = () => { setNewOrgLoading(true) const response = await post(`${API_URL}/organizations`, { name: orgName, + kind: orgKind, + ...(orgKind == 'COMPANY' ? { size: orgSize } : {}), }) if (response.error) { @@ -78,9 +109,9 @@ const Wizard: NextPageWithLayout = () => { } > -

This is your organization's name within Supabase.

+

This is your organization within Supabase.

- For example, you can use the name of your company or department + For example, you can use the name of your company or department.

@@ -95,6 +126,44 @@ const Wizard: NextPageWithLayout = () => { onChange={onOrgNameChange} /> + + + {Object.entries(ORG_KIND_TYPES).map(([k, v]) => { + return ( + + {v} + + ) + })} + + + {orgKind == 'COMPANY' ? ( + + + {Object.entries(ORG_SIZE_TYPES).map(([k, v]) => { + return ( + + {v} + + ) + })} + + + ) : ( + <> + )} ) } From 45550be4e0784a9aece37e72ed068748c506f3fa Mon Sep 17 00:00:00 2001 From: dannykng Date: Wed, 4 Jan 2023 15:50:54 -0800 Subject: [PATCH 003/111] Delete old mdx files --- apps/docs/pages/getting-started.mdx | 161 ------ apps/docs/pages/guides/tutorials.mdx | 159 ------ apps/docs/pages/new/auth.mdx | 77 --- apps/docs/pages/ref-pages.mdx | 0 apps/docs/pages/tutorials/nextjs.mdx | 724 --------------------------- 5 files changed, 1121 deletions(-) delete mode 100644 apps/docs/pages/getting-started.mdx delete mode 100644 apps/docs/pages/guides/tutorials.mdx delete mode 100644 apps/docs/pages/new/auth.mdx delete mode 100644 apps/docs/pages/ref-pages.mdx delete mode 100644 apps/docs/pages/tutorials/nextjs.mdx diff --git a/apps/docs/pages/getting-started.mdx b/apps/docs/pages/getting-started.mdx deleted file mode 100644 index ccb7790f15e..00000000000 --- a/apps/docs/pages/getting-started.mdx +++ /dev/null @@ -1,161 +0,0 @@ -import Layout from '~/layouts/DefaultGuideLayout' - -export const meta = { - title: 'Overview', - description: 'An overview of Supabase\'s architecture and product principles.', -} - -Supabase is open source. We choose open source tools which are scalable and make them simple to use. - -Supabase is not a 1-to-1 mapping of Firebase. While we are building many of the features that Firebase offers, we are not going about it the same way: -our technological choices are quite different; everything we use is open source; and wherever possible, we use and support existing tools rather than developing from scratch. - -Most notably, we use Postgres rather than a NoSQL store. This choice was deliberate. We believe that no other database offers the functionality required to compete with Firebase, -while maintaining the scalability required to go beyond it. - -## Architecture - -Each Supabase project consists of several tools: - -![Supabase Architecture](/docs/img/supabase-architecture.png) - -### PostgreSQL (Database) - -PostgreSQL is the core of Supabase. We do not abstract the PostgreSQL database — you can access it and use it with full privileges. We simply provide tools which makes PostgreSQL as easy to use as Firebase. - -- Official Docs: [postgresql.org/docs](https://www.postgresql.org/docs/current/index.html) -- Source code: [github.com/postgres/postgres](https://github.com/postgres/postgres) (mirror) -- License: [PostgreSQL Licence](https://www.postgresql.org/about/licence/) -- Language: C - -### Studio (Dashboard) - -An open source Dashboard for managing your database and services. - -- Official Docs: [Supabase docs](/docs) -- Source code: [github.com/supabase/supabase](https://github.com/supabase/supabase/tree/master/studio) -- License: [Apache 2](https://github.com/supabase/supabase/blob/master/LICENSE) -- Language: TypeScript - -### GoTrue (Auth) - -A JWT-based API for managing users and issuing access tokens. This integrates with PostgreSQL's Row Level Security and the API servers. - -- Official Docs: [Supabase Auth reference docs](/docs/reference/auth) -- Source code: [github.com/supabase/gotrue](https://github.com/supabase/gotrue) -- License: [MIT](https://github.com/supabase/gotrue/blob/master/LICENSE) -- Language: Go - -### PostgREST (API) - -A standalone web server that turns your PostgreSQL database directly into a RESTful API. -We use this with our [pg_graphql](https://github.com/supabase/pg_graphql) extension to provide a GraphQL API. - -- Official Docs: [postgrest.org](https://postgrest.org/) -- Source code: [github.com/PostgREST/postgrest](https://github.com/PostgREST/postgrest) -- License: [MIT](https://github.com/PostgREST/postgrest/blob/main/LICENSE) -- Language: Haskel - -### Realtime (API & multiplayer) - -A scalable websocket engine for managing user Presence, broadcasting messages, and streaming database changes. - -- Official Docs: [Supabase Realtime docs](/docs/guides/realtime) -- Source code: [github.com/supabase/realtime](https://github.com/supabase/realtime) -- License: [Apache 2](https://github.com/supabase/realtime/blob/main/LICENSE) -- Language: Elixir - -### Storage API (large file storage) - -An S3-compatible object storage service that stores metadata in Postgres. - -- Official Docs: [Supabase Storage reference docs](/docs/reference/storage) -- Source code: [github.com/supabase/storage-api](https://github.com/supabase/storage-api) -- License: [Apache 2.0](https://github.com/supabase/storage-api/blob/master/LICENSE) -- Language: NodeJS / TypeScript - -### Deno (Edge Functions) - -A modern runtime for JavaScript and TypeScript. - -- Official Docs: [deno.land](https://deno.land/) -- Source code: [github.com/denoland/deno](https://github.com/denoland/deno) -- License: [MIT](https://github.com/denoland/deno/blob/main/LICENSE.md) -- Language: TypeScript / Rust - -### postgres-meta (Database management) - -A RESTful API for managing your Postgres. Fetch tables, add roles, and run queries. - -- Official Docs: [supabase.github.io/postgres-meta](https://supabase.github.io/postgres-meta/) -- Source code: [github.com/supabase/postgres-meta](https://github.com/supabase/postgres-meta) -- License: [Apache 2.0](https://github.com/supabase/postgres-meta/blob/master/LICENSE) -- Language: NodeJS / TypeScript - -### PgBouncer - -A lightweight connection pooler for PostgreSQL. This is useful for connecting to Postgres when using Serverless functions. - -- Official Docs: [pgbouncer.org](http://www.pgbouncer.org/) -- Source code: [pgbouncer/pgbouncer](https://github.com/pgbouncer/pgbouncer) -- License: [ISC](https://github.com/pgbouncer/pgbouncer/blob/master/COPYRIGHT) -- Language: C - -### Kong (API Gateway) - -A cloud-native API gateway, built on top of Nginx. - -- Official Docs: [docs.konghq.com](https://docs.konghq.com/) -- Source code: [github.com/kong/kong](https://github.com/kong/kong) -- License: [Apache 2.0](https://github.com/Kong/kong/blob/master/LICENSE) -- Language: Lua - -## Product Principles - -It is our goal to provide an architecture that any large-scale company would design for themselves, -and then provide tooling around that architecture that is easy-to-use for indie-developers and small teams. - -We use a series of principles to ensure that scalability and usability are never mutually exclusive: - -### Everything works in isolation - -Each system must work as a standalone tool with as few moving parts as possible. -The litmus test for this is: "Can a user run this product with nothing but a Postgres database?" - -### Everything is integrated - -Supabase is composable. Even though every product works in isolation, each product on the platform needs to 10x the other products. -For integration, each tool should expose an API and Webhooks. - -### Everything is extensible - -We're deliberate about adding a new tool, and prefer instead to extend an existing one. -This is the opposite of many cloud providers whose product offering expands into niche use-cases. We provide _primitives_ for developers, which allow them to achieve any goal. -Less, but better. - -### Everything is portable - -To avoid lock-in, we make it easy to migrate in and out. Our cloud offering is compatible with our self-hosted product. -We use existing standards to increase portability (like pg_dump an CSV files). If a new standard emerges which competes with a "Supabase" approach, we will deprecate the approach in favor of the standard. -This forces us compete on experience. We aim to be the best Postgres hosting service. - -### Play the long game - -We sacrifice short-term wins for long-term gains. For example, it is tempting to run a fork of Postgres with additional functionality which only our customers need. -Instead, we prefer to support efforts to upstream missing functionality so that the entire community benefits. This has the additional benefit of ensuring portability and longevity. - -### Build for developers - -"Developers" are a specific profile of user: they are _builders_. -When assessing impact as a function of effort, developers have a large efficiency due to the type of products and systems they can build. -As the profile of a developer changes over time, Supabase will continue to evolve the product to fit this evolving profile. - -### Support existing tools - -Supabase supports existing tools and communities wherever possible. Supabase is more like a "community of communities" - each tool typically has its own community -which we work with. -Open source is something we approach [collaboratively](https://supabase.com/blog/supabase-series-b#giving-back): we employ maintainers, sponsor projects, invest in businesses, and develop our own open source tools. - -export const Page = ({ children }) => - -export default Page diff --git a/apps/docs/pages/guides/tutorials.mdx b/apps/docs/pages/guides/tutorials.mdx deleted file mode 100644 index 39f553feea8..00000000000 --- a/apps/docs/pages/guides/tutorials.mdx +++ /dev/null @@ -1,159 +0,0 @@ -import Layout from '~/layouts/DefaultLayout' -import Link from 'next/link' -import { GlassPanel } from 'ui' - -export const meta = { - title: 'Tutorials', -} - -### Webapps - -
- {webapps.map((item) => { - return ( - - - - {item.description} - - - - ) - })} -
- -### Mobile - -
- {mobile.map((item) => { - return ( - - - - {item.description} - - - - ) - })} -
- -### Low code - -
- {lowCode.map((item) => { - return ( - - - - {item.description} - - - - ) - })} -
- -export const webapps = [ - { - title: 'NextJS', - href: '/guides/tutorials/with-nextjs', - description: - 'Learn how to build a user management app with NextJS and Supabase Database, Auth, and Storage functionality.', - icon: '/docs/img/icons/nextjs-icon', - }, - { - title: 'React', - href: '/guides/tutorials/with-react', - description: - 'Learn how to build a user management app with React and Supabase Database, Auth, and Storage functionality.', - icon: '/docs/img/icons/react-icon', - }, - { - title: 'Vue 3', - href: '/guides/tutorials/with-vue-3', - description: - 'Learn how to build a user management app with Vue 3 and Supabase Database, Auth, and Storage functionality.', - icon: '/docs/img/icons/vuejs-icon', - }, - { - title: 'Nuxt 3', - href: '/guides/tutorials/with-nuxt-3', - description: - 'Learn how to build a user management app with Nuxt 3 and Supabase Database, Auth, and Storage functionality.', - icon: '/docs/img/icons/nuxt-icon', - }, - { - title: 'Anglular', - href: '/guides/tutorials/with-angular', - description: - 'Learn how to build a user management app with Nuxt 3 and Supabase Database, Auth, and Storage functionality.', - icon: '/docs/img/icons/angular-icon', - }, - { - title: 'RedwoodJS', - href: '/guides/tutorials/with-redwoodjs', - description: - 'Learn how to build a user management app with Nuxt 3 and Supabase Database, Auth, and Storage functionality.', - icon: '/docs/img/icons/redwood-icon', - }, - { - title: 'Svelte', - href: '/guides/tutorials/with-svelte', - description: - 'Learn how to build a user management app with Nuxt 3 and Supabase Database, Auth, and Storage functionality.', - icon: '/docs/img/icons/svelte-icon', - }, - { - title: 'SvelteKit', - href: '/guides/tutorials/with-sveltekit', - description: - 'Learn how to build a user management app with Nuxt 3 and Supabase Database, Auth, and Storage functionality.', - icon: '/docs/img/icons/svelte-icon', - }, -] - -export const mobile = [ - { - title: 'Flutter', - href: '/guides/tutorials/with-flutter', - description: - 'Learn how to build a user management app with Flutter and Supabase Database, Auth, and Storage functionality.', - icon: '/docs/img/icons/flutter-icon', - }, - { - title: 'Expo', - href: '/guides/tutorials/with-expo', - description: - 'Learn how to build a user management app with React and Supabase Database, Auth, and Storage functionality.', - icon: '/docs/img/icons/expo-icon', - }, -] - -export const lowCode = [ - { - title: 'Ionic React', - href: '/guides/tutorials/with-ionic-react', - description: - 'Learn how to build a user management app with React and Supabase Database, Auth, and Storage functionality.', - icon: '/docs/img/icons/ionic-icon', - }, - { - title: 'Ionic Vue', - href: '/guides/tutorials/with-ionic-vue', - description: - 'Learn how to build a user management app with Flutter and Supabase Database, Auth, and Storage functionality.', - icon: '/docs/img/icons/ionic-icon', - }, - { - title: 'Ionic Angular', - href: '/guides/tutorials/with-ionic-angular', - description: - 'Learn how to build a user management app with NextJS and Supabase Database, Auth, and Storage functionality.', - icon: '/docs/img/icons/ionic-icon', - }, -] - -export const Page = ({ children }) => - -export default Page diff --git a/apps/docs/pages/new/auth.mdx b/apps/docs/pages/new/auth.mdx deleted file mode 100644 index 5228f5129da..00000000000 --- a/apps/docs/pages/new/auth.mdx +++ /dev/null @@ -1,77 +0,0 @@ -import Layout from '~/layouts/DefaultLayout' -import Link from 'next/link' -// import { useTheme } from 'common/Providers' -import { GlassPanel } from 'ui' - -{/* // export const { isDarkMode } = useTheme() */} - -export const meta = { - title: 'Auth', -} - -## Add and manage email and password, passwordless, OAuth, and mobile logins to your project through a suite of identity providers and APIs. - -### Popular Guides - -
- {topArticles.map((item) => { - return ( - - - - {item.description} - - - - )})} - -
- -export const topArticles = [ - { - title: 'Enable Captcha Protection', - header: '/docs/img/cards/sample-card-header-4.svg', - href: '/guides/auth/auth-captcha', - description: 'Keep your platform safe from bots and malicious scripts by implementing hCaptcha.', - span: 'col-span-6', - }, - { - title: 'Auth Helpers', - header: '/docs/img/cards/sample-card-header-4.svg', - href: '/guides/auth/auth-helpers', - description: 'A collection of framework-specific utilities for implementing Supabase Auth.', - span: 'col-span-6', - }, - { - title: 'Email Login', - header: '/docs/img/cards/sample-card-header-4.svg', - href: '/guides/auth/auth-email', - description: 'Learn how to add an email and password login flow to your platform.', - }, - { - title: 'Phone Login', - header: '/docs/img/cards/sample-card-header-4.svg', - href: '/guides/auth/phone-login', - description: 'Learn how to add a login flow so your users can access your platform through one-time passwords via SMS.', - }, - { - title: 'Social Login', - header: '/docs/img/cards/sample-card-header-4.svg', - href: '/guides/auth/social-login', - description: 'Learn how to add a login flow so your users can access your platform through social providers like Apple, Facebook, or Google.', - }, -] - -export const Page = ({ children }) => - -export default Page diff --git a/apps/docs/pages/ref-pages.mdx b/apps/docs/pages/ref-pages.mdx deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/apps/docs/pages/tutorials/nextjs.mdx b/apps/docs/pages/tutorials/nextjs.mdx deleted file mode 100644 index 5e22b391296..00000000000 --- a/apps/docs/pages/tutorials/nextjs.mdx +++ /dev/null @@ -1,724 +0,0 @@ -import Layout from '~/layouts/tutorials/TutorialLayout' - -export const meta = { - title: 'Creating a user management dashboard with NextJS and Supabase', - author: 'Rich Haines', - video: 'https://www.youtube-nocookie.com/embed/0Fs96oZ4se0', -} - -In this 25-minute guide, we’ll be building a collaborative user managment app using NextJS and Supabase. -As users add and move rectangles in a canvas, changes will be automatically synced and persisted, allowing for a canvas that updates in real-time across clients. -Users will also be able to see other users selections, and undo and redo actions. - -![Supabase User Management example](/docs/img/user-management-demo.png) - -### GitHub - -Should you get stuck while working through the guide, refer to [this repo](https://github.com/supabase/supabase/tree/master/examples/user-management/nextjs-ts-user-management). - -## Building the App - -Let's start building the Next.js app from scratch. - -### Initialize a Next.js app - -We can use [`create-next-app`](https://nextjs.org/docs/getting-started) to initialize -an app called `supabase-nextjs`: - - - - -```bash -npx create-next-app@latest --use-npm supabase-nextjs -cd supabase-nextjs -``` - - - - -```bash -npx create-next-app@latest --ts --use-npm supabase-nextjs -cd supabase-nextjs -``` - - - - -Then install the Supabase client library: [supabase-js](https://github.com/supabase/supabase-js) - -```bash -npm install @supabase/supabase-js -``` - -And finally we want to save the environment variables in a `.env.local`. -All we need are the API URL and the `anon` key that you copied [earlier](#get-the-api-keys). - -```bash title=.env.local -NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL -NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY -``` - -And one optional step is to update the CSS file `styles/globals.css` to make the app look nice. -You can find the full contents of this file [here](https://raw.githubusercontent.com/supabase/supabase/master/examples/user-management/nextjs-ts-user-management/styles/globals.css). - -### Set up a Login component - -#### Supabase Auth Helpers - -Next.js is a highly versatile framework offering pre-rendering at build time (SSG), server-side rendering at request time (SSR), API routes, and middleware edge-functions. - -It can be challenging to authenticate your users in all these different environments, that's why we've created the [Supabase Auth Helpers](https://supabase.com/docs/guides/auth/auth-helpers/nextjs) to make user management and data fetching within Next.js as easy as possible. - -Install the auth helpers for React and Next.js - -```bash -npm install @supabase/auth-helpers-react @supabase/auth-helpers-nextjs -``` - - - - -Wrap your `pages/_app.js` component with the `SessionContextProvider` component: - -```jsx title=pages/_app.js -import '../styles/globals.css' -import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs' -import { SessionContextProvider } from '@supabase/auth-helpers-react' - -function MyApp({ Component, pageProps }) { - const [supabaseClient] = useState(() => createBrowserSupabaseClient()) - - return ( - - - - ) -} -export default MyApp -``` - - - - -Wrap your `pages/_app.tsx` component with the `SessionContextProvider` component: - -```jsx lines=2,8 title=pages/_app.tsx -import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs' -import { SessionContextProvider, Session } from '@supabase/auth-helpers-react' - -function MyApp({ - Component, - pageProps, -}: AppProps<{ - initialSession: Session, -}>) { - const [supabaseClient] = useState(() => createBrowserSupabaseClient()) - - return ( - - - - ) -} -export default MyApp -``` - -See the [Auth Helpers docs](/docs/guides/auth/auth-helpers/nextjs#usage-with-typescript) for more details on usage with TypeScript. - - - - -#### Supabase Auth UI - -We can use the [Supabase Auth UI](https://supabase.com/docs/guides/auth/auth-helpers/auth-ui) a pre-built React component for authenticating users via OAuth, email, and magic links. - -Install the Supabase Auth UI for React - -```bash -npm install @supabase/auth-ui-react -``` - -Add the `Auth` component to your home page - -```jsx title=pages/index.js -import { Auth, ThemeSupa } from '@supabase/auth-ui-react' -import { useSession, useSupabaseClient } from '@supabase/auth-helpers-react' - -const Home = () => { - const session = useSession() - const supabase = useSupabaseClient() - - return ( -
- {!session ? ( - - ) : ( -

Account page will go here.

- )} -
- ) -} - -export default Home -``` - -### Account page - -After a user is signed in we can allow them to edit their profile details and manage their account. - - - - -Let's create a new component for that called `Account.js` within a `components` folder. - -```tsx title=components/Account.js -import { useState, useEffect } from 'react' -import { useUser, useSupabaseClient } from '@supabase/auth-helpers-react' - -export default function Account({ session }) { - const supabase = useSupabaseClient() - const user = useUser() - const [loading, setLoading] = useState(true) - const [username, setUsername] = useState(null) - const [website, setWebsite] = useState(null) - const [avatar_url, setAvatarUrl] = useState(null) - - useEffect(() => { - getProfile() - }, [session]) - - async function getProfile() { - try { - setLoading(true) - - let { data, error, status } = await supabase - .from('profiles') - .select(`username, website, avatar_url`) - .eq('id', user.id) - .single() - - if (error && status !== 406) { - throw error - } - - if (data) { - setUsername(data.username) - setWebsite(data.website) - setAvatarUrl(data.avatar_url) - } - } catch (error) { - alert('Error loading user data!') - console.log(error) - } finally { - setLoading(false) - } - } - - async function updateProfile({ username, website, avatar_url }) { - try { - setLoading(true) - - const updates = { - id: user.id, - username, - website, - avatar_url, - updated_at: new Date().toISOString(), - } - - let { error } = await supabase.from('profiles').upsert(updates) - if (error) throw error - alert('Profile updated!') - } catch (error) { - alert('Error updating the data!') - console.log(error) - } finally { - setLoading(false) - } - } - - return ( -
-
- - -
-
- - setUsername(e.target.value)} - /> -
-
- - setWebsite(e.target.value)} - /> -
- -
- -
- -
- -
-
- ) -} -``` - -
- - -Let's create a new component for that called `Account.tsx` within a `components` folder. - -```tsx title=components/Account.tsx -import { useState, useEffect } from 'react' -import { useUser, useSupabaseClient, Session } from '@supabase/auth-helpers-react' -import { Database } from '../utils/database.types' -type Profiles = Database['public']['Tables']['profiles']['Row'] - -export default function Account({ session }: { session: Session }) { - const supabase = useSupabaseClient() - const user = useUser() - const [loading, setLoading] = useState(true) - const [username, setUsername] = useState(null) - const [website, setWebsite] = useState(null) - const [avatar_url, setAvatarUrl] = useState(null) - - useEffect(() => { - getProfile() - }, [session]) - - async function getProfile() { - try { - setLoading(true) - if (!user) throw new Error('No user') - - let { data, error, status } = await supabase - .from('profiles') - .select(`username, website, avatar_url`) - .eq('id', user.id) - .single() - - if (error && status !== 406) { - throw error - } - - if (data) { - setUsername(data.username) - setWebsite(data.website) - setAvatarUrl(data.avatar_url) - } - } catch (error) { - alert('Error loading user data!') - console.log(error) - } finally { - setLoading(false) - } - } - - async function updateProfile({ - username, - website, - avatar_url, - }: { - username: Profiles['username'] - website: Profiles['website'] - avatar_url: Profiles['avatar_url'] - }) { - try { - setLoading(true) - if (!user) throw new Error('No user') - - const updates = { - id: user.id, - username, - website, - avatar_url, - updated_at: new Date().toISOString(), - } - - let { error } = await supabase.from('profiles').upsert(updates) - if (error) throw error - alert('Profile updated!') - } catch (error) { - alert('Error updating the data!') - console.log(error) - } finally { - setLoading(false) - } - } - - return ( -
-
- - -
-
- - setUsername(e.target.value)} - /> -
-
- - setWebsite(e.target.value)} - /> -
- -
- -
- -
- -
-
- ) -} -``` - -
-
- -### Launch! - -Now that we have all the components in place, let's update `pages/index.js`: - -```jsx lines=3,14 title=pages/index.js -import { Auth, ThemeSupa } from '@supabase/auth-ui-react' -import { useSession, useSupabaseClient } from '@supabase/auth-helpers-react' -import Account from '../components/Account' - -const Home = () => { - const session = useSession() - const supabase = useSupabaseClient() - - return ( -
- {!session ? ( - - ) : ( - - )} -
- ) -} - -export default Home -``` - -Once that's done, run this in a terminal window: - -```bash -npm run dev -``` - -And then open the browser to [localhost:3000](http://localhost:3000) and you should see the completed app. - -## Bonus: Profile photos - -Every Supabase project is configured with [Storage](/docs/guides/storage) for managing large files like -photos and videos. - -### Create an upload widget - -Let's create an avatar widget for the user so that they can upload a profile photo. We can start by creating a new component: - - - - -```jsx title=components/Avatar.js -import React, { useEffect, useState } from 'react' -import { useSupabaseClient } from '@supabase/auth-helpers-react' - -export default function Avatar({ uid, url, size, onUpload }) { - const supabase = useSupabaseClient() - const [avatarUrl, setAvatarUrl] = useState(null) - const [uploading, setUploading] = useState(false) - - useEffect(() => { - if (url) downloadImage(url) - }, [url]) - - async function downloadImage(path) { - try { - const { data, error } = await supabase.storage.from('avatars').download(path) - if (error) { - throw error - } - const url = URL.createObjectURL(data) - setAvatarUrl(url) - } catch (error) { - console.log('Error downloading image: ', error) - } - } - - const uploadAvatar = async (event) => { - try { - setUploading(true) - - if (!event.target.files || event.target.files.length === 0) { - throw new Error('You must select an image to upload.') - } - - const file = event.target.files[0] - const fileExt = file.name.split('.').pop() - const fileName = `${uid}.${fileExt}` - const filePath = `${fileName}` - - let { error: uploadError } = await supabase.storage - .from('avatars') - .upload(filePath, file, { upsert: true }) - - if (uploadError) { - throw uploadError - } - - onUpload(filePath) - } catch (error) { - alert('Error uploading avatar!') - console.log(error) - } finally { - setUploading(false) - } - } - - return ( -
- {avatarUrl ? ( - Avatar - ) : ( -
- )} -
- - -
-
- ) -} -``` - - - - -```tsx title=components/Avatar.tsx -import React, { useEffect, useState } from 'react' -import { useSupabaseClient } from '@supabase/auth-helpers-react' -import { Database } from '../utils/database.types' -type Profiles = Database['public']['Tables']['profiles']['Row'] - -export default function Avatar({ - uid, - url, - size, - onUpload, -}: { - uid: string - url: Profiles['avatar_url'] - size: number - onUpload: (url: string) => void -}) { - const supabase = useSupabaseClient() - const [avatarUrl, setAvatarUrl] = useState(null) - const [uploading, setUploading] = useState(false) - - useEffect(() => { - if (url) downloadImage(url) - }, [url]) - - async function downloadImage(path: string) { - try { - const { data, error } = await supabase.storage.from('avatars').download(path) - if (error) { - throw error - } - const url = URL.createObjectURL(data) - setAvatarUrl(url) - } catch (error) { - console.log('Error downloading image: ', error) - } - } - - const uploadAvatar: React.ChangeEventHandler = async (event) => { - try { - setUploading(true) - - if (!event.target.files || event.target.files.length === 0) { - throw new Error('You must select an image to upload.') - } - - const file = event.target.files[0] - const fileExt = file.name.split('.').pop() - const fileName = `${uid}.${fileExt}` - const filePath = `${fileName}` - - let { error: uploadError } = await supabase.storage - .from('avatars') - .upload(filePath, file, { upsert: true }) - - if (uploadError) { - throw uploadError - } - - onUpload(filePath) - } catch (error) { - alert('Error uploading avatar!') - console.log(error) - } finally { - setUploading(false) - } - } - - return ( -
- {avatarUrl ? ( - Avatar - ) : ( -
- )} -
- - -
-
- ) -} -``` - - - - -### Add the new widget - -And then we can add the widget to the Account page: - -```jsx title=components/Account.js -// Import the new component -import Avatar from './Avatar' - -// ... - -return ( -
- {/* Add to the body */} - { - setAvatarUrl(url) - updateProfile({ username, website, avatar_url: url }) - }} - /> - {/* ... */} -
-) -``` - -## Next steps - -At this stage you have a fully functional application! - -- See the complete [example on GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/nextjs-ts-user-management) and deploy it to Vercel. -- Explore the [pre-built Auth UI for React](https://supabase.com/docs/guides/auth/auth-helpers/auth-ui). -- Explore the [Auth Helpers for Next.js](https://supabase.com/docs/guides/auth/auth-helpers/nextjs). -- Explore the [Supabase Cache Helpers](https://github.com/psteinroe/supabase-cache-helpers). -- See the [Next.js Subscription Payments Starter](https://github.com/vercel/nextjs-subscription-payments) template on GitHub. -- Got a question? [Ask here](https://github.com/supabase/supabase/discussions). -- Sign in: [app.supabase.com](https://app.supabase.com) - -export default ({ children }) => From 6af3acdc046e6b616a7c745461cabd9bae7ddb37 Mon Sep 17 00:00:00 2001 From: dannykng Date: Wed, 4 Jan 2023 16:09:51 -0800 Subject: [PATCH 004/111] Update sitemap --- apps/docs/public/sitemap.xml | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/apps/docs/public/sitemap.xml b/apps/docs/public/sitemap.xml index 38b0e06220a..9cc0078e8dd 100644 --- a/apps/docs/public/sitemap.xml +++ b/apps/docs/public/sitemap.xml @@ -6,12 +6,6 @@ 0.5 - - https://supabase.com/docs/getting-started - weekly - 0.5 - - https://supabase.com/docs/index weekly @@ -84,12 +78,6 @@ 0.5 - - https://supabase.com/docs/guides/tutorials - weekly - 0.5 - - https://supabase.com/docs/handbook/contributing weekly From fcfc1886d0c1a5a7f260039fdd15fed3279c8a98 Mon Sep 17 00:00:00 2001 From: Ollie Halliday <22655069+Hallidayo@users.noreply.github.com> Date: Mon, 9 Jan 2023 14:51:15 +0000 Subject: [PATCH 005/111] added link for docs --- .../Auth/EmailTemplates/EmailTemplates.tsx | 20 ++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx b/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx index 0e86b1247a5..a982880a845 100644 --- a/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx +++ b/studio/components/interfaces/Auth/EmailTemplates/EmailTemplates.tsx @@ -1,4 +1,4 @@ -import { Tabs } from 'ui' +import { Button, IconExternalLink, Tabs } from 'ui' import { observer } from 'mobx-react-lite' import { TEMPLATES_SCHEMAS } from 'stores/authConfig/schema' @@ -8,10 +8,20 @@ import TemplateEditor from './TemplateEditor' const EmailTemplates = observer(() => { return (
- + Date: Tue, 10 Jan 2023 15:16:19 +0000 Subject: [PATCH 006/111] changed verifyOtp code snippet --- studio/components/to-be-cleaned/Docs/Snippets.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/studio/components/to-be-cleaned/Docs/Snippets.js b/studio/components/to-be-cleaned/Docs/Snippets.js index 955409e15bb..3345f1e2759 100644 --- a/studio/components/to-be-cleaned/Docs/Snippets.js +++ b/studio/components/to-be-cleaned/Docs/Snippets.js @@ -604,9 +604,10 @@ curl -X POST '${endpoint}/auth/v1/verify' \\ js: { language: 'js', code: ` -let { data, error } = await supabase.auth.verifyOTP({ +let { data, error } = await supabase.auth.verifyOtp({ phone: '+13334445555', - token: '123456' + token: '123456', + type: 'sms' }) `, }, From 74d71c96093722b64ff989891771105aa75417f6 Mon Sep 17 00:00:00 2001 From: Ollie Halliday <22655069+Hallidayo@users.noreply.github.com> Date: Tue, 10 Jan 2023 15:17:45 +0000 Subject: [PATCH 007/111] added third party title --- studio/components/to-be-cleaned/Docs/Snippets.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/studio/components/to-be-cleaned/Docs/Snippets.js b/studio/components/to-be-cleaned/Docs/Snippets.js index 3345f1e2759..c4ed7a96a6e 100644 --- a/studio/components/to-be-cleaned/Docs/Snippets.js +++ b/studio/components/to-be-cleaned/Docs/Snippets.js @@ -634,7 +634,7 @@ let { data, error } = await supabase.auth.api.inviteUserByEmail('someone@email.c }, }), authThirdPartyLogin: (endpoint, apiKey) => ({ - title: '', + title: 'Third Party Login', bash: { language: 'bash', code: ``, From ffb42ba1b1d39f3dec68072875de28de689497de Mon Sep 17 00:00:00 2001 From: dannykng Date: Tue, 10 Jan 2023 15:20:26 -0800 Subject: [PATCH 008/111] Revert "Update sitemap" This reverts commit 6af3acdc046e6b616a7c745461cabd9bae7ddb37. --- apps/docs/public/sitemap.xml | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/apps/docs/public/sitemap.xml b/apps/docs/public/sitemap.xml index 9cc0078e8dd..38b0e06220a 100644 --- a/apps/docs/public/sitemap.xml +++ b/apps/docs/public/sitemap.xml @@ -6,6 +6,12 @@ 0.5 + + https://supabase.com/docs/getting-started + weekly + 0.5 + + https://supabase.com/docs/index weekly @@ -78,6 +84,12 @@ 0.5 + + https://supabase.com/docs/guides/tutorials + weekly + 0.5 + + https://supabase.com/docs/handbook/contributing weekly From 8cc5f19d9e948a6b8747880faaa00dd45eb1895f Mon Sep 17 00:00:00 2001 From: Ollie Halliday <22655069+Hallidayo@users.noreply.github.com> Date: Thu, 19 Jan 2023 16:18:01 +0000 Subject: [PATCH 009/111] changed to use Select instead of ListBox --- .../grid/components/editor/SelectEditor.tsx | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/studio/components/grid/components/editor/SelectEditor.tsx b/studio/components/grid/components/editor/SelectEditor.tsx index f980583fad0..206417e5901 100644 --- a/studio/components/grid/components/editor/SelectEditor.tsx +++ b/studio/components/grid/components/editor/SelectEditor.tsx @@ -1,4 +1,4 @@ -import { Listbox } from '@supabase/ui' +import { Select } from '@supabase/ui' import { EditorProps } from '@supabase/react-data-grid' import { useTrackedState } from 'components/grid/store' @@ -19,11 +19,11 @@ export function SelectEditor({ const value = row[column.key as keyof TRow] as unknown as string - function onChange(value: string) { + function onChange(value: any) { if (!value || value == '') { onRowChange({ ...row, [column.key]: null }, true) } else { - onRowChange({ ...row, [column.key]: value }, true) + onRowChange({ ...row, [column.key]: value.target.value }, true) } } @@ -32,7 +32,7 @@ export function SelectEditor({ } return ( - ({ onChange={onChange} onBlur={onBlur} > - - NULL - + NULL {options.map(({ label, value }) => ( - + {label} - + ))} - + ) } From 9a841d223600e4fdb315de42e4587a3ed2d29dc6 Mon Sep 17 00:00:00 2001 From: Long Hoang <1732217+loong@users.noreply.github.com> Date: Fri, 20 Jan 2023 14:02:29 +0800 Subject: [PATCH 010/111] Change don't know option to N/A --- studio/pages/new/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/studio/pages/new/index.tsx b/studio/pages/new/index.tsx index 4e66c177e03..201c9d7a8d0 100644 --- a/studio/pages/new/index.tsx +++ b/studio/pages/new/index.tsx @@ -16,7 +16,7 @@ const ORG_KIND_TYPES = { STARTUP: 'Startup', AGENCY: 'Agency', COMPANY: 'Company', - UNDISCLOSED: 'Don’t know', + UNDISCLOSED: 'N/A', } const ORG_KIND_DEFAULT = 'PERSONAL' From 3804487d791faebc03a0e12505abc0fd086c6456 Mon Sep 17 00:00:00 2001 From: dshukertjr <18113850+dshukertjr@users.noreply.github.com> Date: Fri, 20 Jan 2023 15:15:50 +0900 Subject: [PATCH 011/111] Adds OneSignal video on the OneSignal guide --- apps/docs/pages/guides/integrations/onesignal.mdx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/apps/docs/pages/guides/integrations/onesignal.mdx b/apps/docs/pages/guides/integrations/onesignal.mdx index cd6b7021dd8..446242bd07c 100644 --- a/apps/docs/pages/guides/integrations/onesignal.mdx +++ b/apps/docs/pages/guides/integrations/onesignal.mdx @@ -14,7 +14,18 @@ export const meta = { - Emails - In-app notifications -This guide steps you through how you can integrate OneSignal with Supabase to create a seamless cloud messaging experience for your users using Database webhooks and edge functions through a simple Next.js application. +Here is William giving us the overview of how OneSignal can work with Supabase to send notifications to your users. + +
+ +
+ +In this guide, we will build a similar app and steps you through how you can integrate OneSignal with Supabase to create a seamless cloud messaging experience for your users using Database webhooks and edge functions through a simple Next.js application. ![Entity Diagram](/docs/img/guides/integrations/onesignal/diagram.png) From 30dd26e816f0db8a9fead7501a461d331f217c76 Mon Sep 17 00:00:00 2001 From: Ollie Halliday <22655069+Hallidayo@users.noreply.github.com> Date: Fri, 20 Jan 2023 12:07:57 +0000 Subject: [PATCH 012/111] changed to ui package and added selected param --- studio/components/grid/components/editor/SelectEditor.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/studio/components/grid/components/editor/SelectEditor.tsx b/studio/components/grid/components/editor/SelectEditor.tsx index 206417e5901..6a0410470d2 100644 --- a/studio/components/grid/components/editor/SelectEditor.tsx +++ b/studio/components/grid/components/editor/SelectEditor.tsx @@ -1,10 +1,10 @@ -import { Select } from '@supabase/ui' +import { Select } from 'ui' import { EditorProps } from '@supabase/react-data-grid' import { useTrackedState } from 'components/grid/store' interface SelectEditorProps extends EditorProps { - options: { label: string; value: string }[] + options: { label: string; _value: string }[] } export function SelectEditor({ @@ -45,8 +45,8 @@ export function SelectEditor({ onBlur={onBlur} > NULL - {options.map(({ label, value }) => ( - + {options.map(({ label, _value }) => ( + {label} ))} From e667593f63270b291986419d5f6f484e43e102bf Mon Sep 17 00:00:00 2001 From: Simon Basset Date: Fri, 20 Jan 2023 20:58:55 +0100 Subject: [PATCH 013/111] docs(storage): use 'to' field instead of 'auth.role()' in storage access control docs --- apps/docs/pages/guides/storage/access-control.mdx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/apps/docs/pages/guides/storage/access-control.mdx b/apps/docs/pages/guides/storage/access-control.mdx index 58572bd789e..4adfd73e135 100644 --- a/apps/docs/pages/guides/storage/access-control.mdx +++ b/apps/docs/pages/guides/storage/access-control.mdx @@ -117,10 +117,8 @@ using ( bucket_id = 'public' ); -- 1. Allow logged-in access to any files in the "restricted" bucket create policy "Restricted Access" on storage.objects for select -using ( - bucket_id = 'restricted' - and auth.role() = 'authenticated' -); +to authenticated +using ( bucket_id = 'restricted' ); ``` ### Allow individual access to a file From 9f8e589fc3ef38c5ffe84eb69f4cb6f31a4c5712 Mon Sep 17 00:00:00 2001 From: Ruggero Tomaselli Date: Wed, 18 Jan 2023 17:58:31 +0100 Subject: [PATCH 014/111] Add .git to .dockerignore --- .dockerignore | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.dockerignore b/.dockerignore index b5924c32836..154054709d9 100644 --- a/.dockerignore +++ b/.dockerignore @@ -4,4 +4,5 @@ node_modules/ .env.local .env.production .env.dev -.env.* \ No newline at end of file +.env.* +.git From 8925692857533d6f0ceefbf893936eba6a820b3c Mon Sep 17 00:00:00 2001 From: Ruggero Tomaselli Date: Wed, 18 Jan 2023 17:58:45 +0100 Subject: [PATCH 015/111] Add / to COPY instruction --- studio/Dockerfile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/studio/Dockerfile b/studio/Dockerfile index 9ff4a0ca6fc..a55ed33b9ea 100644 --- a/studio/Dockerfile +++ b/studio/Dockerfile @@ -14,7 +14,7 @@ RUN apt-get update && apt-get install -y --no-install-recommends \ FROM base as builder WORKDIR /usr/src/app -COPY package*.json . +COPY package*.json ./ COPY turbo.json . COPY packages packages COPY studio studio From 66c7239db2c66b60fd9df15222fda635c19f93e7 Mon Sep 17 00:00:00 2001 From: Wen Bo Xie <5532241+w3b6x9@users.noreply.github.com> Date: Fri, 20 Jan 2023 18:02:28 -0800 Subject: [PATCH 016/111] docs: add Broadcast and Presence examples to Realtime v2 ref docs (#11575) * feat: display TS definition signature at specific index * Revert "feat: display TS definition signature at specific index" This reverts commit 9ff500a9c4653ba1cc3a1693c2174afaa9e68569. * docs: add Broadcast and Presence examples to Realtime v2 ref docs --- spec/common-client-libs-sections.json | 2 +- spec/examples/examples.yml | 22 +++--- spec/supabase_dart_v0.yml | 26 +++---- spec/supabase_dart_v1.yml | 26 +++---- spec/supabase_js_v1.yml | 22 +++--- spec/supabase_js_v2.yml | 105 +++++++++++++++++++++----- 6 files changed, 136 insertions(+), 67 deletions(-) diff --git a/spec/common-client-libs-sections.json b/spec/common-client-libs-sections.json index 732d85b169b..517dad7a6fa 100644 --- a/spec/common-client-libs-sections.json +++ b/spec/common-client-libs-sections.json @@ -677,7 +677,7 @@ }, { "id": "subscribe", - "title": "Subscribe to database changes", + "title": "Subscribe to channel", "slug": "subscribe", "product": "realtime", "type": "function" diff --git a/spec/examples/examples.yml b/spec/examples/examples.yml index f1be15db868..c3689d3a111 100644 --- a/spec/examples/examples.yml +++ b/spec/examples/examples.yml @@ -5010,8 +5010,8 @@ functions: }) .subscribe() ``` - - id: listening-to-a-specific-table - name: Listening to a specific table + - id: listen-to-a-specific-table + name: Listen to a specific table js: | ```js supabase @@ -5021,8 +5021,8 @@ functions: }) .subscribe() ``` - - id: listening-to-inserts - name: Listening to inserts + - id: listen-to-inserts + name: Listen to inserts js: | ```js supabase @@ -5032,8 +5032,8 @@ functions: }) .subscribe() ``` - - id: listening-to-updates - name: Listening to updates + - id: listen-to-updates + name: Listen to updates description: | By default, Supabase will send only the updated record. If you want to receive the previous values as well you can enable full replication for the table you are listening to: @@ -5050,8 +5050,8 @@ functions: }) .subscribe() ``` - - id: listening-to-deletes - name: Listening to deletes + - id: listen-to-deletes + name: Listen to deletes description: | By default, Supabase does not send deleted records. If you want to receive the deleted record you can enable full replication for the table you are listening too: @@ -5068,8 +5068,8 @@ functions: }) .subscribe() ``` - - id: listening-to-multiple-events - name: Listening to multiple events + - id: listen-to-multiple-events + name: Listen to multiple events description: You can chain listeners if you want to listen to multiple events for each table. js: | ```js @@ -5080,7 +5080,7 @@ functions: .subscribe() ``` - id: listening-to-row-level-changes - name: Listening to row level changes + name: Listen to row level changes description: You can listen to individual rows using the format `{table}:{col}=eq.{val}` - where `{col}` is the column name, and `{val}` is the value which you want to match. notes: | - ``eq`` filter works with all database types as under the hood, it's casting both the filter value and the database value to the correct type and then comparing them. diff --git a/spec/supabase_dart_v0.yml b/spec/supabase_dart_v0.yml index e60394fc656..618e39f26af 100644 --- a/spec/supabase_dart_v0.yml +++ b/spec/supabase_dart_v0.yml @@ -700,8 +700,8 @@ functions: }) .subscribe(); ``` - - id: listening-to-a-specific-table - name: Listening to a specific table + - id: listen-to-a-specific-table + name: Listen to a specific table code: | ```dart final mySubscription = supabase @@ -711,8 +711,8 @@ functions: }) .subscribe(); ``` - - id: listening-to-inserts - name: Listening to inserts + - id: listen-to-inserts + name: Listen to inserts code: | ```dart final mySubscription = supabase @@ -722,8 +722,8 @@ functions: }) .subscribe(); ``` - - id: listening-to-updates - name: Listening to updates + - id: listen-to-updates + name: Listen to updates description: | By default, Supabase will send only the updated record. If you want to receive the previous values as well you can enable full replication for the table you are listening too: @@ -740,8 +740,8 @@ functions: }) .subscribe(); ``` - - id: listening-to-deletes - name: Listening to deletes + - id: listen-to-deletes + name: Listen to deletes description: | By default, Supabase does not send deleted records. If you want to receive the deleted record you can enable full replication for the table you are listening too: @@ -758,8 +758,8 @@ functions: }) .subscribe(); ``` - - id: listening-to-multiple-events - name: Listening to multiple events + - id: listen-to-multiple-events + name: Listen to multiple events description: You can chain listeners if you want to listen to multiple events for each table. code: | ```dart @@ -770,7 +770,7 @@ functions: .subscribe(); ``` - id: listening-to-row-level-changes - name: Listening to row level changes + name: Listen to row level changes description: You can listen to individual rows using the format `{table}:{col}=eq.{val}` - where `{col}` is the column name, and `{val}` is the value which you want to match. code: | ```dart @@ -816,8 +816,8 @@ functions: - `stream()` will emit the initial data as well as any further change on the database as `Stream` of `List>` by combining Postgrest and Realtime. - Takes a list of primary key columns as its argument. examples: - - id: listening-to-a-specific-table - name: Listening to a specific table + - id: listen-to-a-specific-table + name: Listen to a specific table isSpotlight: true code: | ```dart diff --git a/spec/supabase_dart_v1.yml b/spec/supabase_dart_v1.yml index 862f07e6b77..333147b6b49 100644 --- a/spec/supabase_dart_v1.yml +++ b/spec/supabase_dart_v1.yml @@ -696,8 +696,8 @@ functions: }, ).subscribe(); ``` - - id: listening-to-a-specific-table - name: Listening to a specific table + - id: listen-to-a-specific-table + name: Listen to a specific table code: | ```dart supabase.channel('public:countries').on( @@ -708,8 +708,8 @@ functions: }, ).subscribe(); ``` - - id: listening-to-inserts - name: Listening to inserts + - id: listen-to-inserts + name: Listen to inserts code: | ```dart supabase.channel('public:countries').on( @@ -720,8 +720,8 @@ functions: }, ).subscribe(); ``` - - id: listening-to-updates - name: Listening to updates + - id: listen-to-updates + name: Listen to updates description: | By default, Supabase will send only the updated record. If you want to receive the previous values as well you can enable full replication for the table you are listening too: @@ -739,8 +739,8 @@ functions: }, ).subscribe(); ``` - - id: listening-to-deletes - name: Listening to deletes + - id: listen-to-deletes + name: Listen to deletes description: | By default, Supabase does not send deleted records. If you want to receive the deleted record you can enable full replication for the table you are listening too: @@ -758,8 +758,8 @@ functions: }, ).subscribe(); ``` - - id: listening-to-multiple-events - name: Listening to multiple events + - id: listen-to-multiple-events + name: Listen to multiple events description: You can chain listeners if you want to listen to multiple events for each table. code: | ```dart @@ -774,7 +774,7 @@ functions: }).subscribe(); ``` - id: listening-to-row-level-changes - name: Listening to row level changes + name: Listen to row level changes description: You can listen to individual rows using the format `{table}:{col}=eq.{val}` - where `{col}` is the column name, and `{val}` is the value which you want to match. code: | ```dart @@ -841,8 +841,8 @@ functions: - `stream()` will emit the initial data as well as any further change on the database as `Stream` of `List>` by combining Postgrest and Realtime. - Takes a list of primary key columns as its argument. examples: - - id: listening-to-a-specific-table - name: Listening to a specific table + - id: listen-to-a-specific-table + name: Listen to a specific table isSpotlight: true code: | ```dart diff --git a/spec/supabase_js_v1.yml b/spec/supabase_js_v1.yml index 810e46d2036..546f9adeb9d 100644 --- a/spec/supabase_js_v1.yml +++ b/spec/supabase_js_v1.yml @@ -1138,8 +1138,8 @@ functions: }) .subscribe() ``` - - id: listening-to-a-specific-table - name: Listening to a specific table + - id: listen-to-a-specific-table + name: Listen to a specific table code: | ```js const mySubscription = supabase @@ -1149,8 +1149,8 @@ functions: }) .subscribe() ``` - - id: listening-to-inserts - name: Listening to inserts + - id: listen-to-inserts + name: Listen to inserts code: | ```js const mySubscription = supabase @@ -1160,8 +1160,8 @@ functions: }) .subscribe() ``` - - id: listening-to-updates - name: Listening to updates + - id: listen-to-updates + name: Listen to updates description: | By default, Supabase will send only the updated record. If you want to receive the previous values as well you can enable full replication for the table you are listening too: @@ -1178,8 +1178,8 @@ functions: }) .subscribe() ``` - - id: listening-to-deletes - name: Listening to deletes + - id: listen-to-deletes + name: Listen to deletes description: | By default, Supabase does not send deleted records. If you want to receive the deleted record you can enable full replication for the table you are listening too: @@ -1196,8 +1196,8 @@ functions: }) .subscribe() ``` - - id: listening-to-multiple-events - name: Listening to multiple events + - id: listen-to-multiple-events + name: Listen to multiple events description: You can chain listeners if you want to listen to multiple events for each table. code: | ```js @@ -1208,7 +1208,7 @@ functions: .subscribe() ``` - id: listening-to-row-level-changes - name: Listening to row level changes + name: Listen to row level changes description: You can listen to individual rows using the format `{table}:{col}=eq.{val}` - where `{col}` is the column name, and `{val}` is the value which you want to match. notes: | - ``eq`` filter works with all database types as under the hood, it's casting both the filter value and the database value to the correct type and then comparing them. diff --git a/spec/supabase_js_v2.yml b/spec/supabase_js_v2.yml index 0cd16c93dbd..425ad812fc4 100644 --- a/spec/supabase_js_v2.yml +++ b/spec/supabase_js_v2.yml @@ -3980,42 +3980,111 @@ functions: - When a delete occurs, the contents of old_record will be broadcast to all subscribers to that table so ensure that each table's replica identity only contains information that is safe to expose publicly. - The channel name must exactly match the schema/table/filter you want to listen to separated by colons. See below examples for additional context. examples: + - id: listen-to-broadcast + name: Listen to broadcast messages + isSpotlight: true + code: | + ```js + supabase + .channel('any') + .on('broadcast', { event: 'cursor-pos' }, payload => { + console.log('Cursor position received!', payload) + }) + .subscribe((status) => { + if (status === 'SUBSCRIBED') { + channel.send({ + type: 'broadcast', + event: 'cursor-pos', + payload: { x: Math.random(), y: Math.random() }, + }) + } + }) + ``` + - id: listen-to-presence-sync + name: Listen to presence sync + isSpotlight: true + code: | + ```js + const channel = supabase.channel('any') + channel + .on('presence', { event: 'sync' }, () => { + console.log('Synced presence state: ', channel.presenceState()) + }) + .subscribe(async (status) => { + if (status === 'SUBSCRIBED') { + await channel.track({ online_at: new Date().toISOString() }) + } + }) + ``` + - id: listen-to-presence-join + name: Listen to presence join + isSpotlight: true + code: | + ```js + const channel = supabase.channel('any') + channel + .on('presence', { event: 'join' }, ({ newPresences }) => { + console.log('Newly joined presences: ', newPresences) + }) + .subscribe(async (status) => { + if (status === 'SUBSCRIBED') { + await channel.track({ online_at: new Date().toISOString() }) + } + }) + ``` + - id: listen-to-presence-leave + name: Listen to presence leave + isSpotlight: true + code: | + ```js + const channel = supabase.channel('any') + channel + .on('presence', { event: 'leave' }, ({ leftPresences }) => { + console.log('Newly left presences: ', leftPresences) + }) + .subscribe(async (status) => { + if (status === 'SUBSCRIBED') { + await channel.track({ online_at: new Date().toISOString() }) + await channel.untrack() + } + }) + ``` - id: listen-to-all-database-changes name: Listen to all database changes isSpotlight: true code: | ```js supabase - .channel('*') + .channel('any') .on('postgres_changes', { event: '*', schema: '*' }, payload => { console.log('Change received!', payload) }) .subscribe() ``` - - id: listening-to-a-specific-table - name: Listening to a specific table + - id: listen-to-a-specific-table + name: Listen to a specific table code: | ```js supabase - .channel('public:countries') + .channel('any') .on('postgres_changes', { event: '*', schema: 'public', table: 'countries' }, payload => { console.log('Change received!', payload) }) .subscribe() ``` - - id: listening-to-inserts - name: Listening to inserts + - id: listen-to-inserts + name: Listen to inserts code: | ```js supabase - .channel('public:countries') + .channel('any') .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'countries' }, payload => { console.log('Change received!', payload) }) .subscribe() ``` - - id: listening-to-updates - name: Listening to updates + - id: listen-to-updates + name: Listen to updates description: | By default, Supabase will send only the updated record. If you want to receive the previous values as well you can enable full replication for the table you are listening to: @@ -4026,14 +4095,14 @@ functions: code: | ```js supabase - .channel('public:countries') + .channel('any') .on('postgres_changes', { event: 'UPDATE', schema: 'public', table: 'countries' }, payload => { console.log('Change received!', payload) }) .subscribe() ``` - - id: listening-to-deletes - name: Listening to deletes + - id: listen-to-deletes + name: Listen to deletes description: | By default, Supabase does not send deleted records. If you want to receive the deleted record you can enable full replication for the table you are listening too: @@ -4044,32 +4113,32 @@ functions: code: | ```js supabase - .channel('public:countries') + .channel('any') .on('postgres_changes', { event: 'DELETE', schema: 'public', table: 'countries' }, payload => { console.log('Change received!', payload) }) .subscribe() ``` - - id: listening-to-multiple-events - name: Listening to multiple events + - id: listen-to-multiple-events + name: Listen to multiple events description: You can chain listeners if you want to listen to multiple events for each table. code: | ```js supabase - .channel('public:countries') + .channel('any') .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'countries' }, handleRecordInserted) .on('postgres_changes', { event: 'DELETE', schema: 'public', table: 'countries' }, handleRecordDeleted) .subscribe() ``` - id: listening-to-row-level-changes - name: Listening to row level changes + name: Listen to row level changes description: You can listen to individual rows using the format `{table}:{col}=eq.{val}` - where `{col}` is the column name, and `{val}` is the value which you want to match. notes: | - ``eq`` filter works with all database types as under the hood, it's casting both the filter value and the database value to the correct type and then comparing them. code: | ```js supabase - .channel('public:countries:id=eq.200') + .channel('any') .on('postgres_changes', { event: 'UPDATE', schema: 'public', table: 'countries', filter: 'id=eq.200' }, handleRecordUpdated) .subscribe() ``` From 4b4078c43128bbe5ea16f04f7d0a1f16e2621516 Mon Sep 17 00:00:00 2001 From: Wen Bo Xie Date: Fri, 20 Jan 2023 18:48:57 -0800 Subject: [PATCH 017/111] docs: capitalized Presence title in Realtime quickstart --- apps/docs/pages/guides/realtime/quickstart.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/pages/guides/realtime/quickstart.mdx b/apps/docs/pages/guides/realtime/quickstart.mdx index 3e387393ed1..73dd9f90689 100644 --- a/apps/docs/pages/guides/realtime/quickstart.mdx +++ b/apps/docs/pages/guides/realtime/quickstart.mdx @@ -121,7 +121,7 @@ channel.subscribe(async (status) => { }) ``` -## Track and display which users are online +## Track and Display Which Users Are Online [Presence](/docs/guides/realtime#presence) stores and synchronize shared state across clients. The `sync` event is triggered whenever the shared state changes. The `join` event is triggered when new clients join the channel and `leave` event is triggered when clients leave. From 8db8be55b23f421ee9d18d4f232f5ea1b3f36e82 Mon Sep 17 00:00:00 2001 From: Ruggero Tomaselli Date: Fri, 20 Jan 2023 17:01:04 +0100 Subject: [PATCH 018/111] Upgrade postgres-meta to v0.59.0 --- docker/docker-compose.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml index 44f78ed921c..bf0d26a0597 100644 --- a/docker/docker-compose.yml +++ b/docker/docker-compose.yml @@ -170,7 +170,7 @@ services: meta: container_name: supabase-meta - image: supabase/postgres-meta:v0.52.1 + image: supabase/postgres-meta:v0.59.0 depends_on: db: # Disable this if you are using an external Postgres database condition: service_healthy From befecabba90c942b5316c1eaf1e4899de41a67f4 Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Tue, 27 Dec 2022 15:32:12 +0700 Subject: [PATCH 019/111] Remove varchar, json, timetz and timestamp --- .../SidePanelEditor/SidePanelEditor.constants.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.constants.ts b/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.constants.ts index 41dbe8d9217..8bbcbcd8750 100644 --- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.constants.ts +++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.constants.ts @@ -3,12 +3,12 @@ import { PostgresDataTypeOption } from './SidePanelEditor.types' export const DATE_FORMAT = 'YYYY-MM-DDTHH:mm:ssZ' export const NUMERICAL_TYPES = ['int2', 'int4', 'int8', 'float4', 'float8', 'numeric'] -export const JSON_TYPES = ['json', 'jsonb'] -export const TEXT_TYPES = ['text', 'varchar'] +export const JSON_TYPES = ['jsonb'] +export const TEXT_TYPES = ['text'] -export const TIMESTAMP_TYPES = ['timestamp', 'timestamptz'] +export const TIMESTAMP_TYPES = ['timestamptz'] export const DATE_TYPES = ['date'] -export const TIME_TYPES = ['time', 'timetz'] +export const TIME_TYPES = ['time'] export const DATETIME_TYPES = concat(TIMESTAMP_TYPES, DATE_TYPES, TIME_TYPES) export const OTHER_DATA_TYPES = ['uuid', 'bool'] From 1d1cabda36d881c352e56d04039fcd8d194de0d5 Mon Sep 17 00:00:00 2001 From: Joshen Lim Date: Tue, 27 Dec 2022 15:38:29 +0700 Subject: [PATCH 020/111] Remove varchar, json, timetz and timestamp from being able to be selected when creating column in table editor --- .../SidePanelEditor.constants.ts | 28 +++---------------- 1 file changed, 4 insertions(+), 24 deletions(-) diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.constants.ts b/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.constants.ts index 8bbcbcd8750..93d1de22237 100644 --- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.constants.ts +++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/SidePanelEditor.constants.ts @@ -3,12 +3,12 @@ import { PostgresDataTypeOption } from './SidePanelEditor.types' export const DATE_FORMAT = 'YYYY-MM-DDTHH:mm:ssZ' export const NUMERICAL_TYPES = ['int2', 'int4', 'int8', 'float4', 'float8', 'numeric'] -export const JSON_TYPES = ['jsonb'] -export const TEXT_TYPES = ['text'] +export const JSON_TYPES = ['json', 'jsonb'] +export const TEXT_TYPES = ['text', 'varchar'] -export const TIMESTAMP_TYPES = ['timestamptz'] +export const TIMESTAMP_TYPES = ['timestamp', 'timestamptz'] export const DATE_TYPES = ['date'] -export const TIME_TYPES = ['time'] +export const TIME_TYPES = ['time', 'timetz'] export const DATETIME_TYPES = concat(TIMESTAMP_TYPES, DATE_TYPES, TIME_TYPES) export const OTHER_DATA_TYPES = ['uuid', 'bool'] @@ -47,11 +47,6 @@ export const POSTGRES_DATA_TYPE_OPTIONS: PostgresDataTypeOption[] = [ description: 'Exact numeric of selectable precision', type: 'number', }, - { - name: 'json', - description: 'Textual JSON data', - type: 'json', - }, { name: 'jsonb', description: 'Binary JSON data, decomposed', @@ -62,11 +57,6 @@ export const POSTGRES_DATA_TYPE_OPTIONS: PostgresDataTypeOption[] = [ description: 'Variable-length character string', type: 'text', }, - { - name: 'varchar', - description: 'Variable-length character string', - type: 'text', - }, { name: 'uuid', description: 'Universally unique identifier', @@ -82,16 +72,6 @@ export const POSTGRES_DATA_TYPE_OPTIONS: PostgresDataTypeOption[] = [ description: 'Time of day (no time zone)', type: 'time', }, - { - name: 'timetz', - description: 'Time of day, including time zone', - type: 'time', - }, - { - name: 'timestamp', - description: 'Date and time (no time zone)', - type: 'time', - }, { name: 'timestamptz', description: 'Date and time, including time zone', From 83ab19248b1acc89f872e5b61d871fd88483da62 Mon Sep 17 00:00:00 2001 From: Terry Sutton Date: Wed, 28 Dec 2022 08:08:22 -0330 Subject: [PATCH 021/111] Add a docs section for why we only support certain types in the dashboard --- apps/docs/pages/guides/database/tables.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/pages/guides/database/tables.mdx b/apps/docs/pages/guides/database/tables.mdx index 3a8caa24c19..65367022480 100644 --- a/apps/docs/pages/guides/database/tables.mdx +++ b/apps/docs/pages/guides/database/tables.mdx @@ -77,7 +77,7 @@ You must define the "data type" when you create a column. ### Data types Every column is a predefined type. PostgreSQL provides many [default types](https://www.postgresql.org/docs/current/datatype.html), and you can even design your own (or use extensions) -if the default types don't fit your needs. +if the default types don't fit your needs. You can use any data type that Postgres supports via the SQL editor. We only support a subset of these in the Table Editor in an effort to keep the experience simple for people with less experience with databases.
Show/Hide default data types From 4d2ab3cb3a578d9fa279171b0599085de6a3354e Mon Sep 17 00:00:00 2001 From: Ruggero Tomaselli Date: Fri, 20 Jan 2023 12:06:12 +0100 Subject: [PATCH 022/111] Add Healthchecks to docker-compose --- docker/docker-compose.yml | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml index bf0d26a0597..0fb8c55acd6 100644 --- a/docker/docker-compose.yml +++ b/docker/docker-compose.yml @@ -11,6 +11,11 @@ services: container_name: supabase-studio image: supabase/studio:20221214-4eecc99 restart: unless-stopped + healthcheck: + test: [ "CMD", "node", "-e", "require('http').get('http://localhost:3000/api/profile', (r) => {if (r.statusCode !== 200) throw new Error(r.statusCode)})" ] + timeout: 5s + interval: 5s + retries: 3 ports: - ${STUDIO_PORT}:3000/tcp environment: @@ -51,6 +56,11 @@ services: depends_on: db: # Disable this if you are using an external Postgres database condition: service_healthy + healthcheck: + test: [ "CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:9999/health" ] + timeout: 5s + interval: 5s + retries: 3 restart: unless-stopped environment: GOTRUE_API_HOST: 0.0.0.0 @@ -95,6 +105,11 @@ services: depends_on: db: # Disable this if you are using an external Postgres database condition: service_healthy + healthcheck: + test: [ "CMD", "printf", "\\0", ">", "/dev/tcp/localhost/4000" ] + timeout: 5s + interval: 5s + retries: 3 restart: unless-stopped environment: PGRST_DB_URI: postgres://authenticator:${POSTGRES_PASSWORD}@${POSTGRES_HOST}:${POSTGRES_PORT}/${POSTGRES_DB} @@ -109,6 +124,11 @@ services: depends_on: db: # Disable this if you are using an external Postgres database condition: service_healthy + healthcheck: + test: [ "CMD", "printf", "\\0", ">", "/dev/tcp/localhost/4000" ] + timeout: 5s + interval: 5s + retries: 3 restart: unless-stopped environment: PORT: 4000 @@ -139,6 +159,11 @@ services: condition: service_started imgproxy: condition: service_started + healthcheck: + test: [ "CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:5000/status" ] + timeout: 5s + interval: 5s + retries: 3 restart: unless-stopped environment: ANON_KEY: ${ANON_KEY} @@ -161,6 +186,11 @@ services: imgproxy: container_name: supabase-imgproxy image: darthsim/imgproxy:v3.11 + healthcheck: + test: [ "CMD", "imgproxy", "health" ] + timeout: 5s + interval: 5s + retries: 3 environment: IMGPROXY_BIND: ":5001" IMGPROXY_LOCAL_FILESYSTEM_ROOT: / From f77ac24ddd7569c7528874e4675a796d17dca8b4 Mon Sep 17 00:00:00 2001 From: Ruggero Tomaselli Date: Fri, 20 Jan 2023 17:30:02 +0000 Subject: [PATCH 023/111] Fix Healthchecks with printf --- docker/docker-compose.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml index 0fb8c55acd6..d78eb40cfc8 100644 --- a/docker/docker-compose.yml +++ b/docker/docker-compose.yml @@ -106,7 +106,7 @@ services: db: # Disable this if you are using an external Postgres database condition: service_healthy healthcheck: - test: [ "CMD", "printf", "\\0", ">", "/dev/tcp/localhost/4000" ] + test: [ "CMD", "bash", "-c", "printf \\0 > /dev/tcp/localhost/3000" ] timeout: 5s interval: 5s retries: 3 @@ -125,7 +125,7 @@ services: db: # Disable this if you are using an external Postgres database condition: service_healthy healthcheck: - test: [ "CMD", "printf", "\\0", ">", "/dev/tcp/localhost/4000" ] + test: [ "CMD", "bash", "-c", "printf \\0 > /dev/tcp/localhost/4000" ] timeout: 5s interval: 5s retries: 3 From 4cd435d1a09f502fb72febe22a4b417519db7a6f Mon Sep 17 00:00:00 2001 From: Ruggero Tomaselli Date: Sat, 21 Jan 2023 07:10:42 +0000 Subject: [PATCH 024/111] fix: postgREST doesn't have shell on Linux/AAMD64 --- docker/docker-compose.yml | 5 ----- 1 file changed, 5 deletions(-) diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml index d78eb40cfc8..5b5e2125437 100644 --- a/docker/docker-compose.yml +++ b/docker/docker-compose.yml @@ -105,11 +105,6 @@ services: depends_on: db: # Disable this if you are using an external Postgres database condition: service_healthy - healthcheck: - test: [ "CMD", "bash", "-c", "printf \\0 > /dev/tcp/localhost/3000" ] - timeout: 5s - interval: 5s - retries: 3 restart: unless-stopped environment: PGRST_DB_URI: postgres://authenticator:${POSTGRES_PASSWORD}@${POSTGRES_HOST}:${POSTGRES_PORT}/${POSTGRES_DB} From 7b982eb03f23293ec323e63a4a55e0d7018254b6 Mon Sep 17 00:00:00 2001 From: Terry Sutton Date: Sat, 21 Jan 2023 09:43:45 -0330 Subject: [PATCH 025/111] Remove console.log --- .../Navigation/NavigationMenu/NavigationMenuRefListItems.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx index 690615b4a13..27f1e69ba99 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx @@ -179,7 +179,7 @@ const Content: React.FC = ({ id, lib, commonSections, sp if (!sections) console.error('no common sections imported') const menu = NavItems[id] - console.log(menu) + //console.log(menu) const databaseFunctions = find(sections, { title: 'Database' }) ? find(sections, { title: 'Database' }).items : [] From 3912a1119931dd2abe880e0bb3ea9af245046530 Mon Sep 17 00:00:00 2001 From: Terry Sutton Date: Sat, 21 Jan 2023 10:00:13 -0330 Subject: [PATCH 026/111] Add overview menu --- .../components/Navigation/NavigationMenu/HomeMenu.tsx | 2 +- .../NavigationMenu/NavigationMenu.constants.ts | 10 ++++++++++ .../Navigation/NavigationMenu/NavigationMenu.tsx | 5 +++++ apps/docs/layouts/SiteLayout.tsx | 4 ++++ 4 files changed, 20 insertions(+), 1 deletion(-) diff --git a/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx index 7738ed521d9..1893c60af37 100644 --- a/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx @@ -112,7 +112,7 @@ const home = [ { label: 'Supabase CLI', icon: '/img/icons/menu/reference-cli', - href: '/reference/cli/introduction', + href: '/reference/cli/overview', level: 'reference_javascript', }, ], diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts index 40ceb4f47e2..030b25bf54d 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts @@ -485,6 +485,16 @@ export const storage = { ], } +export const storage2 = { + icon: 'reference-cli', + title: 'Supabase CLI', + url: '/reference/cli/overview', + items: [ + { name: 'Commands', url: '/reference/cli/introduction', items: [] }, + { name: 'Config', url: '/reference/cli/config', items: [] }, + ], +} + export const platform = { icon: 'platform', label: 'Platform', diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx index 65d0ec61e07..afa51d3f706 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx @@ -125,6 +125,9 @@ const NavigationMenu = () => { case url.includes(`/docs/reference/python`) && url: menuState.setMenuLevelId('reference_python_v2') break + case url.includes(`/docs/reference/cli/overview`) && url: + menuState.setMenuLevelId('storage2') + break case url.includes(`/docs/reference/cli`) && url: menuState.setMenuLevelId('reference_cli') break @@ -164,6 +167,7 @@ const NavigationMenu = () => { const isFunctionsActive = 'functions' === level const isRealtimeActive = 'realtime' === level const isStorageActive = 'storage' === level + const isStorage2Active = 'storage2' === level const isPlatformActive = 'platform' === level const isResourcesActive = 'resources' === level const isSelfHosting = 'self_hosting' === level @@ -191,6 +195,7 @@ const NavigationMenu = () => { + diff --git a/apps/docs/layouts/SiteLayout.tsx b/apps/docs/layouts/SiteLayout.tsx index d0eec9c2fbf..17a4921cd5b 100644 --- a/apps/docs/layouts/SiteLayout.tsx +++ b/apps/docs/layouts/SiteLayout.tsx @@ -39,6 +39,10 @@ const levelsData = { icon: '/docs/img/icons/menu/storage', name: 'Storage', }, + storage2: { + icon: '/docs/img/icons/menu/reference-cli', + name: 'Supabase CLI', + }, platform: { icon: '/docs/img/icons/menu/platform', name: 'Platform', From 616d812a6d6d8bcdf1211598e8cc849a90d8e036 Mon Sep 17 00:00:00 2001 From: Stojan Dimitrovski Date: Sat, 21 Jan 2023 14:51:42 +0100 Subject: [PATCH 027/111] docs: add note on converting magic link templates to OTP --- spec/supabase_js_v2.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/spec/supabase_js_v2.yml b/spec/supabase_js_v2.yml index 425ad812fc4..ee991a3b970 100644 --- a/spec/supabase_js_v2.yml +++ b/spec/supabase_js_v2.yml @@ -217,6 +217,7 @@ functions: - If you're using phone, you can configure whether you want the user to receive a OTP. - The magic link's destination URL is determined by the [`SITE_URL`](/docs/reference/auth/config#site_url). - See [redirect URLs and wildcards](/docs/guides/auth/overview#redirect-urls-and-wildcards) to add additional redirect URLs to your project. + - Magic links and OTPs share the same implementation. If you wish to send users a one-time-code instead of a magic link, you should [modify the magic link email temlate](https://app.supabase.com/project/_/auth/templates) to include `{{ .Token }}` instead of `{{ .ConfirmationURL }}`. examples: - id: sign-in-with-email name: Sign in with email From 7a057df8b5b94d0070a423a2194bc5cacf978305 Mon Sep 17 00:00:00 2001 From: Terry Sutton Date: Sat, 21 Jan 2023 15:07:34 -0330 Subject: [PATCH 028/111] Add overview page --- .../NavigationMenu.constants.ts | 2 +- .../NavigationMenu/NavigationMenu.tsx | 9 +- apps/docs/layouts/SiteLayout.tsx | 2 +- apps/docs/pages/reference/cli/overview.mdx | 92 +++++++++++++++++++ 4 files changed, 100 insertions(+), 5 deletions(-) create mode 100644 apps/docs/pages/reference/cli/overview.mdx diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts index 030b25bf54d..23b8bb50927 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts @@ -485,7 +485,7 @@ export const storage = { ], } -export const storage2 = { +export const reference_cli_overview = { icon: 'reference-cli', title: 'Supabase CLI', url: '/reference/cli/overview', diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx index afa51d3f706..9bd0100b39f 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx @@ -126,7 +126,7 @@ const NavigationMenu = () => { menuState.setMenuLevelId('reference_python_v2') break case url.includes(`/docs/reference/cli/overview`) && url: - menuState.setMenuLevelId('storage2') + menuState.setMenuLevelId('reference_cli_overview') break case url.includes(`/docs/reference/cli`) && url: menuState.setMenuLevelId('reference_cli') @@ -167,7 +167,7 @@ const NavigationMenu = () => { const isFunctionsActive = 'functions' === level const isRealtimeActive = 'realtime' === level const isStorageActive = 'storage' === level - const isStorage2Active = 'storage2' === level + const isreference_cli_overviewActive = 'reference_cli_overview' === level const isPlatformActive = 'platform' === level const isResourcesActive = 'resources' === level const isSelfHosting = 'self_hosting' === level @@ -195,7 +195,10 @@ const NavigationMenu = () => { - + diff --git a/apps/docs/layouts/SiteLayout.tsx b/apps/docs/layouts/SiteLayout.tsx index 17a4921cd5b..0f417e94eca 100644 --- a/apps/docs/layouts/SiteLayout.tsx +++ b/apps/docs/layouts/SiteLayout.tsx @@ -39,7 +39,7 @@ const levelsData = { icon: '/docs/img/icons/menu/storage', name: 'Storage', }, - storage2: { + reference_cli_overview: { icon: '/docs/img/icons/menu/reference-cli', name: 'Supabase CLI', }, diff --git a/apps/docs/pages/reference/cli/overview.mdx b/apps/docs/pages/reference/cli/overview.mdx new file mode 100644 index 00000000000..f069cca5ed7 --- /dev/null +++ b/apps/docs/pages/reference/cli/overview.mdx @@ -0,0 +1,92 @@ +import Layout from '~/layouts/DefaultLayout' +import Link from 'next/link' +import { GlassPanel, IconPanel, Button, IconChevronRight } from 'ui' + +export const meta = { + title: 'Supabase CLI', + description: + 'The Supabase CLI provides tools to develop your project locally and deploy to the Supabase Platform.', +} + +

+ The Supabase CLI provides tools to develop your project locally and deploy to the Supabase + Platform. +

+ +{/* start container */} + +
+ +
+ +
+ {apis.map((product) => { + return ( + + + + {product.description} + + + + ) + })} + +
+
+ +{/* end of container */} + +
+ +
+ ### Video: Announcing the Supabase CLI +
+ +
+
+ +
+ ### Learn more about the CLI + - [Install the Supabase CLI](/docs/guides/cli) + - [Browse the source code](https://github.com/supabase/cli) + - [Known bugs and issues on Github](https://github.com/supabase/cli/issues) + +
+ +
+ +
+ +export const apis = [ + { + title: 'Supabase CLI commands', + icon: '/docs/img/icons/menu/reference-api', + hasLightIcon: true, + href: 'reference/cli/introduction', + description: + 'Use the CLI to develop your project locally, manage database migrations, and deploy to the Supabase Platform or self-host.', + span: 'col-span-12 md:col-span-6', + }, + { + title: 'Supabase CLI configuration', + icon: '/docs/img/icons/menu/reference-api', + hasLightIcon: true, + href: 'reference/cli/introduction', + description: 'Learn what options are available to you for using the Supabase CLI locally.', + span: 'col-span-12 md:col-span-6', + }, +] + +export const Page = ({ children }) => + +export default Page From d3faceff7390944cb2e9514831812300f3ab7a3f Mon Sep 17 00:00:00 2001 From: mriios Date: Sun, 22 Jan 2023 10:28:02 +0000 Subject: [PATCH 029/111] Update nextjs-server-components.mdx middleware file name for TypeScript had `.js` extension. --- .../pages/guides/auth/auth-helpers/nextjs-server-components.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/pages/guides/auth/auth-helpers/nextjs-server-components.mdx b/apps/docs/pages/guides/auth/auth-helpers/nextjs-server-components.mdx index 4f60e7d3581..69a5d5e6d3c 100644 --- a/apps/docs/pages/guides/auth/auth-helpers/nextjs-server-components.mdx +++ b/apps/docs/pages/guides/auth/auth-helpers/nextjs-server-components.mdx @@ -140,7 +140,7 @@ export async function middleware(req) { -Create a new `/app/middleware.js` file and populate with the following: +Create a new `/app/middleware.ts` file and populate with the following: ```tsx title="middleware.ts" import { createMiddlewareSupabaseClient } from '@supabase/auth-helpers-nextjs' From 96f045f7dc5a3a68b97fa1a19de4e61af5468509 Mon Sep 17 00:00:00 2001 From: dshukertjr <18113850+dshukertjr@users.noreply.github.com> Date: Mon, 23 Jan 2023 00:46:52 +0900 Subject: [PATCH 030/111] add Dart initialize on yaml file --- apps/docs/docs/ref/dart/initializing.mdx | 50 ------------------------ spec/supabase_dart_v1.yml | 35 +++++++++++++++++ 2 files changed, 35 insertions(+), 50 deletions(-) delete mode 100644 apps/docs/docs/ref/dart/initializing.mdx diff --git a/apps/docs/docs/ref/dart/initializing.mdx b/apps/docs/docs/ref/dart/initializing.mdx deleted file mode 100644 index 501efaef48f..00000000000 --- a/apps/docs/docs/ref/dart/initializing.mdx +++ /dev/null @@ -1,50 +0,0 @@ ---- -id: initializing -title: 'Initializing' -slug: initializing ---- - - - - - Initialize Supabase with the static `initialize()` method on `Supabase` class. - - - - - - - - - ```dart main.dart - Future main() async { - WidgetsFlutterBinding.ensureInitialized(); - - await Supabase.initialize( - url: 'https://xyzcompany.supabase.co', - anonKey: 'public-anon-key', - ); - - runApp(MyApp()); - } - ``` - - - - - ```dart - final supabase = SupabaseClient( - 'https://xyzcompany.supabase.co', - 'public-anon-key', - ); - ``` - - - - - - diff --git a/spec/supabase_dart_v1.yml b/spec/supabase_dart_v1.yml index 333147b6b49..72e079bb08b 100644 --- a/spec/supabase_dart_v1.yml +++ b/spec/supabase_dart_v1.yml @@ -16,6 +16,41 @@ info: version: '0.0.1' functions: + - id: initializing + title: 'Initializing' + $ref: '@supabase/supabase-js.index.SupabaseClient.constructor' + description: | + You can initialize Supabase with the static `initialize()` method of `Supabase` class. + + The Supabase client is your entrypoint to the rest of the Supabase functionality + and is the easiest way to interact with everything we offer within the Supabase ecosystem. + + examples: + - id: flutter-initialize + name: For Flutter + code: | + ```dart + Future main() async { + await Supabase.initialize( + url: 'https://xyzcompany.supabase.co', + anonKey: 'public-anon-key', + ); + + runApp(MyApp()); + } + + // Get a reference your Supabase client + final supabase = Supabase.instance.client; + ``` + - id: for-other-dart-projects + name: For other Dart projects + code: | + ```dart + final supabase = SupabaseClient( + 'https://xyzcompany.supabase.co', + 'public-anon-key', + ); + ``` - id: sign-up title: 'signUp()' description: | From 197f9bfcd5666a7fcaec5facbd72fc4240c2a8e7 Mon Sep 17 00:00:00 2001 From: dshukertjr <18113850+dshukertjr@users.noreply.github.com> Date: Mon, 23 Jan 2023 00:51:25 +0900 Subject: [PATCH 031/111] hide misc on Flutter docs --- spec/common-client-libs-sections.json | 1 + 1 file changed, 1 insertion(+) diff --git a/spec/common-client-libs-sections.json b/spec/common-client-libs-sections.json index 517dad7a6fa..d8a51532a7a 100644 --- a/spec/common-client-libs-sections.json +++ b/spec/common-client-libs-sections.json @@ -847,6 +847,7 @@ }, { "title": "Misc", + "excludes": ["reference_dart_v1", "reference_dart_v0"], "items": [ { From dfc49c9275235073b3c676ce8c5cc4cf045c47d4 Mon Sep 17 00:00:00 2001 From: Bo Lu Date: Mon, 23 Jan 2023 11:06:05 +1100 Subject: [PATCH 032/111] add init command to cli intro --- apps/docs/docs/ref/cli/introduction.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/docs/docs/ref/cli/introduction.mdx b/apps/docs/docs/ref/cli/introduction.mdx index e204038abae..010c563ea35 100644 --- a/apps/docs/docs/ref/cli/introduction.mdx +++ b/apps/docs/docs/ref/cli/introduction.mdx @@ -17,7 +17,7 @@ hideTitle: true The Supabase CLI provides tools to develop your project locally and deploy to the Supabase Platform. The CLI is still under development, but it contains all the functionality for working with your Supabase projects and the Supabase Platform. - - Run Supabase locally: [`supabase start`](/docs/reference/cli/usage#supabase-start) + - Run Supabase locally: [`supabase init`](/docs/reference/cli/usage#supabase-init) and [`supabase start`](/docs/reference/cli/usage#supabase-start) - Manage database migrations: [`supabase migration`](/docs/reference/cli/usage#supabase-migration) - CI/CD for releasing to production: [`supabase db push`](/docs/reference/cli/usage#supabase-db-push) - Manage your Supabase projects: [`supabase projects`](/docs/reference/cli/usage#supabase-projects) From d5dc429a8f1b84478115576cd315f6a7a77fd407 Mon Sep 17 00:00:00 2001 From: Bo Lu Date: Mon, 23 Jan 2023 11:31:15 +1100 Subject: [PATCH 033/111] fix broken link in todo list example, fix #11807 --- studio/components/interfaces/SQLEditor/SQLEditor.constants.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/studio/components/interfaces/SQLEditor/SQLEditor.constants.ts b/studio/components/interfaces/SQLEditor/SQLEditor.constants.ts index de1990ca96b..2483efe39da 100644 --- a/studio/components/interfaces/SQLEditor/SQLEditor.constants.ts +++ b/studio/components/interfaces/SQLEditor/SQLEditor.constants.ts @@ -613,10 +613,8 @@ values sql: ` -- -- For use with: --- https://github.com/supabase/supabase/tree/master/examples/todo-list/nextjs-todo-list or --- https://github.com/supabase/supabase/tree/master/examples/todo-list/react-todo-list or -- https://github.com/supabase/supabase/tree/master/examples/todo-list/sveltejs-todo-list or --- https://github.com/supabase/supabase/tree/master/examples/todo-list/vue3-ts-todo-list +-- https://github.com/supabase/examples-archive/tree/main/supabase-js-v1/todo-list -- create table todos ( From 531d2f00c9eaaa13286eb871b262a002eb84e80a Mon Sep 17 00:00:00 2001 From: ykyk3 <41600203+ykyk3@users.noreply.github.com> Date: Mon, 23 Jan 2023 20:57:44 +0900 Subject: [PATCH 034/111] Correct path to developpers.md in readme --- i18n/README.bg.md | 2 +- i18n/README.fi.md | 2 +- i18n/README.fr.md | 2 +- i18n/README.jp.md | 2 +- i18n/README.pt-br.md | 2 +- i18n/README.sr.md | 2 +- i18n/README.vi-vn.md | 2 +- 7 files changed, 7 insertions(+), 7 deletions(-) diff --git a/i18n/README.bg.md b/i18n/README.bg.md index 5f535288cc5..8af879c6eb7 100644 --- a/i18n/README.bg.md +++ b/i18n/README.bg.md @@ -27,7 +27,7 @@ За пълната документация посетете [supabase.com/docs](https://supabase.com/docs) -За да видите как да допринасяте, посетете [Getting Started](./DEVELOPERS.md) +За да видите как да допринасяте, посетете [Getting Started](../DEVELOPERS.md) ## Общност & поддръжка diff --git a/i18n/README.fi.md b/i18n/README.fi.md index 104a043c857..4607e1c7aed 100644 --- a/i18n/README.fi.md +++ b/i18n/README.fi.md @@ -27,7 +27,7 @@ Katso täydelliset dokumentaatiot osoitteesta [supabase.com/docs](https://supabase.com/docs) -Katso ohjeet osallistumiseen vierailemalla [Aloitus](./DEVELOPERS.md) +Katso ohjeet osallistumiseen vierailemalla [Aloitus](../DEVELOPERS.md) ## Yhteisö ja tuki diff --git a/i18n/README.fr.md b/i18n/README.fr.md index 4bec5cf7840..33cd09fee3f 100644 --- a/i18n/README.fr.md +++ b/i18n/README.fr.md @@ -23,7 +23,7 @@ Pour une documentation complète, visitez [supabase.com/docs](https://supabase.com/docs) -Pour voir comment Contribuer, visitez [Getting Started](./DEVELOPERS.md) +Pour voir comment Contribuer, visitez [Getting Started](../DEVELOPERS.md) ## Communauté et Support diff --git a/i18n/README.jp.md b/i18n/README.jp.md index d532a8d7a6a..4c8f72802fb 100644 --- a/i18n/README.jp.md +++ b/i18n/README.jp.md @@ -27,7 +27,7 @@ 詳しいドキュメントは[supabase.com/docs](https://supabase.com/docs)をご覧ください。 -コントリビュート方法は[Getting Started](./DEVELOPERS.md)をご覧ください。 +コントリビュート方法は[Getting Started](../DEVELOPERS.md)をご覧ください。 ## コミュニティとサポート diff --git a/i18n/README.pt-br.md b/i18n/README.pt-br.md index 9d22a6c7282..560c641e1a8 100644 --- a/i18n/README.pt-br.md +++ b/i18n/README.pt-br.md @@ -27,7 +27,7 @@ Para documentação completa, visite [supabase.com/docs](https://supabase.com/docs) -Para ver como Contribuir, visite [Primeiros Passos](./DEVELOPERS.md) +Para ver como Contribuir, visite [Primeiros Passos](../DEVELOPERS.md) ## Comunidade & Suporte diff --git a/i18n/README.sr.md b/i18n/README.sr.md index 83b6cfddad1..42945adfea5 100644 --- a/i18n/README.sr.md +++ b/i18n/README.sr.md @@ -27,7 +27,7 @@ Za punu dokumentaciju, posetite [supabase.com/docs](https://supabase.com/docs) -Da vidite kako možete doprineti razvoju, posetite [Getting Started](./DEVELOPERS.md) +Da vidite kako možete doprineti razvoju, posetite [Getting Started](../DEVELOPERS.md) ## Zajednica & Podrška diff --git a/i18n/README.vi-vn.md b/i18n/README.vi-vn.md index 0b673713085..8668495cf04 100644 --- a/i18n/README.vi-vn.md +++ b/i18n/README.vi-vn.md @@ -27,7 +27,7 @@ Để có tài liệu đầy đủ, hãy truy cập [supabase.com/docs](https://supabase.com/docs) -Để biết cách Đóng góp, hãy truy cập [Bắt đầu](./DEVELOPERS.md) +Để biết cách Đóng góp, hãy truy cập [Bắt đầu](../DEVELOPERS.md) ## Hỗ trợ & Cộng đồng From ec5c4b02b09eb03b6b6dc01a847565c60c5fab86 Mon Sep 17 00:00:00 2001 From: Ollie Halliday <22655069+Hallidayo@users.noreply.github.com> Date: Mon, 23 Jan 2023 14:34:49 +0000 Subject: [PATCH 035/111] added in redirect example --- spec/supabase_js_v2.yml | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/spec/supabase_js_v2.yml b/spec/supabase_js_v2.yml index 7e220e2dc23..fbbd655ec44 100644 --- a/spec/supabase_js_v2.yml +++ b/spec/supabase_js_v2.yml @@ -174,6 +174,23 @@ functions: } ) ``` + - id: sign-up-with-redirect. + name: Sign up with a redirect + isSpotlight: false + description: | + - See [redirect URLs and wildcards](/docs/guides/auth/overview#redirect-urls-and-wildcards) to add additional redirect URLs to your project. + code: | + ```js + const { data, error } = await supabase.auth.signUp( + { + email: 'example@email.com', + password: 'example-password', + options: { + redirectTo: 'https://example.com/welcome' + } + } + ) + ``` - id: sign-in-with-password title: 'signInWithPassword()' $ref: '@supabase/gotrue-js.GoTrueClient.signInWithPassword' From e83c3bff83ee73c587c014248a8bcdb08ac111d1 Mon Sep 17 00:00:00 2001 From: Ollie Halliday <22655069+Hallidayo@users.noreply.github.com> Date: Mon, 23 Jan 2023 15:54:18 +0000 Subject: [PATCH 036/111] renamed paramter to event --- studio/components/grid/components/editor/SelectEditor.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/studio/components/grid/components/editor/SelectEditor.tsx b/studio/components/grid/components/editor/SelectEditor.tsx index 6a0410470d2..ce9ed3e32d0 100644 --- a/studio/components/grid/components/editor/SelectEditor.tsx +++ b/studio/components/grid/components/editor/SelectEditor.tsx @@ -19,11 +19,11 @@ export function SelectEditor({ const value = row[column.key as keyof TRow] as unknown as string - function onChange(value: any) { - if (!value || value == '') { + function onChange(event: any) { + if (!event || event == '') { onRowChange({ ...row, [column.key]: null }, true) } else { - onRowChange({ ...row, [column.key]: value.target.value }, true) + onRowChange({ ...row, [column.key]: event.target.value }, true) } } From 7e342941d0ec014378c7de64852d114ad555a4d2 Mon Sep 17 00:00:00 2001 From: Ollie Halliday <22655069+Hallidayo@users.noreply.github.com> Date: Mon, 23 Jan 2023 15:59:18 +0000 Subject: [PATCH 037/111] issue when changing to NULL fixed --- studio/components/grid/components/editor/SelectEditor.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/studio/components/grid/components/editor/SelectEditor.tsx b/studio/components/grid/components/editor/SelectEditor.tsx index ce9ed3e32d0..d23964f978f 100644 --- a/studio/components/grid/components/editor/SelectEditor.tsx +++ b/studio/components/grid/components/editor/SelectEditor.tsx @@ -20,7 +20,8 @@ export function SelectEditor({ const value = row[column.key as keyof TRow] as unknown as string function onChange(event: any) { - if (!event || event == '') { + debugger + if (!event.target.vaue || event.target.value == '') { onRowChange({ ...row, [column.key]: null }, true) } else { onRowChange({ ...row, [column.key]: event.target.value }, true) From ce33714418f1bd26cdcecae7e007369ad22de8c2 Mon Sep 17 00:00:00 2001 From: Andrew Smith Date: Mon, 23 Jan 2023 17:13:04 +0000 Subject: [PATCH 038/111] Update coding fence from js to ts --- spec/supabase_js_v1.yml | 2 +- spec/supabase_js_v2.yml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/spec/supabase_js_v1.yml b/spec/supabase_js_v1.yml index 546f9adeb9d..5e1fa3a7bb1 100644 --- a/spec/supabase_js_v1.yml +++ b/spec/supabase_js_v1.yml @@ -1272,7 +1272,7 @@ functions: name: List buckets isSpotlight: true code: | - ```js + ```ts const { data, error } = await supabase .storage .listBuckets() diff --git a/spec/supabase_js_v2.yml b/spec/supabase_js_v2.yml index 425ad812fc4..3247b62c8eb 100644 --- a/spec/supabase_js_v2.yml +++ b/spec/supabase_js_v2.yml @@ -4196,7 +4196,7 @@ functions: name: List buckets isSpotlight: true code: | - ```js + ```ts const { data, error } = await supabase .storage .listBuckets() From 9eafb1ed192b32ef58ea73558b636007961ad7de Mon Sep 17 00:00:00 2001 From: dng Date: Mon, 23 Jan 2023 11:17:29 -0800 Subject: [PATCH 039/111] Update spec/supabase_js_v2.yml --- spec/supabase_js_v2.yml | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/spec/supabase_js_v2.yml b/spec/supabase_js_v2.yml index fbbd655ec44..bec557d7599 100644 --- a/spec/supabase_js_v2.yml +++ b/spec/supabase_js_v2.yml @@ -174,9 +174,8 @@ functions: } ) ``` - - id: sign-up-with-redirect. - name: Sign up with a redirect - isSpotlight: false + - id: sign-up-with-redirect + name: Sign up with a redirect URL description: | - See [redirect URLs and wildcards](/docs/guides/auth/overview#redirect-urls-and-wildcards) to add additional redirect URLs to your project. code: | From aa53334652aadd02ac9e06ca787e7c93cc12178d Mon Sep 17 00:00:00 2001 From: dng Date: Mon, 23 Jan 2023 11:36:39 -0800 Subject: [PATCH 040/111] Update spec/supabase_js_v2.yml --- spec/supabase_js_v2.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/spec/supabase_js_v2.yml b/spec/supabase_js_v2.yml index ee991a3b970..55295bcda74 100644 --- a/spec/supabase_js_v2.yml +++ b/spec/supabase_js_v2.yml @@ -217,7 +217,7 @@ functions: - If you're using phone, you can configure whether you want the user to receive a OTP. - The magic link's destination URL is determined by the [`SITE_URL`](/docs/reference/auth/config#site_url). - See [redirect URLs and wildcards](/docs/guides/auth/overview#redirect-urls-and-wildcards) to add additional redirect URLs to your project. - - Magic links and OTPs share the same implementation. If you wish to send users a one-time-code instead of a magic link, you should [modify the magic link email temlate](https://app.supabase.com/project/_/auth/templates) to include `{{ .Token }}` instead of `{{ .ConfirmationURL }}`. + - Magic links and OTPs share the same implementation. To send users a one-time code instead of a magic link, [modify the magic link email template](https://app.supabase.com/project/_/auth/templates) to include `{{ .Token }}` instead of `{{ .ConfirmationURL }}`. examples: - id: sign-in-with-email name: Sign in with email From aeaf89d7c4912cbecd3d200fa06a4a2dcd7a14b7 Mon Sep 17 00:00:00 2001 From: oliviamiannone <82397941+oliviamiannone@users.noreply.github.com> Date: Mon, 23 Jan 2023 22:00:41 +0000 Subject: [PATCH 041/111] updates for UX changes --- .../pages/guides/integrations/estuary.mdx | 38 ++++++++++--------- 1 file changed, 20 insertions(+), 18 deletions(-) diff --git a/apps/docs/pages/guides/integrations/estuary.mdx b/apps/docs/pages/guides/integrations/estuary.mdx index e8287eaff62..caf009aa2b0 100644 --- a/apps/docs/pages/guides/integrations/estuary.mdx +++ b/apps/docs/pages/guides/integrations/estuary.mdx @@ -18,7 +18,7 @@ Once created, the pipeline backfills all your historical data from Firestore and Before you begin, you'll need: -- An [Estuary account](https://go.estuary.dev/sign-up). +- An Estuary account. [Head to the web app to start for free.](https://dashboard.estuary.dev). - For your Firestore database: @@ -31,34 +31,32 @@ Before you begin, you'll need: You'll start by creating a **capture**, a task in Flow that connects to your data source system: in this case, Firestore. This process will create one or more data **collections**, backed by a real-time data lake. -1. Go to the Flow web application at [dashboard.estuary.dev](http://dashboard.estuary.dev) and sign in using the credentials provided by your Estuary account manager. +1. Go to the [**Captures** tab](https://dashboard.estuary.dev/captures) of the Flow web app and choose **New Capture**. -2. Click the **Captures** tab and choose **New Capture**. - -3. Locate and select the **Google Firestore** card. +2. Locate and select the **Google Firestore** card. A form appears with the properties required for a Firestore capture. -4. Set a name for your capture. +3. Set a name for your capture. Click inside the **Name** field to generate a drop-down menu of available **prefixes** and select one (likely, this will be the name of your organization). Append a unique capture name after the `/` to create the full name, for example, `acmeCo/myFirestoreCapture`. -5. Fill out the required properties for Firestore. +4. Fill out the required properties for Firestore. - **Database**: Flow can autodetect the database name, but you may optionally specify it here. This is helpful if the service account used has access to multiple Firebase projects. Your database name usually follows the format `projects/$PROJECTID/databases/(default)`. - **Credentials**: The JSON service account key created per the prerequisites. -6. Click **Discover Endpoint**. +5. Click **Next**. -Flow uses the provided configuration to initiate a connection with Firestore. It generates a capture specification and details of the collections that it will create, once published. +Flow uses the provided configuration to initiate a connection with Firestore. It maps each collection in the Firestore database to a Flow collection. -7. Use the **Specification Editor** to view the [JSON schemas](https://docs.estuary.dev/concepts/schemas/) for each collection and make sure they are formatted correctly for your needs. If they're not, you can edit them. +6. Optionally, use the **Collection Selector** to remove any collections you don't need to migrate to Supabase. -8. Click **Save and publish**. +7. Click **Save and Publish**. You'll see a notification when the capture publishes successfully. -The data currently in your Firestore database has been captured, and future updates to it will be captured continuously. +The data currently in your Firestore database has been captured to Flow, and future updates to it will be captured continuously. Click **Materialize Collections** to continue. @@ -72,21 +70,25 @@ A form appears with the properties required for a Postgres materialization. 2. Choose a unique name for your materialization like you did when naming your capture; for example, `acmeCo/mySupabaseMaterialization`. -3. Fill out the required properties for PostgreSQL. You can find most of these in Supabase by going to the **Settings** section and clicking **Database**. +3. Fill out the required properties for Postgres. You can find most of these in Supabase by going to the **Settings** section and clicking **Database**. - **Address**: Format at `:`. - **User**: Usually, this is `postgres`. - **Password**: The password you set when you created your Supabase project. -4. Scroll down to view the **Collection Selector** and fill in the **Table** field for each collection. +4. Click **Next**. -The collections you just created have already been selected, but you must provide names for the tables to which they'll be materialized. +Flow initiates a connection with the database, and the **Collection Selector** expands. +It's populated with your collections from Firestore, each mapped to a Postgres table. -5. Click **Discover Endpoint**. +5. For each collection, apply a stricter JSON schema. +This ensure that the less-structured Firestore data will be written to a Postgres table in the correct shape. -Flow uses the provided configuration to initiate a connection to your Supabase Postgres database and generate a specification. + - In the Collection Selector, choose a collection and click its **Specification** tab. + - Click **Schema Inference**. Flow scans the data in your collection and infers a new schema to use for materialization. + - Review the new schema and click **Apply Inferred Schema**. -6. Click **Save and Publish**. You'll see a notification when the full materialization publishes successfully. +6. Click **Save and Publish**. You'll see a notification when the materialization publishes successfully. Your Firestore collections are copied to tables in Supabase. As long as you leave the capture and materialation running, any changes to the Firestore data will be reflected in Supabase in milliseconds. From 9fe234da662ed18acd4a6f0e10c9309736fb8e4e Mon Sep 17 00:00:00 2001 From: dng Date: Mon, 23 Jan 2023 15:34:16 -0800 Subject: [PATCH 042/111] redirectTo -> emailRedirectTo --- spec/supabase_js_v2.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/spec/supabase_js_v2.yml b/spec/supabase_js_v2.yml index e5e6dae18e0..6c4195737fd 100644 --- a/spec/supabase_js_v2.yml +++ b/spec/supabase_js_v2.yml @@ -156,7 +156,7 @@ functions: password: 'example-password', }) ``` - - id: sign-up-with-additional-user-metadata. + - id: sign-up-with-additional-user-metadata name: Sign up with additional user metadata isSpotlight: false code: | @@ -185,7 +185,7 @@ functions: email: 'example@email.com', password: 'example-password', options: { - redirectTo: 'https://example.com/welcome' + emailRedirectTo: 'https://example.com/welcome' } } ) From 8f49fc635cfe1722ad96447be287d5e6d5bdfaa4 Mon Sep 17 00:00:00 2001 From: Andrew Smith Date: Tue, 24 Jan 2023 00:21:40 +0000 Subject: [PATCH 043/111] Add quickstart for SvelteKit --- .../NavigationMenu.constants.ts | 1 + .../getting-started/quickstarts/sveltekit.mdx | 166 ++++++++++++++++++ 2 files changed, 167 insertions(+) create mode 100644 apps/docs/pages/guides/getting-started/quickstarts/sveltekit.mdx diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts index 40ceb4f47e2..c55fd5fc084 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts @@ -48,6 +48,7 @@ export const gettingstarted = { { name: 'ReactJS', url: '/guides/getting-started/quickstarts/reactjs', items: [] }, { name: 'NextJS', url: '/guides/getting-started/quickstarts/nextjs', items: [] }, { name: 'Flutter', url: '/guides/getting-started/quickstarts/flutter', items: [] }, + { name: 'SvelteKit', url: '/guides/getting-started/quickstarts/sveltekit', items: [] }, ], }, { diff --git a/apps/docs/pages/guides/getting-started/quickstarts/sveltekit.mdx b/apps/docs/pages/guides/getting-started/quickstarts/sveltekit.mdx new file mode 100644 index 00000000000..d9042eeab47 --- /dev/null +++ b/apps/docs/pages/guides/getting-started/quickstarts/sveltekit.mdx @@ -0,0 +1,166 @@ +import Layout from '~/layouts/DefaultGuideLayout' +import StepHikeCompact from '~/components/StepHikeCompact' + +export const meta = { + title: 'Use Supabase with SvelteKit', + subtitle: + 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a SvelteKit app.', + breadcrumb: 'Framework Quickstarts', +} + + + + + + + [Create a new project](https://app.supabase.com) in the Supabase Dashboard. + + After your project is ready, create a table in your Supabase database using the [SQL Editor](https://app.supabase.com/project/_/sql) in the Dashboard. Use the following SQL statement to create a `countries` table with some sample data. + + + + + + ```sql SQL_EDITOR + -- Create the table + CREATE TABLE countries ( + id SERIAL PRIMARY KEY, + name VARCHAR(255) NOT NULL + ); + -- Insert some sample data into the table + INSERT INTO countries (name) VALUES ('United States'); + INSERT INTO countries (name) VALUES ('Canada'); + INSERT INTO countries (name) VALUES ('Mexico'); + ```` + + + + + + + + + + Create a SvelteKit app using the `npm create` command. + + + + + + ```bash Terminal + npm create svelte@latest myapp + ``` + + + + + + + + + The fastest way to get started is to use the `supabase-js` client library which provides a convenient interface for working with Supabase from a SvelteKit app. + + Navigate to the SvelteKit app and install `supabase-js`. + + + + + + ```bash Terminal + cd my-app && npm install @supabase/supabase-js + ``` + + + + + + + + + Create a `/src/lib` directory of your SvelteKit app, create a file called `supabaseClient.js` and add the following code to initialize the Supabase client with your [project URL and public API (anon) key](https://app.supabase.com/project/_/settings/api). + + + + + + ```js src/lib/supabaseClient.js + import { createClient } from '@supabase/supabase-js' + + export const supabase = createClient('https://.supabase.co', '') + ``` + + + + + + + + + Use `load` method to fetch the data server-side and display the query results as a simple list. + + Create `+page.server.js` file in the `routes` directory with the following code. + + + + + + ```js src/routes/+page.server.js + import { supabase } from "$lib/supabaseClient"; + + export async function load() { + const { data } = await supabase.from("countries").select(); + return { + countries: data ?? [], + }; + } + ``` + + + + + + Replace the existing content in your `+page.svelte` file in the `routes` directory with the following code. + + + + + + ```svelte src/routes/+page.svelte + + +
    + {#each countries as country} +
  • {country.name}
  • + {/each} +
+ ``` + +
+ +
+ + + + + Start the app, go to http://localhost:5173 in a browser, and open the browser console and you should see the list of countries. + + + + + + ```bash Terminal + npm run dev + ``` + + + + +
+ +export const Page = ({ children }) => + +export default Page From 8725ec8f52904829d2b0dcdc10c36bf90b9743c9 Mon Sep 17 00:00:00 2001 From: dannykng Date: Mon, 23 Jan 2023 16:31:08 -0800 Subject: [PATCH 044/111] Add SvelteKit quickstart to homepage --- apps/docs/pages/index.mdx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/apps/docs/pages/index.mdx b/apps/docs/pages/index.mdx index 5de1c11462e..fbe5ab73c4e 100644 --- a/apps/docs/pages/index.mdx +++ b/apps/docs/pages/index.mdx @@ -61,7 +61,7 @@ export const meta = {
-
From bc23c6ade92a533a71107b9c4f0368c4fa741880 Mon Sep 17 00:00:00 2001 From: dng Date: Mon, 23 Jan 2023 17:18:40 -0800 Subject: [PATCH 045/111] Fix indentation in ordered lists --- .../pages/guides/integrations/estuary.mdx | 31 ++++++++++--------- 1 file changed, 17 insertions(+), 14 deletions(-) diff --git a/apps/docs/pages/guides/integrations/estuary.mdx b/apps/docs/pages/guides/integrations/estuary.mdx index caf009aa2b0..3787071382a 100644 --- a/apps/docs/pages/guides/integrations/estuary.mdx +++ b/apps/docs/pages/guides/integrations/estuary.mdx @@ -18,7 +18,7 @@ Once created, the pipeline backfills all your historical data from Firestore and Before you begin, you'll need: -- An Estuary account. [Head to the web app to start for free.](https://dashboard.estuary.dev). +- An Estuary account. [Head to the web app to start for free](https://dashboard.estuary.dev). - For your Firestore database: @@ -43,22 +43,23 @@ You'll start by creating a **capture**, a task in Flow that connects to your dat 4. Fill out the required properties for Firestore. - - **Database**: Flow can autodetect the database name, but you may optionally specify it here. This is helpful if the service account used has access to multiple Firebase projects. Your database name usually follows the format `projects/$PROJECTID/databases/(default)`. - - **Credentials**: The JSON service account key created per the prerequisites. + **Database**: Flow can autodetect the database name, but you may optionally specify it here. This is helpful if the service account used has access to multiple Firebase projects. Your database name usually follows the format `projects/$PROJECTID/databases/(default)`. + + **Credentials**: The JSON service account key created per the prerequisites. 5. Click **Next**. -Flow uses the provided configuration to initiate a connection with Firestore. It maps each collection in the Firestore database to a Flow collection. + Flow uses the provided configuration to initiate a connection with Firestore. It maps each collection in the Firestore database to a Flow collection. 6. Optionally, use the **Collection Selector** to remove any collections you don't need to migrate to Supabase. 7. Click **Save and Publish**. -You'll see a notification when the capture publishes successfully. + You'll see a notification when the capture publishes successfully. -The data currently in your Firestore database has been captured to Flow, and future updates to it will be captured continuously. + The data currently in your Firestore database has been captured to Flow, and future updates to it will be captured continuously. -Click **Materialize Collections** to continue. + Click **Materialize Collections** to continue. ## Step 2: Materialize your collections to Postgres @@ -72,17 +73,19 @@ A form appears with the properties required for a Postgres materialization. 3. Fill out the required properties for Postgres. You can find most of these in Supabase by going to the **Settings** section and clicking **Database**. - - **Address**: Format at `:`. - - **User**: Usually, this is `postgres`. - - **Password**: The password you set when you created your Supabase project. + **Address**: Format at `:`. + + **User**: Usually, this is `postgres`. + + **Password**: The password you set when you created your Supabase project. 4. Click **Next**. -Flow initiates a connection with the database, and the **Collection Selector** expands. -It's populated with your collections from Firestore, each mapped to a Postgres table. + Flow initiates a connection with the database and the **Collection Selector** expands. + It's populated with your collections from Firestore, each mapped to a Postgres table. 5. For each collection, apply a stricter JSON schema. -This ensure that the less-structured Firestore data will be written to a Postgres table in the correct shape. + This ensure that the less-structured Firestore data will be written to a Postgres table in the correct shape. - In the Collection Selector, choose a collection and click its **Specification** tab. - Click **Schema Inference**. Flow scans the data in your collection and infers a new schema to use for materialization. @@ -90,7 +93,7 @@ This ensure that the less-structured Firestore data will be written to a Postgre 6. Click **Save and Publish**. You'll see a notification when the materialization publishes successfully. -Your Firestore collections are copied to tables in Supabase. As long as you leave the capture and materialation running, any changes to the Firestore data will be reflected in Supabase in milliseconds. + Your Firestore collections are copied to tables in Supabase. As long as you leave the capture and materialation running, any changes to the Firestore data will be reflected in Supabase in milliseconds. ## Resources From 48ff6bd81825c699151a94b71eb149ad6d008f91 Mon Sep 17 00:00:00 2001 From: dng Date: Mon, 23 Jan 2023 17:20:17 -0800 Subject: [PATCH 046/111] Update apps/docs/pages/guides/integrations/estuary.mdx --- apps/docs/pages/guides/integrations/estuary.mdx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/apps/docs/pages/guides/integrations/estuary.mdx b/apps/docs/pages/guides/integrations/estuary.mdx index 3787071382a..08afe6baeac 100644 --- a/apps/docs/pages/guides/integrations/estuary.mdx +++ b/apps/docs/pages/guides/integrations/estuary.mdx @@ -87,9 +87,11 @@ A form appears with the properties required for a Postgres materialization. 5. For each collection, apply a stricter JSON schema. This ensure that the less-structured Firestore data will be written to a Postgres table in the correct shape. - - In the Collection Selector, choose a collection and click its **Specification** tab. - - Click **Schema Inference**. Flow scans the data in your collection and infers a new schema to use for materialization. - - Review the new schema and click **Apply Inferred Schema**. + In the Collection Selector, choose a collection and click its **Specification** tab. + + Click **Schema Inference**. Flow scans the data in your collection and infers a new schema to use for materialization. + + Review the new schema and click **Apply Inferred Schema**. 6. Click **Save and Publish**. You'll see a notification when the materialization publishes successfully. From abd0689ac99191ca1501a2e75de2f05b23e8a8e2 Mon Sep 17 00:00:00 2001 From: dng Date: Mon, 23 Jan 2023 17:21:59 -0800 Subject: [PATCH 047/111] Spacing --- apps/docs/pages/guides/integrations/estuary.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/docs/pages/guides/integrations/estuary.mdx b/apps/docs/pages/guides/integrations/estuary.mdx index 08afe6baeac..77e52581a5a 100644 --- a/apps/docs/pages/guides/integrations/estuary.mdx +++ b/apps/docs/pages/guides/integrations/estuary.mdx @@ -87,11 +87,11 @@ A form appears with the properties required for a Postgres materialization. 5. For each collection, apply a stricter JSON schema. This ensure that the less-structured Firestore data will be written to a Postgres table in the correct shape. - In the Collection Selector, choose a collection and click its **Specification** tab. + In the Collection Selector, choose a collection and click its **Specification** tab. - Click **Schema Inference**. Flow scans the data in your collection and infers a new schema to use for materialization. + Click **Schema Inference**. Flow scans the data in your collection and infers a new schema to use for materialization. - Review the new schema and click **Apply Inferred Schema**. + Review the new schema and click **Apply Inferred Schema**. 6. Click **Save and Publish**. You'll see a notification when the materialization publishes successfully. From 08b813e8bbb9db3e5bd6e546c3d63649f22e5c0b Mon Sep 17 00:00:00 2001 From: dannykng Date: Mon, 23 Jan 2023 18:27:21 -0800 Subject: [PATCH 048/111] Move CLI guides --- apps/docs/pages/guides/resources.mdx | 14 - apps/docs/pages/guides/supabase-cli.mdx | 120 +++++ .../guides/supabase-cli/local-development.mdx | 267 +++++++++++ .../supabase-cli/managing-environments.mdx | 415 ++++++++++++++++++ 4 files changed, 802 insertions(+), 14 deletions(-) create mode 100644 apps/docs/pages/guides/supabase-cli.mdx create mode 100644 apps/docs/pages/guides/supabase-cli/local-development.mdx create mode 100644 apps/docs/pages/guides/supabase-cli/managing-environments.mdx diff --git a/apps/docs/pages/guides/resources.mdx b/apps/docs/pages/guides/resources.mdx index b1b139020d3..0b2d856b541 100644 --- a/apps/docs/pages/guides/resources.mdx +++ b/apps/docs/pages/guides/resources.mdx @@ -64,20 +64,6 @@ export const meta = {
-
- -
- - ### Supabase CLI - - Develop your project locally, manage your Supabase projects, handle database migrations, CI/CD workflows, and generate types from your database schema, all from the comfort of your Terminal. - -[Learn more](/docs/guides/resources/supabase-cli) - -
- -
- {/* end of container */}
diff --git a/apps/docs/pages/guides/supabase-cli.mdx b/apps/docs/pages/guides/supabase-cli.mdx new file mode 100644 index 00000000000..fcd25f8a582 --- /dev/null +++ b/apps/docs/pages/guides/supabase-cli.mdx @@ -0,0 +1,120 @@ +import Layout from '~/layouts/DefaultGuideLayout' + +export const meta = { + title: 'Supabase CLI', + description: + 'The Supabase CLI provides tools to develop your project locally and deploy to the Supabase Platform.', +} + +The Supabase CLI provides tools to develop your project locally and deploy to the Supabase Platform. +You can also use the CLI to manage your Supabase projects, handle database migrations and CI/CD workflows, and generate types directly from your database schema. + +## Installation + + + + +Install the CLI as dev dependency via [npm](https://www.npmjs.com/package/supabase): + +```sh +npm install supabase --save-dev +``` + + + + +Install the CLI with [Homebrew](https://brew.sh): + +```sh +brew install supabase/tap/supabase +``` + + + + +Install the CLI with [Scoop](https://scoop.sh): + +```powershell +scoop bucket add supabase https://github.com/supabase/scoop-bucket.git +scoop install supabase +``` + + + + +The CLI is available through [Homebrew](https://brew.sh) and Linux packages. + +#### Homebrew + +```sh +brew install supabase/tap/supabase +``` + +#### Linux packages + +Linux packages are provided in [Releases](https://github.com/supabase/cli/releases). +To install, download the `.apk`/`.deb`/`.rpm` file depending on your package manager +and run one of the following: + +- `sudo apk add --allow-untrusted <...>.apk` +- `sudo dpkg -i <...>.deb` +- `sudo rpm -i <...>.rpm` + + + + +## Updates + +When a new [version](https://github.com/supabase/cli/releases) is released, you can update the CLI using the same methods. + + + + +```sh +npm update supabase --save-dev +``` + + + + +```sh +brew upgrade supabase +``` + + + + +```powershell +scoop update supabase +``` + + + + +```sh +brew upgrade supabase +``` + + + + +## See also + +- [Supabase CLI Reference](/docs/reference/cli/introduction) +- [Supabase CLI Configuration](/docs/reference/cli/config) +- [Local Development](/docs/guides/supabase-cli/local-development) +- [Managing Environments](/docs/guides/supabase-cli/managing-environments) + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/supabase-cli/local-development.mdx b/apps/docs/pages/guides/supabase-cli/local-development.mdx new file mode 100644 index 00000000000..b0f45364b52 --- /dev/null +++ b/apps/docs/pages/guides/supabase-cli/local-development.mdx @@ -0,0 +1,267 @@ +import Layout from '~/layouts/DefaultGuideLayout' + +export const meta = { + id: 'local-development', + title: 'Local Development', + description: 'How to use Supabase on your local development machine.', +} + +Learn how to use the Supabase CLI to develop your project locally and deploy to the Supabase Platform. + +
+ +
+ +## Prerequisites + +Make sure you have these installed on your local machine: + +- [Docker](https://docs.docker.com/engine/install/) +- [Git](https://github.com/git-guides/install-git) +- [Supabase CLI](/docs/guides/cli) + +## Log in to the Supabase CLI + +```bash +supabase login +``` + + + +If you installed the Supabase CLI via NPM you may have to use `npx supabase login`. + + + + +## Initialize your project + +Create a new folder for your project and start a new git repository: + +```bash +# create your project folder +mkdir your-project + +# move into the new folder +cd your-project + +# start a new git repository +git init +``` + +## Start Supabase services + +[Initialize](/docs/reference/cli/usage#supabase-init) Supabase to set up the configuration for developing your project locally: + +```bash +supabase init +``` + +Make sure Docker is running. The [start](/docs/reference/cli/usage#supabase-start) command uses Docker to start the Supabase [services](/docs/guides/getting-started/architecture). +This command may take a while to run if this is the first time using the CLI. + +```bash +supabase start +``` + +Once all of the Supabase services are running, you'll see output containing your local Supabase credentials. +You can use the [stop](/docs/reference/cli/usage#supabase-stop) command at any time to stop all services. + +## Access services + +You can access services directly with any Postgres client or through the API Gateway ([Kong](https://github.com/Kong/kong)). + + + + +```sh +# Default URL: +postgresql://postgres:postgres@localhost:54322/postgres +``` + +The local Postgres instance can be accessed through [`psql`](https://www.postgresql.org/docs/current/app-psql.html) +or any other Postgres client, such as [pgadmin](https://www.pgadmin.org/). + +For example: + +```bash +psql 'postgresql://postgres:postgres@localhost:54322/postgres' +``` + + + +To access the database from an edge function in your local Supabase setup, replace `localhost` with `host.docker.internal`. + + + + + + +```sh +# Default URL: +http://localhost:54321 +``` + +If you are accessing these services without the client libraries, you may need to pass the client keys as an `Authorization` header. +Learn more about [JWT headers](/docs/learn/auth-deep-dive/auth-deep-dive-jwts). + +```sh +curl 'http://localhost:54321/rest/v1/' \ + -H "apikey: " \ + -H "Authorization: Bearer " + +http://localhost:54321/rest/v1/ # REST (PostgREST) +http://localhost:54321/realtime/v1/ # Realtime +http://localhost:54321/storage/v1/ # Storage +http://localhost:54321/auth/v1/ # Auth (GoTrue) +``` + + + +`` is provided when you run the command `supabase start`. + + + + + + +## Database migrations + +Database changes are managed through "migrations." Database migrations are a common way of tracking changes to your database over time. + +
+ +
+ +### Make database changes + +For this guide, create a table called `employees`. In Supabase Studio, navigate to the **SQL Editor** page and run the following SQL command: + +```sql +create table employees ( + id integer primary key generated always as identity, + name text +); +``` + + + +You can execute any SQL using the `DB URL` shown by [`supabase status`](/docs/reference/cli/usage#supabase-status). + + + +Run the [`db diff`](/docs/reference/cli/usage#supabase-db-diff) command to detect changes in the local database: + +```sh +supabase db diff create_employees -f create_employees +``` + +This creates a new migration named `supabase/migrations/_create_employees.sql`, representing any changes made to the local database since [`supabase start`](/docs/reference/cli/usage#supabase-start). + +### Add sample data + +Use the seed script in `supabase/seed.sql` (created with [`supabase init`](/docs/reference/cli/usage#supabase-init)) to add sample data to the table. + +```sql +-- in supabase/seed.sql +insert into public.employees (name) +values + ('Erlich Bachman'), + ('Richard Hendricks'), + ('Monica Hall'); +``` + +Rerun the migration and seed scripts: + +```bash +supabase db reset +``` + +You should now see the contents of `employees` in Studio. + +### Reset database changes + +Use the [`reset`](/docs/reference/cli/usage#supabase-db-reset) command to revert any changes to the local database. + +```sql +-- run on local database to make a change +alter table employees + add department text default 'Hooli'; +``` + +Run the following command to reset the local database: + +```sh +supabase db reset +``` + +## Deploy your project + +Go to the [Supabase Dashboard](https://app.supabase.com) and create a project to deploy the changes. + +### Link your project + + + +There are a few commands required to link your project. We are in the process of consolidating these commands into a single command. Bear with us! + + + +Associate your project with your remote project using [`supabase link`](/docs/reference/cli/usage#supabase-link). + +```bash +supabase link --project-ref +# You can get from your project’s dashboard URL: https://app.supabase.com/project/ + +supabase db remote commit +# Capture any changes that you have made to your database before setting up the CLI +``` + +`supabase/migrations` is now populated with a migration in `..._remote_commit.sql`. +This migration captures any changes required for your local database to match the schema of your remote Supabase project. + +### Deploy database changes + +Deploy any local database migrations using [`db push`](/docs/reference/cli/usage#supabase-db-push): + +```sh +supabase db push +``` + +### Deploy Edge Functions + +Deploy any Edge Functions using [`functions deploy`](/docs/reference/cli/usage#supabase-functions-deploy): + +```sh +supabase functions deploy +``` + +## Limitations + +The local development environment is not as feature-complete as the Supabase Platform. Here are some of the differences: + +- The Functions interface is coming soon. +- Logs are not supported through the interface (however you can access them through the Docker containers). +- You cannot update your project settings in the Dashboard—this must be done using the CLI. + +``` + +``` + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/supabase-cli/managing-environments.mdx b/apps/docs/pages/guides/supabase-cli/managing-environments.mdx new file mode 100644 index 00000000000..4f93da230a5 --- /dev/null +++ b/apps/docs/pages/guides/supabase-cli/managing-environments.mdx @@ -0,0 +1,415 @@ +import Layout from '~/layouts/DefaultGuideLayout' + +export const meta = { + id: 'managing-environments', + title: 'Managing Environments', + description: 'How to deploy Supabase schema changes with a CI / CD pipeline.', +} + +## Overview + +The Supabase CLI provides the tools you need to manage multiple environments. +This guide shows you how to set up your local Supabase development environment that integrates with GitHub Actions to automatically +test and release schema changes to staging and production Supabase projects. + +To get started: + +- [Install the Supabase CLI](/docs/guides/cli) +- Create a [Supabase project](https://app.supabase.com) or use an existing one +- Initialize a local Git repository + +
+ +
+ +## Set up a local environment + +The first step is to set up your local repository with the Supabase CLI: + +```bash +supabase init +``` + +You should see a new `supabase` directory. Then you need to link your local repository with your Supabase project: + +```bash +supabase login +supabase link --project-ref $PROJECT_ID +``` + +You can get your `$PROJECT_ID` from your project's dashboard URL: + +``` +https://app.supabase.com/project/ +``` + +If you're using an existing Supabase project, you might have made schema changes through the Dashboard. +Run the following command to pull these changes before making local schema changes from the CLI: + +```sql +supabase db remote commit +``` + +This command creates a new migration in `supabase/migrations/_remote_commit.sql` which reflects the schema changes you have made previously. + +Now commit your local changes to Git and run the local development setup: + +```bash +git add . +git commit -m "init supabase" +supabase start +``` + +You are now ready to develop schema changes locally and create your first migration. + +## Create a new migration + +There are two ways to make schema changes: + +1. Manual migration: Write DDL statements manually into a migration file +1. Auto schema diff: Make changes through Studio UI and auto generate a schema diff + +### Manual migration + +Create a new migration script by running: + +```bash +supabase migration new new_employee +``` + +You should see a new file created: `supabase/migrations/_new_employee.sql`. You can then write SQL statements in this script using a text editor: + +```sql +create table public.employees ( + id integer primary key generated always as identity, + name text +); +``` + +Apply the new migration to your local database: + +```bash +supabase db reset +``` + +This command recreates your local database from scratch and applies all migration scripts under `supabase/migrations` directory. Now your local database is up to date. + + + +The new migration command also supports stdin as input. +This allows you to pipe in an existing script from another file or stdout: + +`supabase migration new new_employee < create_employees_table.sql` + + + +### Auto schema diff + +Unlike manual migrations, auto schema diff creates a new migration script from changes **already** applied to your local database. + +Create an `employees` table under the `public` schema using Studio UI, accessible at [localhost:54323](http://localhost:54323/) by default. + +Next, generate a schema diff by running the following command: + +```bash +supabase db diff -f new_employee +``` + +You should see that a new file `supabase/migrations/_new_employee.sql` is created. Open the file and verify that the generated DDL statements are the same as below. + +```sql +-- This script was generated by the Schema Diff utility in pgAdmin 4 +-- For the circular dependencies, the order in which Schema Diff writes the objects is not very sophisticated +-- and may require manual changes to the script to ensure changes are applied in the correct order. +-- Please report an issue for any failure with the reproduction steps. + +CREATE TABLE IF NOT EXISTS public.employees +( + id integer NOT NULL GENERATED ALWAYS AS IDENTITY ( INCREMENT 1 START 1 MINVALUE 1 MAXVALUE 2147483647 CACHE 1 ), + name text COLLATE pg_catalog."default", + CONSTRAINT employees_pkey PRIMARY KEY (id) +) + +TABLESPACE pg_default; + +ALTER TABLE IF EXISTS public.employees + OWNER to postgres; + +GRANT ALL ON TABLE public.employees TO anon; + +GRANT ALL ON TABLE public.employees TO authenticated; + +GRANT ALL ON TABLE public.employees TO postgres; + +GRANT ALL ON TABLE public.employees TO service_role; +``` + +You may notice that the auto-generated migration script is more verbose than the manually written one. +This is because the default schema diff tool does not account for default privileges added by the initial schema. + +Commit the new migration script to git and you are ready to deploy. + + + +Alternatively, you may pass in the `--use-migra` experimental flag to generate a more concise migration using [migra](https://github.com/djrobstep/migra). +Without the `-f` file flag, the output is written to stdout by default. + +`supabase db diff --use-migra` + + + +## Deploy a migration + +In a production environment, we recommend using a CI/CD pipeline to deploy new migrations with GitHub Actions rather than deploying from your local machine. + +![Deploy migration](/docs/img/guides/cli/cicd-github.png) + +This example uses two Supabase projects, one for production and one for staging. + +Prepare your environments by: + +- Creating separate Supabase projects for staging and production +- Pushing your git repository to GitHub and enabling GitHub Actions + + + +You need a _new_ project for staging. A project which has already been modified to reflect the production project's schema can't be used because the CLI would reapply these changes. + + + +### Configure GitHub Actions + +The Supabase CLI requires a few environment variables to run in non-interactive mode. + +- `SUPABASE_ACCESS_TOKEN` is your personal access token +- `SUPABASE_DB_PASSWORD` is your project specific database password + +We recommend adding these as [encrypted secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets) to your GitHub Actions runners. + +Create the following files inside the `.github/workflows` directory: + + + + +```yaml title=.github/workflows/ci.yml +name: CI + +on: + pull_request: + workflow_dispatch: + +jobs: + test: + runs-on: ubuntu-22.04 + steps: + - uses: actions/checkout@v3 + + - uses: supabase/setup-cli@v1 + + - name: Start Supabase local development setup + run: supabase start + + - name: Verify generated types are up-to-date + run: | + supabase gen types typescript --local > types.ts + if [ "$(git diff --ignore-space-at-eol types.ts | wc -l)" -gt "0" ]; then + echo "Detected uncommitted changes after build. See status below:" + git diff + exit 1 + fi +``` + + + + +```yaml title=.github/workflows/staging.yml +name: Deploy Migrations to Staging + +on: + push: + branches: + - develop + workflow_dispatch: + +jobs: + deploy: + runs-on: ubuntu-22.04 + + env: + SUPABASE_ACCESS_TOKEN: ${{ secrets.SUPABASE_ACCESS_TOKEN }} + SUPABASE_DB_PASSWORD: ${{ secrets.STAGING_DB_PASSWORD }} + STAGING_PROJECT_ID: abcdefghijklmnopqrst + + steps: + - uses: actions/checkout@v3 + + - uses: supabase/setup-cli@v1 + + - run: | + supabase link --project-ref $STAGING_PROJECT_ID + supabase db push +``` + + + + +```yaml title=.github/workflows/production.yml +name: Deploy Migrations to Production + +on: + push: + branches: + - main + workflow_dispatch: + +jobs: + deploy: + runs-on: ubuntu-22.04 + + env: + SUPABASE_ACCESS_TOKEN: ${{ secrets.SUPABASE_ACCESS_TOKEN }} + SUPABASE_DB_PASSWORD: ${{ secrets.PRODUCTION_DB_PASSWORD }} + PRODUCTION_PROJECT_ID: abcdefghijklmnopqrst + + steps: + - uses: actions/checkout@v3 + + - uses: supabase/setup-cli@v1 + + - run: | + supabase link --project-ref $PRODUCTION_PROJECT_ID + supabase db push +``` + + + + +The full example code is available in the [demo repository](https://github.com/supabase/supabase-action-example). + +Commit these files to git and push to your `main` branch on GitHub. Update these environment variables to match your Supabase projects: + +- `SUPABASE_ACCESS_TOKEN` +- `PRODUCTION_PROJECT_ID` +- `PRODUCTION_DB_PASSWORD` +- `STAGING_PROJECT_ID` +- `STAGING_DB_PASSWORD` + +When configured correctly, your repository will have CI and Release workflows that trigger on new commits pushed to `main` and `develop` branches. + +![Correctly configured repo](/docs/img/guides/cli/ci-main.png) + +### Open a PR with new migration + +Follow the [migration steps](#create-a-new-migration) to create a `supabase/migrations/_new_employee.sql` file. + +Checkout a new branch `feat/employee` from `develop` , commit the migration file, and push to GitHub. + +```bash +git checkout -b feat/employee +git add supabase/migrations/_new_employee.sql +git commit -m "Add employee table" +git push --set-upstream origin feat/employee +``` + +Open a PR from `feat/employee` to the `develop` branch to see that the CI workflow has been triggered. + +Once the test error is resolved, merge this PR and watch the deployment in action. + +### Release to production + +After verifying your staging project has successfully migrated, create another PR from `develop` to `main` and merge it to deploy the migration to the production project. + +The `release` job applies all new migration scripts merged in `supabase/migrations` directory to a linked Supabase project. You can control which project the job links to via `PROJECT_ID` environment variable. + +## Troubleshooting + +### Sync production project to staging + +When setting up a new staging project, you might need to sync the initial schema with migrations previously applied to the production project. + +One way is to leverage the Release workflow: + +- Create a new branch `develop` and choose `main` as the branch source +- Push the `develop` branch to GitHub + +The GitHub Actions runner will deploy your existing migrations to the staging project. + +Alternatively, you can also apply migrations through your local CLI to a linked remote database. + +```sql +supabase db push +``` + +Once pushed, check that the migration version is up to date for both local and remote databases. + +```sql +supabase migration list +``` + +### Permission denied on db remote commit + +If you have been using Supabase hosted projects for a long time, you might encounter the following permission error when executing `db remote commit`. + +```bash +Error: Error running pg_dump on remote database: pg_dump: error: query failed: ERROR: permission denied for table _type + +pg_dump: error: query was: LOCK TABLE "graphql"."_type" IN ACCESS SHARE MODE +``` + +To resolve this error, you need to grant `postgres` role permissions to `graphql` schema. You can do that by running the following query from Supabase dashboard's SQL Editor. + +```sql +grant all on all tables in schema graphql to postgres, anon, authenticated, service_role; +grant all on all functions in schema graphql to postgres, anon, authenticated, service_role; +grant all on all sequences in schema graphql to postgres, anon, authenticated, service_role; +``` + +### Permission denied on db push + +If you created a table through Supabase dashboard, and your new migration script contains `ALTER TABLE` statements, you might run into permission error when applying them on staging or production databases. + +```bash +ERROR: must be owner of table employees (SQLSTATE 42501); while executing migration +``` + +This is because tables created through Supabase dashboard are owned by `supabase_admin` role while the migration scripts executed through CLI are under `postgres` role. + +One way to solve this is to reassign the owner of those tables to `postgres` role. For example, if your table is named `users` in the public schema, you can run the following command to reassign owner. + +```sql +ALTER TABLE users OWNER TO postgres; +``` + +Apart from tables, you also need to reassign owner of other entities using their respective commands, including [types](https://www.postgresql.org/docs/current/sql-alterschema.html), [functions](https://www.postgresql.org/docs/current/sql-alterroutine.html), and [schemas](https://www.postgresql.org/docs/current/sql-altertype.html). + +### Rebasing new migrations + +Sometimes your teammate may merge a new migration file to git main branch, and now you need to rebase your local schema changes on top. + +We can handle this scenario gracefully by renaming your old migration file with a new timestamp. + +```bash +git pull +supabase migration new dev_A +# Assume the new file is: supabase/migrations/_dev_A.sql +mv