diff --git a/README.md b/README.md index 304eceed468..f4c8b99e41f 100644 --- a/README.md +++ b/README.md @@ -12,9 +12,9 @@ - [x] Hosted Postgres Database. [Docs](https://supabase.com/docs/guides/database) - [x] Authentication and Authorization. [Docs](https://supabase.com/docs/guides/auth) - [x] Auto-generated APIs. - - [x] REST. [Docs](https://supabase.com/docs/guides/api#rest-api) - - [x] Realtime subscriptions. [Docs](https://supabase.com/docs/guides/api#realtime-api) - - [x] GraphQL (Beta). [Docs](https://supabase.com/docs/guides/api#graphql-api) + - [x] REST. [Docs](https://supabase.com/docs/guides/database/api#rest-api) + - [x] Realtime subscriptions. [Docs](https://supabase.com/docs/guides/database/api#realtime-api) + - [x] GraphQL (Beta). [Docs](https://supabase.com/docs/guides/database/api#graphql-api) - [x] Functions. - [x] Database Functions. [Docs](https://supabase.com/docs/guides/database/functions) - [x] Edge Functions [Docs](https://supabase.com/docs/guides/functions) diff --git a/apps/docs/components/Clippy/Clippy.tsx b/apps/docs/components/Clippy/Clippy.tsx index 8b32b2c042f..8a49e2a9306 100644 --- a/apps/docs/components/Clippy/Clippy.tsx +++ b/apps/docs/components/Clippy/Clippy.tsx @@ -7,24 +7,21 @@ import clippyImage from '../../public/img/clippy.png' import ClippyBubble from './ClippyBubble' import ClippyModal from './ClippyModal' import { useClippy } from './ClippyProvider' -import { useFlag } from '~/hooks/useFlag' + const Clippy: FC = () => { const { isDarkMode } = useTheme() const { isOpen, open, close } = useClippy() - const enableClippy = useFlag('enableClippy') return ( <> {!isOpen && (
- {enableClippy && ( - <> + {/* <>
Clippy
- - )} + */}
)} {isOpen && createPortal(, document.body)} diff --git a/apps/docs/components/MDX/project_setup.mdx b/apps/docs/components/MDX/project_setup.mdx index f1f72f08e64..2003a3a2220 100644 --- a/apps/docs/components/MDX/project_setup.mdx +++ b/apps/docs/components/MDX/project_setup.mdx @@ -2,22 +2,19 @@ import UserManagementSQLTemplate from './user_management_quickstart_sql_template import { Tabs } from 'ui' export const TabPanel = Tabs.Panel -# Project set up +## Project setup -Before we start building we're going to set up our Database and API. This is as simple as starting a new Project in Supabase -and then creating a "schema" inside the database. +Before we start building we're going to set up our Database and API. This is as simple as starting a new Project in Supabase and then creating a "schema" inside the database. -## Create a project +### Create a project -1. Go to [app.supabase.com](https://app.supabase.com). -1. Click on "New Project". +1. [Create a new project](https://app.supabase.com) in the Supabase Dashboard. 1. Enter your project details. 1. Wait for the new database to launch. -## Set up the database schema +### Set up the database schema -Now we are going to set up the database schema. We can use the "User Management Starter" quickstart in the SQL Editor, -or you can just copy/paste the SQL from below and run it yourself. +Now we are going to set up the database schema. We can use the "User Management Starter" quickstart in the SQL Editor, or you can just copy/paste the SQL from below and run it yourself. - - - @@ -48,20 +36,10 @@ or you can just copy/paste the SQL from below and run it yourself. -## Get the API Keys +### Get the API Keys Now that you've created some database tables, you are ready to insert data using the auto-generated API. -We just need to get the URL and `anon` key from the API settings. +We just need to get the Project URL and `anon` key from the API settings. -1. Go to the [Settings](https://app.supabase.com/project/_/settings) page in the Dashboard. -2. Click **API** in the sidebar. -3. Find your API `URL`, `anon`, and `service_role` keys on this page. - - +1. Go to the [API Settings](https://app.supabase.com/project/_/settings/api) page in the Dashboard. +1. Find your Project `URL`, `anon`, and `service_role` keys on this page. diff --git a/apps/docs/components/MDX/quickstart_intro.mdx b/apps/docs/components/MDX/quickstart_intro.mdx index 59e0e01da5c..d20d9f32ece 100644 --- a/apps/docs/components/MDX/quickstart_intro.mdx +++ b/apps/docs/components/MDX/quickstart_intro.mdx @@ -1,9 +1,5 @@ -This example provides the steps to build a basic user management app. It includes: +This tutorial demonstrates how to build a basic user management app. The app authenticates and identifies the user, stores their profile information in the database, and allows the user to log in, update their profile details, and upload a profile photo. The app uses: -- Supabase [Database](/docs/guides/database): a Postgres database for storing your user data. -- Supabase [Auth](/docs/guides/auth): users can sign in with magic links (no passwords, only email). -- Supabase [Storage](/docs/guides/storage): users can upload a photo. -- [Row Level Security](/docs/guides/auth#row-level-security): data is protected so that individuals can only access their own data. -- Instant [APIs](/docs/guides/api): APIs will be automatically generated when you create your database tables. - -By the end of this guide you'll have an app which allows users to login and update some basic profile details: +- [Supabase Database](/docs/guides/database) - a Postgres database for storing your user data and [Row Level Security](/docs/guides/auth#row-level-security) so data is protected and users can only access their own information. +- [Supabase Auth](/docs/guides/auth) - users log in through magic links sent to their email (without having to set up passwords). +- [Supabase Storage](/docs/guides/storage) - users can upload a profile photo. diff --git a/apps/docs/components/Navigation/Navigation.constants.ts b/apps/docs/components/Navigation/Navigation.constants.ts index 1d0f16fd393..94f40fce1ee 100644 --- a/apps/docs/components/Navigation/Navigation.constants.ts +++ b/apps/docs/components/Navigation/Navigation.constants.ts @@ -178,8 +178,8 @@ export const menuItems: NavMenu = { name: 'Serverless APIs', url: undefined, items: [ - { name: 'Overview', url: '/guides/api', items: [] }, - { name: 'Generating Types', url: '/guides/api/generating-types', items: [] }, + { name: 'Overview', url: '/guides/database/api', items: [] }, + { name: 'Generating Types', url: '/guides/database/api/generating-types', items: [] }, ], }, { @@ -278,6 +278,7 @@ export const menuItems: NavMenu = { { name: 'Performance Tuning', url: '/guides/platform/performance', items: [] }, { name: 'Permissions', url: '/guides/platform/permissions', items: [] }, { name: 'Production Readiness', url: '/guides/platform/going-into-prod', items: [] }, + { name: 'SSL Enforcement', url: '/guides/platform/ssl-enforcement', items: [] }, { name: 'Troubleshooting', url: '/guides/platform/troubleshooting', items: [] }, ], }, diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts index f2139f3a407..6354ad15db1 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts +++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts @@ -51,7 +51,7 @@ export const gettingstarted = { { name: 'Framework Quickstarts', items: [ - { name: 'ReactJS', url: '/guides/getting-started/quickstarts/reactjs', items: [] }, + { name: 'React', 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: [] }, @@ -63,7 +63,7 @@ export const gettingstarted = { name: 'Web app tutorials', items: [ { - name: 'Next.js', + name: 'NextJS', url: '/guides/getting-started/tutorials/with-nextjs', items: [], }, @@ -379,8 +379,8 @@ export const database = { name: 'Serverless APIs', url: undefined, items: [ - { name: 'Overview', url: '/guides/api', items: [] }, - { name: 'Generating Types', url: '/guides/api/generating-types', items: [] }, + { name: 'Overview', url: '/guides/database/api', items: [] }, + { name: 'Generating Types', url: '/guides/database/api/generating-types', items: [] }, ], }, { @@ -498,6 +498,7 @@ export const functions = { { name: 'Storage Caching', url: '/guides/functions/examples/storage-caching', items: [] }, { name: 'Stripe Webhooks', url: '/guides/functions/examples/stripe-webhooks', items: [] }, { name: 'Telegram Bot', url: '/guides/functions/examples/telegram-bot', items: [] }, + { name: 'Upstash Redis', url: '/guides/functions/examples/upstash-redis', items: [] }, ], }, ], @@ -586,6 +587,7 @@ export const platform = { { name: 'Network Restrictions', url: '/guides/platform/network-restrictions', items: [] }, { name: 'Performance Tuning', url: '/guides/platform/performance', items: [] }, { name: 'Permissions', url: '/guides/platform/permissions', items: [] }, + { name: 'SSL Enforcement', url: '/guides/platform/ssl-enforcement', items: [] }, ], }, { diff --git a/apps/docs/docs/reference/javascript/v1/generating-types.mdx b/apps/docs/docs/reference/javascript/v1/generating-types.mdx index 033cfdb9165..a46fd7ba70d 100644 --- a/apps/docs/docs/reference/javascript/v1/generating-types.mdx +++ b/apps/docs/docs/reference/javascript/v1/generating-types.mdx @@ -8,7 +8,7 @@ custom_edit_url: https://github.com/supabase/supabase/edit/master/spec/supabase_ import Tabs from '@theme/Tabs' import TabItem from '@theme/TabItem' -Supabase will soon release native type generators that dump your database types for various languages. For now, we support TypeScript [through third-party tools](/docs/guides/api/generating-types). +Supabase will soon release native type generators that dump your database types for various languages. For now, we support TypeScript [through third-party tools](/docs/guides/database/api/generating-types). ## Usage with TypeScript diff --git a/apps/docs/pages/_app.tsx b/apps/docs/pages/_app.tsx index b72ffab2086..e73aa39d38f 100644 --- a/apps/docs/pages/_app.tsx +++ b/apps/docs/pages/_app.tsx @@ -10,7 +10,6 @@ import { SearchProvider } from '~/components/DocSearch' import Favicons from '~/components/Favicons' import SiteLayout from '~/layouts/SiteLayout' import { post } from '~/lib/fetchWrappers' -import FlagProvider from 'components/Flag/FlagProvider' import '../styles/algolia-search.scss' import '../styles/ch.scss' import '../styles/docsearch.scss' @@ -63,42 +62,40 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) { return ( <> - - - - - - - - - - - - - - - + + + + + + + + + + + + + ) } diff --git a/apps/docs/pages/guides/api.mdx b/apps/docs/pages/guides/database/api.mdx similarity index 100% rename from apps/docs/pages/guides/api.mdx rename to apps/docs/pages/guides/database/api.mdx diff --git a/apps/docs/pages/guides/api/generating-types.mdx b/apps/docs/pages/guides/database/api/generating-types.mdx similarity index 100% rename from apps/docs/pages/guides/api/generating-types.mdx rename to apps/docs/pages/guides/database/api/generating-types.mdx diff --git a/apps/docs/pages/guides/database/connecting-to-postgres.mdx b/apps/docs/pages/guides/database/connecting-to-postgres.mdx index 7d1162c6f8d..a92a18dfe09 100644 --- a/apps/docs/pages/guides/database/connecting-to-postgres.mdx +++ b/apps/docs/pages/guides/database/connecting-to-postgres.mdx @@ -28,15 +28,15 @@ You can use these simple questions to determine which connection method to use: ## API -Supabase provides an auto-updating [API](/docs/guides/api). This is the easiest way to get started if you are managing data (fetching, inserting, updating). +Supabase provides an auto-updating [API](/docs/guides/database/api). This is the easiest way to get started if you are managing data (fetching, inserting, updating). ### Interfaces We provides several types of API to suit your preferences and use-case: -- [REST](/docs/guides/api#rest-api): interact with your database through a REST interface. -- [GraphQL](/docs/guides/api#graphql-api): interact with your database through a GraphQL interface. -- [Realtime](/docs/guides/api#realtime-api): listen to database changes over websockets. +- [REST](/docs/guides/database/api#rest-api): interact with your database through a REST interface. +- [GraphQL](/docs/guides/database/api#graphql-api): interact with your database through a GraphQL interface. +- [Realtime](/docs/guides/database/api#realtime-api): listen to database changes over websockets. You cannot manage the database schema via the API (for security reasons). To do that you can use the dashboard or connect directly to your database. diff --git a/apps/docs/pages/guides/database/tables.mdx b/apps/docs/pages/guides/database/tables.mdx index 239e08147cd..13fd0bfa2bd 100644 --- a/apps/docs/pages/guides/database/tables.mdx +++ b/apps/docs/pages/guides/database/tables.mdx @@ -172,7 +172,7 @@ create table movies ( ## Loading data -There are several ways to load data in Supabase. You can load data directly into the database or using the [APIs](../../guides/api). +There are several ways to load data in Supabase. You can load data directly into the database or using the [APIs](../../guides/database/api). Use the "Bulk Loading" instructions if you are loading large data sets. ### Basic data loading diff --git a/apps/docs/pages/guides/functions/examples/upstash-redis.mdx b/apps/docs/pages/guides/functions/examples/upstash-redis.mdx new file mode 100644 index 00000000000..bbe58dd4dd1 --- /dev/null +++ b/apps/docs/pages/guides/functions/examples/upstash-redis.mdx @@ -0,0 +1,90 @@ +import Layout from '~/layouts/DefaultGuideLayout' + +export const meta = { + title: 'Upstash Redis', + description: 'Build an Edge Functions Counter with Upstash Redis.', +} + +A Redis counter example that stores a [hash](https://redis.io/commands/hincrby/) of function invocation count per region. + +## Redis database setup + +Create a Redis database using the [Upstash Console](https://console.upstash.com/) or [Upstash CLI](https://github.com/upstash/cli). + +Select the `Global` type to minimize the latency from all edge locations. Copy the `UPSTASH_REDIS_REST_URL` and `UPSTASH_REDIS_REST_TOKEN` to your .env file. + +You'll find them under **Details > REST API > .env**. + +```bash +cp supabase/functions/upstash-redis-counter/.env.example supabase/functions/upstash-redis-counter/.env +``` + +## Code + +Make sure you have the latest version of the [Supabase CLI installed](/docs/guides/cli#installation). + +Create a new function in your project: + +```bash +supabase functions new upstash-redis-counter +``` + +And add the code to the `index.ts` file: + +```ts index.ts +import { serve } from 'https://deno.land/std@0.177.0/http/server.ts' +import { Redis } from 'https://deno.land/x/upstash_redis@v1.19.3/mod.ts' + +console.log(`Function "upstash-redis-counter" up and running!`) + +serve(async (_req) => { + try { + const redis = new Redis({ + url: Deno.env.get('UPSTASH_REDIS_REST_URL')!, + token: Deno.env.get('UPSTASH_REDIS_REST_TOKEN')!, + }) + + const deno_region = Deno.env.get('DENO_REGION') + if (deno_region) { + // Increment region counter + await redis.hincrby('supa-edge-counter', deno_region, 1) + } else { + // Increment localhost counter + await redis.hincrby('supa-edge-counter', 'localhost', 1) + } + + // Get all values + const counterHash: Record | null = await redis.hgetall('supa-edge-counter') + const counters = Object.entries(counterHash!) + .sort(([, a], [, b]) => b - a) // sort desc + .reduce((r, [k, v]) => ({ total: r.total + v, regions: { ...r.regions, [k]: v } }), { + total: 0, + regions: {}, + }) + + return new Response(JSON.stringify({ counters }), { status: 200 }) + } catch (error) { + return new Response(JSON.stringify({ error: error.message }), { status: 200 }) + } +}) +``` + +## Run locally + +```bash +supabase start +supabase functions serve upstash-redis-counter --no-verify-jwt --env-file supabase/functions/upstash-redis-counter/.env +``` + +Navigate to http://localhost:54321/functions/v1/upstash-redis-counter. + +## Deploy + +```bash +supabase functions deploy upstash-redis-counter --no-verify-jwt +supabase secrets set --env-file supabase/functions/upstash-redis-counter/.env +``` + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/guides/functions/schedule-functions.mdx b/apps/docs/pages/guides/functions/schedule-functions.mdx index b60f910f09a..3339fcab8fa 100644 --- a/apps/docs/pages/guides/functions/schedule-functions.mdx +++ b/apps/docs/pages/guides/functions/schedule-functions.mdx @@ -6,6 +6,15 @@ export const meta = { description: 'Schedule Edge Functions with pg_cron.', } +
+ +
+ The hosted Supabase Platform supports the [`pg_cron` extension](/docs/guides/database/extensions/pgcron), a simple cron-based job scheduler for PostgreSQL that runs inside the database. In combination with the [`pg_net` extension](/docs/guides/database/extensions/pgnet), this allows us to invoke Edge Functions periodically on a set schedule. diff --git a/apps/docs/pages/guides/getting-started.mdx b/apps/docs/pages/guides/getting-started.mdx index 535ee897ec6..820eae29e0c 100644 --- a/apps/docs/pages/guides/getting-started.mdx +++ b/apps/docs/pages/guides/getting-started.mdx @@ -36,7 +36,23 @@ export const meta = { -### Tutorials +### Framework Quickstarts + +
+ {quickstarts.map((item) => { + return ( + + + + {item.description} + + + + ) + })} +
+ +### Web App Tutorials
{webapps.map((item) => { @@ -52,6 +68,46 @@ export const meta = { })}
+### Mobile Tutorials + +
+ {mobile.map((item) => { + return ( + + + + {item.description} + + + + ) + })} +
+ +export const quickstarts = [ + { + title: 'React', + href: '/guides/getting-started/quickstarts/reactjs', + description: + 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a React app.', + icon: '/docs/img/icons/react-icon', + }, + { + title: 'NextJS', + href: '/guides/getting-started/quickstarts/nextjs', + description: + 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a NextJS app.', + icon: '/docs/img/icons/nextjs-icon', + }, + { + title: 'Flutter', + href: '/guides/getting-started/quickstarts/flutter', + description: + 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a Flutter app.', + icon: '/docs/img/icons/flutter-icon', + }, +] + export const webapps = [ { title: 'NextJS', @@ -109,6 +165,9 @@ export const webapps = [ 'Learn how to build a user management app with SvelteKit and Supabase Database, Auth, and Storage functionality.', icon: '/docs/img/icons/svelte-icon', }, +] + +export const mobile = [ { title: 'Flutter', href: '/guides/getting-started/tutorials/with-flutter', diff --git a/apps/docs/pages/guides/getting-started/features.mdx b/apps/docs/pages/guides/getting-started/features.mdx index 71fc2953aa1..4cf63f342c0 100755 --- a/apps/docs/pages/guides/getting-started/features.mdx +++ b/apps/docs/pages/guides/getting-started/features.mdx @@ -84,11 +84,11 @@ Build login and registration pages with custom themes. [Docs](/docs/guides/auth/ ### Auto-generated REST API -RESTful APIs are autogenerated from your database, without a single line of code. [Docs](/docs/guides/api#rest-api-overview). +RESTful APIs are autogenerated from your database, without a single line of code. [Docs](/docs/guides/database/api#rest-api-overview). ### Auto-generated GraphQL API -Fast GraphQL APIs using our custom Postgres GraphQL extension. [Docs](/docs/guides/api#graphql-api-overview). +Fast GraphQL APIs using our custom Postgres GraphQL extension. [Docs](/docs/guides/database/api#graphql-api-overview). ### Realtime Database changes diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-angular.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-angular.mdx index ae2870332c2..819cf492c20 100644 --- a/apps/docs/pages/guides/getting-started/tutorials/with-angular.mdx +++ b/apps/docs/pages/guides/getting-started/tutorials/with-angular.mdx @@ -1,19 +1,18 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { - id: 'with-angular', - title: 'Quickstart: Angular', + title: 'Build a User Management App with Angular', description: 'Learn how to use Supabase in your Angular App.', - sidebar_label: 'Angular', } ![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/angular-user-management). + + If you get stuck while working through this guide, refer to the [full example on + GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/angular-user-management). + @@ -192,11 +191,7 @@ export class AuthComponent { />
-
@@ -529,13 +524,8 @@ export class AccountComponent implements OnInit { -## Next steps - At this stage you have a fully functional application! -- Got a question? [Ask here](https://github.com/supabase/supabase/discussions). -- Sign in: [app.supabase.com](https://app.supabase.com) - export const Page = ({ children }) => export default Page diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-expo.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-expo.mdx index 192caa40725..5c47ae577b3 100644 --- a/apps/docs/pages/guides/getting-started/tutorials/with-expo.mdx +++ b/apps/docs/pages/guides/getting-started/tutorials/with-expo.mdx @@ -1,20 +1,18 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { - id: 'with-expo', - title: 'Quickstart: Expo', + title: 'Build a User Management App with Expo', description: 'Learn how to use Supabase in your React Native App.', - sidebar_label: 'Expo', - hide_table_of_contents: false, } ![Supabase User Management example](/docs/img/supabase-flutter-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/expo-user-management). + + If you get stuck while working through this guide, refer to the [full example on + GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/expo-user-management). + @@ -504,13 +502,8 @@ expo prebuild -## Next steps - At this stage you have a fully functional application! -- Got a question? [Ask here](https://github.com/supabase/supabase/discussions). -- Sign in: [app.supabase.com](https://app.supabase.com) - export const Page = ({ children }) => export default Page diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-flutter.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-flutter.mdx index 478390cf7c0..af7ff9fd3e6 100644 --- a/apps/docs/pages/guides/getting-started/tutorials/with-flutter.mdx +++ b/apps/docs/pages/guides/getting-started/tutorials/with-flutter.mdx @@ -1,19 +1,18 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { - id: 'with-flutter', - title: 'Quickstart: Flutter', + title: 'Build a User Management App with Flutter', description: 'Learn how to use Supabase in your Flutter App.', - sidebar_label: 'Flutter', } ![Supabase User Management example](/docs/img/supabase-flutter-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/flutter-user-management). + + If you get stuck while working through this guide, refer to the [full example on + GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/flutter-user-management). + @@ -77,7 +76,7 @@ Add an intent-filter to enable deep linking: ``` -For iOS, edit the ios/Runner/Info.plist file. +For iOS, edit the ios/Runner/Info.plist file. Add CFBundleURLTypes to enable deep linking: @@ -797,14 +796,13 @@ class _AccountPageState extends State { -Congratulations, that is it! You have now built a fully functional user management app using Flutter and Supabase! +Congratulations, you've built a fully functional user management app using Flutter and Supabase! ## See also - [Flutter Tutorial: building a Flutter chat app](https://supabase.com/blog/flutter-tutorial-building-a-chat-app) - [Flutter Tutorial - Part 2: Authentication and Authorization with RLS](https://supabase.com/blog/flutter-authentication-and-authorization-with-rls) - export const Page = ({ children }) => export default Page diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-ionic-angular.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-ionic-angular.mdx index 4616bb796b0..43516ef65f3 100644 --- a/apps/docs/pages/guides/getting-started/tutorials/with-ionic-angular.mdx +++ b/apps/docs/pages/guides/getting-started/tutorials/with-ionic-angular.mdx @@ -1,19 +1,18 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { - id: 'with-ionic-angular', - title: 'Quickstart: Ionic Angular', + title: 'Build a User Management App with Ionic Angular', description: 'Learn how to use Supabase in your Ionic Angular App.', - sidebar_label: 'Ionic Angular', } ![Supabase User Management example](/docs/img/ionic-demos/ionic-angular-account.png) -### GitHub - -Should you get stuck while working through the guide, refer to [this repo](https://github.com/mhartington/supabase-ionic-angular). + + If you get stuck while working through this guide, refer to the [full example on + GitHub](https://github.com/mhartington/supabase-ionic-angular). + @@ -526,14 +525,9 @@ template: ` -## Next steps - At this stage you have a fully functional application! -- Got a question? [Ask here](https://github.com/supabase/supabase/discussions). -- Sign in: [app.supabase.com](https://app.supabase.com) - -## Resources +## See also - [Authentication in Ionic Angular with Supabase](https://supabase.com/blog/authentication-in-ionic-angular) diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-ionic-react.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-ionic-react.mdx index 3c7c9847b96..3e3d261a5e4 100644 --- a/apps/docs/pages/guides/getting-started/tutorials/with-ionic-react.mdx +++ b/apps/docs/pages/guides/getting-started/tutorials/with-ionic-react.mdx @@ -1,19 +1,18 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { - id: 'with-ionic-react', - title: 'Quickstart: Ionic React', + title: 'Build a User Management App with Ionic React', description: 'Learn how to use Supabase in your Ionic React App.', - sidebar_label: 'Ionic React', } ![Supabase User Management example](/docs/img/ionic-demos/ionic-angular-account.png) -### GitHub - -Should you get stuck while working through the guide, refer to [this repo](https://github.com/mhartington/supabase-ionic-react). + + If you get stuck while working through this guide, refer to the [full example on + GitHub](https://github.com/mhartington/supabase-ionic-react). + @@ -499,13 +498,8 @@ return ( -## Next steps - At this stage you have a fully functional application! -- Got a question? [Ask here](https://github.com/supabase/supabase/discussions). -- Sign in: [app.supabase.com](https://app.supabase.com) - export const Page = ({ children }) => export default Page diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-ionic-vue.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-ionic-vue.mdx index b5599980212..dc884f9d8d5 100644 --- a/apps/docs/pages/guides/getting-started/tutorials/with-ionic-vue.mdx +++ b/apps/docs/pages/guides/getting-started/tutorials/with-ionic-vue.mdx @@ -1,19 +1,18 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { - id: 'with-ionic-vue', - title: 'Quickstart: Ionic Vue', + title: 'Build a User Management App with Ionic Vue', description: 'Learn how to use Supabase in your Ionic Vue App.', - sidebar_label: 'Ionic Vue', } ![Supabase User Management example](/docs/img/ionic-demos/ionic-angular-account.png) -### GitHub - -Should you get stuck while working through the guide, refer to [this repo](https://github.com/mhartington/supabase-ionic-vue). + + If you get stuck while working through this guide, refer to the [full example on + GitHub](https://github.com/mhartington/supabase-ionic-vue). + @@ -559,13 +558,8 @@ export default defineComponent({ -## Next steps - At this stage you have a fully functional application! -- Got a question? [Ask here](https://github.com/supabase/supabase/discussions). -- Sign in: [app.supabase.com](https://app.supabase.com) - export const Page = ({ children }) => export default Page diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-nextjs.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-nextjs.mdx index a63a164a42b..bbee6933442 100644 --- a/apps/docs/pages/guides/getting-started/tutorials/with-nextjs.mdx +++ b/apps/docs/pages/guides/getting-started/tutorials/with-nextjs.mdx @@ -1,10 +1,8 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { - id: 'with-nextjs', - title: 'Quickstart: Next.js', + title: 'Build a User Management App with NextJS', description: 'Learn how to use Supabase in your Next App.', - sidebar_label: 'Next.js', video: 'https://www.youtube.com/v/0Fs96oZ4se0', } @@ -12,7 +10,7 @@ export const meta = { ![Supabase User Management example](/docs/img/user-management-demo.png) -### Video Guide +## Video Guide
-### 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). + + If you get stuck while working through this guide, refer to the [full example on + GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/nextjs-ts-user-management). + @@ -723,17 +722,15 @@ return ( -## 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](/docs/guides/auth/auth-helpers/auth-ui). -- Explore the [Auth Helpers for Next.js](/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) +## See also + +- 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](/docs/guides/auth/auth-helpers/auth-ui) +- Explore the [Auth Helpers for Next.js](/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 export const Page = ({ children }) => diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-nuxt-3.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-nuxt-3.mdx index 3975ab33dcf..be8fcf69c34 100644 --- a/apps/docs/pages/guides/getting-started/tutorials/with-nuxt-3.mdx +++ b/apps/docs/pages/guides/getting-started/tutorials/with-nuxt-3.mdx @@ -1,19 +1,18 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { - id: 'with-nuxt-3', - title: 'Quickstart: Nuxt 3', + title: 'Build a User Management App with Nuxt 3', description: 'Learn how to use Supabase in your Nuxt 3 App.', - sidebar_label: 'Nuxt 3', } ![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/nuxt3-user-management). + + If you get stuck while working through this guide, refer to the [full example on + GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/nuxt3-user-management). + @@ -434,18 +433,11 @@ async function signOut() { ``` -That is it! You should now be able to upload a profile photo to Supabase Storage. - ### Storage management -## Next steps - -At this stage you have a fully functional application! - -- Got a question? [Ask here](https://github.com/supabase/supabase/discussions). -- Sign in: [app.supabase.com](https://app.supabase.com) +That is it! You should now be able to upload a profile photo to Supabase Storage and you have a fully functional application. export const Page = ({ children }) => diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-react.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-react.mdx index 981c7b33d9b..73c30cd56cb 100644 --- a/apps/docs/pages/guides/getting-started/tutorials/with-react.mdx +++ b/apps/docs/pages/guides/getting-started/tutorials/with-react.mdx @@ -1,19 +1,18 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { - id: 'with-react', - title: 'Quickstart: React', + title: 'Build a User Management App with React', description: 'Learn how to use Supabase in your React App.', - sidebar_label: 'React', } ![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/react-user-management). + + If you get stuck while working through this guide, refer to the [full example on + GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/react-user-management). + @@ -401,13 +400,8 @@ return ( -## Next steps - At this stage you have a fully functional application! -- Got a question? [Ask here](https://github.com/supabase/supabase/discussions). -- Sign in: [app.supabase.com](https://app.supabase.com) - export const Page = ({ children }) => export default Page diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-redwoodjs.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-redwoodjs.mdx index 2f3e0e9f4a4..cbc647692aa 100644 --- a/apps/docs/pages/guides/getting-started/tutorials/with-redwoodjs.mdx +++ b/apps/docs/pages/guides/getting-started/tutorials/with-redwoodjs.mdx @@ -1,49 +1,19 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { - id: 'with-redwoodjs', - title: 'Quickstart: RedwoodJS', + title: 'Build a User Management App with RedwoodJS', description: 'Learn how to use Supabase in your RedwoodJS App.', - sidebar_label: 'RedwoodJS', } -## Intro - -For the sake of consistency with the other framework Quickstart examples, we'll build a RedwoodJS a little differently than normal. - -We **_won't use_** Prisma to connect to the Supabase Postgres database or [Prisma migrations](https://redwoodjs.com/docs/cli-commands#prisma-migrate) as one typically might in a Redwood app. -Instead, we'll rely on the Supabase client to do some of the work on the **web** side and use the client again on the **API** side to do data fetching as well. - -That means you will want to refrain from running any `yarn rw prisma migrate` commands and also double check your build commands on deployment to ensure Prisma won't reset your database. - - - -TLDR; Prisma currently doesn't support cross-schema foreign keys, so introspecting the schema fails due to how your Supabase `public` schema references the `auth.users`. - - - -This example provides the steps to build a simple user management app (from scratch!) using Supabase and [RedwoodJS](https://redwoodjs.com/docs/introduction). It includes: - -- Supabase [Database](/docs/guides/database): a Postgres database for storing your user data. -- Supabase [Auth](/docs/guides/auth): users can sign in with magic links (no passwords, only email). -- Supabase [Storage](/docs/guides/storage): users can upload a photo. -- Instant [APIs](/docs/guides/api): APIs will be automatically generated when you create your database tables. -- [Row Level Security](/docs/guides/auth#row-level-security): data is protected so that individuals can only access their own data. - -By the end of this guide you'll have an app which allows users to login and update some basic profile details: + ![Supabase User Management example](/docs/img/user-management-demo.png) - -Note: For RedwoodJS apps, port will be 8910 - + If you get stuck while working through this guide, refer to the [full example on + GitHub](https://github.com/redwoodjs/redwoodjs-supabase-quickstart). -### GitHub - -If you get stuck at any point, take a look at [this repo](https://github.com/redwoodjs/redwoodjs-supabase-quickstart). - {/* ## Video demo */} {/* Coming soon. */} @@ -84,138 +54,14 @@ The **`web side`** is built with React. Redwood's router makes it simple to map Pages may contain a "Layout" component to wrap content. They also contain "Cells" and regular React components. Cells allow you to declaratively manage the lifecycle of a component that fetches and displays data. - - -For the sake of consistency with the other framework Quickstart examples, we'll build a RedwoodJS a little differently than normal. +For the sake of consistency with the other framework tutorials, we'll build this app a little differently than normal. We **_won't use_** Prisma to connect to the Supabase Postgres database or [Prisma migrations](https://redwoodjs.com/docs/cli-commands#prisma-migrate) as one typically might in a Redwood app. Instead, we'll rely on the Supabase client to do some of the work on the **`web`** side and use the client again on the **`api`** side to do data fetching as well. - +That means you will want to refrain from running any `yarn rw prisma migrate` commands and also double check your build commands on deployment to ensure Prisma won't reset your database. Prisma currently doesn't support cross-schema foreign keys, so introspecting the schema fails due +to how your Supabase `public` schema references the `auth.users`. -## Project set up - -Before we start building we're going to set up our Database and API. This is as simple as starting a new Project in Supabase -and then creating a "schema" inside the database. - - - -When setting up Supabase, you'll interact with your project dashboard. However, most of the RedwoodJS setup steps will interact with the [Redwood CLI](https://redwoodjs.com/docs/cli-commands) to generate routes, pages, components, and more. -So be sure to have a terminal at the ready and in your project directory. - - - -### Create a project - -1. Go to [app.supabase.com](https://app.supabase.com). -1. Click on "New Project". -1. Enter your project details. -1. Wait for the new database to launch. - -### Set up the database schema - -Now we are going to set up the database schema. We can use the "User Management Starter" quickstart in the SQL Editor, -or you can just copy/paste the SQL from below and run it yourself. - - - - -1. Go to the [SQL Editor](https://app.supabase.com/project/_/sql) page in the Dashboard. -2. Click **User Management Starter**. -3. Click **Run**. - - - - - - -```sql --- Create a table for public "profiles" -create table profiles ( - id uuid references auth.users not null, - updated_at timestamp with time zone, - username text unique, - avatar_url text, - website text, - - primary key (id), - unique(username), - constraint username_length check (char_length(username) >= 3) -); - -alter table profiles enable row level security; - -create policy "Public profiles are viewable by everyone." - on profiles for select - using ( true ); - -create policy "Users can insert their own profile." - on profiles for insert - with check ( auth.uid() = id ); - -create policy "Users can update own profile." - on profiles for update - using ( auth.uid() = id ); - --- Set up Realtime! -begin; - drop publication if exists supabase_realtime; - create publication supabase_realtime; -commit; -alter publication supabase_realtime add table profiles; - --- Set up Storage! -insert into storage.buckets (id, name) -values ('avatars', 'avatars'); - -create policy "Avatar images are publicly accessible." - on storage.objects for select - using ( bucket_id = 'avatars' ); - -create policy "Anyone can upload an avatar." - on storage.objects for insert - with check ( bucket_id = 'avatars' ); - -``` - - - - -#### Important Note about Prisma and Migrations - - - -Because this Quick Start does not use Prisma to manage the database schema, seed it, or run migrations, you **need** to take extra care when running some of the typical Redwood CLI commands. - - - -### Get the API Keys - -Now that you've created some database tables, you are ready to insert data using the auto-generated API. -We just need to get the URL as well as the `anon`, `service_role` and `JWT_SECRET` keys from the API settings. - -1. Go to the [API Settings](https://app.supabase.com/project/_/settings/api) page in the Dashboard. -2. Find your API `URL`, `anon`, and `service_role` keys on this page. - - + ## Building the App @@ -291,7 +137,7 @@ And finally, you will also need to save **just** the `web side` environment vari ```bash title=redwood.toml [web] - title = "Supabase Redwood Quickstart" + title = "Supabase Redwood Tutorial" port = 8910 apiProxyPath = "/.redwood/functions" includeEnvironmentVariables = ["SUPABASE_URL", "SUPABASE_KEY"] @@ -343,9 +189,7 @@ yarn rw dev ``` - -Note: You can also use the alias `rw` for `redwood`, as in `yarn rw` to run Redwood CLI commands - + `rw` is an alias for `redwood`, as in `yarn rw` to run Redwood CLI commands. You should see a "Welcome to RedwoodJS" page and a message about not having any pages yet. @@ -365,7 +209,7 @@ yarn rw generate page home / -Note: the slash `/` is important here as it creates a root level route. +The `/` is important here as it creates a root level route. @@ -601,14 +445,10 @@ const Account = () => { export default Account ``` - - -Note: You'll see the use of `useAuth()` several times in the quickstart. Redwood's `useAuth` hook provides convenient ways to access +You'll see the use of `useAuth()` several times. Redwood's `useAuth` hook provides convenient ways to access logIn, logOut, currentUser, and access the `supabase` authenticate client. We'll use it to get an instance of the supabase client to interact with your API. - - ### Update Home Page Now that we have all the components in place, let's update your `HomePage` page to use them: @@ -785,12 +625,10 @@ return ( -## Next steps - At this stage you have a fully functional application! -- Got a question? [Ask here](https://github.com/supabase/supabase/discussions). -- Sign in: [app.supabase.com](https://app.supabase.com) +## See also + - Learn more about [RedwoodJS](https://redwoodjs.com) - Visit the [RedwoodJS Discourse Community](https://community.redwoodjs.com) diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-solidjs.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-solidjs.mdx index eaf47892298..c56047307f9 100644 --- a/apps/docs/pages/guides/getting-started/tutorials/with-solidjs.mdx +++ b/apps/docs/pages/guides/getting-started/tutorials/with-solidjs.mdx @@ -1,19 +1,18 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { - id: 'with-solidjs', - title: 'Quickstart: SolidJS', + title: 'Build a User Management App with SolidJS', description: 'Learn how to use Supabase in your SolidJS App.', - sidebar_label: 'SolidJS', } ![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/solid-user-management). + + If you get stuck while working through this guide, refer to the [full example on + GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/solid-user-management). + @@ -419,13 +418,8 @@ return ( -## Next steps - At this stage you have a fully functional application! -- Got a question? [Ask here](https://github.com/supabase/supabase/discussions). -- Sign in: [app.supabase.com](https://app.supabase.com) - export const Page = ({ children }) => export default Page diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-svelte.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-svelte.mdx index 5195fa8b135..9e362231fa3 100644 --- a/apps/docs/pages/guides/getting-started/tutorials/with-svelte.mdx +++ b/apps/docs/pages/guides/getting-started/tutorials/with-svelte.mdx @@ -1,19 +1,18 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { - id: 'with-svelte', - title: 'Quickstart: Svelte', + title: 'Build a User Management App with Svelte', description: 'Learn how to use Supabase in your Svelte App.', - sidebar_label: 'Svelte', } ![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/svelte-user-management). + + If you get stuck while working through this guide, refer to the [full example on + GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/svelte-user-management). + @@ -372,13 +371,8 @@ And then we can add the widget to the Account page: -## Next steps - At this stage you have a fully functional application! -- Got a question? [Ask here](https://github.com/supabase/supabase/discussions). -- Sign in: [app.supabase.com](https://app.supabase.com) - export const Page = ({ children }) => export default Page diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-sveltekit.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-sveltekit.mdx index 614dac516e2..a99cce9b9d9 100644 --- a/apps/docs/pages/guides/getting-started/tutorials/with-sveltekit.mdx +++ b/apps/docs/pages/guides/getting-started/tutorials/with-sveltekit.mdx @@ -1,19 +1,18 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { - id: 'with-sveltekit', - title: 'Quickstart: SvelteKit', + title: 'Build a User Management App with SvelteKit', description: 'Learn how to use Supabase in your SvelteKit App.', - sidebar_label: 'SvelteKit', } ![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/sveltekit-user-management). + + If you get stuck while working through this guide, refer to the [full example on + GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/sveltekit-user-management). + @@ -438,13 +437,8 @@ And then we can add the widget to the Account page: -## Next steps - At this stage you have a fully functional application! -- Got a question? [Ask here](https://github.com/supabase/supabase/discussions). -- Sign in: [app.supabase.com](https://app.supabase.com) - export const Page = ({ children }) => export default Page diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-vue-3.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-vue-3.mdx index 0420638cb95..5480df2d4aa 100644 --- a/apps/docs/pages/guides/getting-started/tutorials/with-vue-3.mdx +++ b/apps/docs/pages/guides/getting-started/tutorials/with-vue-3.mdx @@ -1,19 +1,18 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { - id: 'with-vue-3', - title: 'Quickstart: Vue 3', + title: 'Build a User Management App with Vue 3', description: 'Learn how to use Supabase in your Vue 3 App.', - sidebar_label: 'Vue 3', } ![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/vue3-user-management). + + If you get stuck while working through this guide, refer to the [full example on + GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/vue3-user-management). + @@ -383,13 +382,8 @@ import Avatar from './Avatar.vue' -## Next steps - At this stage you have a fully functional application! -- Got a question? [Ask here](https://github.com/supabase/supabase/discussions). -- Sign in: [app.supabase.com](https://app.supabase.com) - export const Page = ({ children }) => export default Page diff --git a/apps/docs/pages/guides/integrations/integrations.mdx b/apps/docs/pages/guides/integrations/integrations.mdx index de7a444ec58..a42b311571d 100644 --- a/apps/docs/pages/guides/integrations/integrations.mdx +++ b/apps/docs/pages/guides/integrations/integrations.mdx @@ -16,8 +16,8 @@ The Supabase Marketplace brings together all the tools you need to extend your S Supabase provides several integration points: - The [Postgres connection](/docs/guides/database/connecting-to-postgres). Anything that works with Postgres also works with Supabase projects. -- The [Project REST API](/docs/guides/api#rest-api) & client libraries. -- The [Project GraphQL API](/docs/guides/api#graphql-api). +- The [Project REST API](/docs/guides/database/api#rest-api) & client libraries. +- The [Project GraphQL API](/docs/guides/database/api#graphql-api). - The [Platform API](/docs/reference/api). ## List your integration diff --git a/apps/docs/pages/guides/platform.mdx b/apps/docs/pages/guides/platform.mdx index 8f734fdcd77..7a38fa2b167 100644 --- a/apps/docs/pages/guides/platform.mdx +++ b/apps/docs/pages/guides/platform.mdx @@ -16,7 +16,7 @@ Visit [app.supabase.com](https://app.supabase.com) and sign in to start creating Each project on Supabase comes with: - A dedicated [Postgres database](/docs/guides/database) -- [Auto-generated APIs](/docs/guides/api) +- [Auto-generated APIs](/docs/guides/database/api) - [Auth and user management](/docs/guides/auth) - [Edge Functions](/docs/guides/functions) - [Realtime API](/docs/guides/realtime) diff --git a/apps/docs/pages/guides/platform/logs.mdx b/apps/docs/pages/guides/platform/logs.mdx index 0754840cd7d..f7d0f4d14be 100644 --- a/apps/docs/pages/guides/platform/logs.mdx +++ b/apps/docs/pages/guides/platform/logs.mdx @@ -29,7 +29,7 @@ Supabase provides a logging interface specific to each product. You can use simp > -[API logs](https://app.supabase.com/project/_/database/api-logs) show all network requests and response for the REST and GraphQL [APIs](../../guides/api). +[API logs](https://app.supabase.com/project/_/database/api-logs) show all network requests and response for the REST and GraphQL [APIs](../../guides/database/api). ![API Logs](/docs/img/guides/platform/logs/logs-api.png) diff --git a/apps/docs/pages/guides/platform/network-restrictions.mdx b/apps/docs/pages/guides/platform/network-restrictions.mdx index ce2f320a023..0564d57560a 100644 --- a/apps/docs/pages/guides/platform/network-restrictions.mdx +++ b/apps/docs/pages/guides/platform/network-restrictions.mdx @@ -8,9 +8,7 @@ export const meta = { -Network Restrictions are currently in beta and are being slowly made available to all projects. - -The current iteration of Network Restrictions applies to connections to Postgres and PgBouncer. Support for restricting connections to PostgREST, Storage, and Auth will be added at a later date. +Network Restrictions is currently in beta and is slowly being made available to all projects. [Contact support](https://app.supabase.com/support/new) if you'd like to request early access. @@ -20,6 +18,7 @@ To get started: 1. [Install](/docs/guides/cli) the Supabase CLI 1.22.0+. 1. [Log in](/docs/guides/cli/local-development#log-in-to-the-supabase-cli) to your Supabase account using the CLI. +1. If your project was created before 23rd December 2022, it will need to be [upgraded to the latest Supabase version](/docs/guides/platform/migrating-and-upgrading-projects) before Network Restrictions can be used. 1. Ensure that you have [Owner or Admin permissions](/docs/guides/platform/access-control#manage-team-members) for the project that you are enabling network restrictions. ## Check restrictions @@ -67,8 +66,8 @@ Restrictions applied successfully: true ## Limitations -1. Network Restrictions do not currently apply to APIs offered over HTTPS (e.g. PostgREST, Storage, Auth). -1. Network Restrictions should not be used if you require you need to connect to your Postgres database using Edge Functions. +- The current iteration of Network Restrictions applies to connections to Postgres and PgBouncer and doesn't currently apply to APIs offered over HTTPS (e.g., PostgREST, Storage, and Auth). +- Network Restrictions should not be used if you need to connect to your Postgres database using Edge Functions. export const Page = ({ children }) => diff --git a/apps/docs/pages/guides/platform/ssl-enforcement.mdx b/apps/docs/pages/guides/platform/ssl-enforcement.mdx new file mode 100644 index 00000000000..ee70d7fbcaf --- /dev/null +++ b/apps/docs/pages/guides/platform/ssl-enforcement.mdx @@ -0,0 +1,58 @@ +import Layout from '~/layouts/DefaultGuideLayout' + +export const meta = { + title: 'Postgres SSL Enforcement', + description: 'Enforce SSL usage for all Postgres connections', +} + + + +Postgres SSL Enforcement is currently in beta and is slowly being made available to all projects. [Contact support](https://app.supabase.com/support/new) if you'd like to request early access. + + + +Your Supabase project supports connecting to the Postgres DB without SSL enabled to maximize client compatibility. For increased security, you can prevent clients from connecting if they're not using SSL. + +SSL enforcement only applies to connections to both Postgres and PgBouncer ("Connection Pooler"); all HTTP APIs offered by Supabase (e.g., PostgREST, Storage, Auth) automatically enforce SSL on all incoming connections. + +To get started: + +1. [Install](/docs/guides/cli) the Supabase CLI 1.37.0+. +1. [Log in](/docs/guides/cli/local-development#log-in-to-the-supabase-cli) to your Supabase account using the CLI. +1. Ensure that you have [Owner or Admin permissions](/docs/guides/platform/access-control#manage-team-members) for the project that you are enabling SSL enforcement. + +## Check enforcement status + +You can use the `get` subcommand of the CLI to check whether SSL is currently being enforced: + +```bash +> supabase ssl-enforcement --project-ref {ref} get --experimental +SSL is being enforced. +``` + +Or similarly, if SSL is not being enforced, you will see: + +```bash +> supabase ssl-enforcement --project-ref {ref} get --experimental +SSL is *NOT* being enforced. +``` + +## Update enforcement + +The `update` subcommand is used to change the SSL enforcement status for your project: + +```bash +> supabase ssl-enforcement --project-ref {ref} update --enable-db-ssl-enforcement --experimental +SSL is now being enforced. +``` + +Similarly, to disable SSL enforcement: + +```bash +> supabase ssl-enforcement --project-ref {ref} update --disable-db-ssl-enforcement --experimental +SSL is *NOT* being enforced. +``` + +export const Page = ({ children }) => + +export default Page diff --git a/apps/docs/pages/index.mdx b/apps/docs/pages/index.mdx index 0f687a9929e..d8aebeb4157 100644 --- a/apps/docs/pages/index.mdx +++ b/apps/docs/pages/index.mdx @@ -125,7 +125,7 @@ export const meta = { md:items-center md:gap-3 ">

Ready to make a fully working app?

-

Follow the step-by-step tutorials.

+

Follow the step-by-step tutorials.

diff --git a/apps/docs/public/sitemap.xml b/apps/docs/public/sitemap.xml index 3e833c6253e..90cd255fc9c 100644 --- a/apps/docs/public/sitemap.xml +++ b/apps/docs/public/sitemap.xml @@ -19,7 +19,7 @@ - https://supabase.com/docs/guides/api + https://supabase.com/docs/guides/database/api weekly 0.5 @@ -109,7 +109,25 @@ - https://supabase.com/docs/guides/api/generating-types + https://supabase.com/docs/new/auth + weekly + 0.5 + + + + https://supabase.com/docs/reference/index + weekly + 0.5 + + + + https://supabase.com/docs/tutorials/nextjs + weekly + 0.5 + + + + https://supabase.com/docs/guides/database/api/generating-types weekly 0.5 diff --git a/apps/www/_alternatives/supabase-vs-firebase.mdx b/apps/www/_alternatives/supabase-vs-firebase.mdx index 0ae182bebcc..ac4f8fd444c 100644 --- a/apps/www/_alternatives/supabase-vs-firebase.mdx +++ b/apps/www/_alternatives/supabase-vs-firebase.mdx @@ -28,7 +28,7 @@ Supabase is an open source firebase alternative, but instead of being built arou At Supabase we’ve always been huge fans of Firebase - so we started adding a few things on top of PostgreSQL in an attempt to reach feature parity, including: -- Auto-generated API - [query your data straight from the client](https://supabase.com/docs/guides/api#rest-api-2). +- Auto-generated API - [query your data straight from the client](https://supabase.com/docs/guides/database/api#rest-api-2). - Realtime - [changes in your data will be streamed directly to your application](https://supabase.com/docs/reference/dart/subscribe). - Auth - [a simple to integrate auth system and SQL based rules engine](https://supabase.com/auth). - Functions - [javascript and typescript functions that deploy out globally](https://supabase.com/edge-functions). diff --git a/apps/www/_alternatives/supabase-vs-heroku-postgres.mdx b/apps/www/_alternatives/supabase-vs-heroku-postgres.mdx index c25b9e4f414..78d2e42dffd 100644 --- a/apps/www/_alternatives/supabase-vs-heroku-postgres.mdx +++ b/apps/www/_alternatives/supabase-vs-heroku-postgres.mdx @@ -12,12 +12,11 @@ toc_depth: 3 Heroku is a cloud application platform that offers managed PostgreSQL as a service. They offer 5 levels of Postgres support from the Hobby Tier up to the Shield Tier, each with different levels of features and pricing. Heroku announced that starting November 28, 2022, they will [stop offering free product plans and will shut down free dynos and data services](https://blog.heroku.com/next-chapter). Since the announcement, developers started migrating their projects to Supabase. - ## What is Supabase? Supabase also offers managed Postgres, the main difference is that with each deployment you also get: -- Auto-generated API - [never write an API again](https://supabase.com/docs/guides/api#rest-api-2) +- Auto-generated API - [never write an API again](https://supabase.com/docs/guides/database/api#rest-api-2) - Realtime - [subscribe to data changes via websockets](https://supabase.com/docs/reference/dart/subscribe) - Auth - [users can log in and out of your application](https://supabase.com/auth) - Functions - [deploy custom logic to the edge](https://supabase.com/edge-functions) @@ -44,7 +43,7 @@ These are some of the key differences between Heroku Postgres and Supabase in te - Supabase is more than just the raw database, it also comes with: - [Connection pooling](https://supabase.com/docs/guides/database/connecting-to-postgres#connection-pool) so that you won’t run out of connections in a serverless environment. - - [Auto-generated APIs](https://supabase.com/docs/guides/api#rest-api-2) based on your schema, so you can communicate with your database directly from the client. + - [Auto-generated APIs](https://supabase.com/docs/guides/database/api#rest-api-2) based on your schema, so you can communicate with your database directly from the client. - [Realtime API](https://supabase.com/docs/reference/dart/subscribe) is useful for when you want to subscribe to changes to your database over websockets. - [Auth API](https://supabase.com/auth) can be used to leverage Postgres’s Row Level Security model, and control access to sensitive data on a per user, or per group level. - [Functions](https://supabase.com/edge-functions) can be deployed out to the edge directly from the Supabase CLI, which means you can run sensitive business logic or transformations in a serverless fashion. diff --git a/apps/www/_blog/2021-10-28-supabase-series-a.mdx b/apps/www/_blog/2021-10-28-supabase-series-a.mdx index 4a5e9a67f48..d25724eb472 100644 --- a/apps/www/_blog/2021-10-28-supabase-series-a.mdx +++ b/apps/www/_blog/2021-10-28-supabase-series-a.mdx @@ -217,7 +217,7 @@ User-facing applications usually require tools beyond just a database and fronte - **File Storage:** for large images and media. Supabase makes all of this easy. Beyond the database we offer [Auth](/docs/guides/auth), -RESTful and Realtime [APIs](/docs/guides/api), a [Storage](/docs/guides/storage) +RESTful and Realtime [APIs](/docs/guides/database/api), a [Storage](/docs/guides/storage) system for large files, and a bunch of other tools - all wrapped up into a simple-to-use Dashboard. ![Supabase Dashboard](/images/blog/series-a/dashboard.png) diff --git a/apps/www/_blog/2021-11-05-supabase-beta-october-2021.mdx b/apps/www/_blog/2021-11-05-supabase-beta-october-2021.mdx index 526f2b8cf11..ca0dc8ca935 100644 --- a/apps/www/_blog/2021-11-05-supabase-beta-october-2021.mdx +++ b/apps/www/_blog/2021-11-05-supabase-beta-october-2021.mdx @@ -89,7 +89,7 @@ Learn about all the exciting features of Auth within Supabase. [Docs](https://su ### API Features -Learn more about the power of PostgREST for RESTful APIs. [Docs](https://supabase.com/docs/guides/api#restful-api). +Learn more about the power of PostgREST for RESTful APIs. [Docs](https://supabase.com/docs/guides/database/api#restful-api).