From a3b7c8f3a72792d9e4cda2ef5cbdc6070ca6e0a4 Mon Sep 17 00:00:00 2001 From: Chris Chinchilla Date: Mon, 15 Dec 2025 16:45:21 +0100 Subject: [PATCH] docs: Check and clarify API keys (#41200) * Update parial * Add partial to quickstarts * Auth section * More * Prettier * Realtime * Add soft links to frameworks * Add tab * Fix typo * More changes * Updates * Prettier --- apps/docs/content/_partials/api_settings.mdx | 6 +++-- .../content/_partials/api_settings_steps.mdx | 6 ++++- .../_partials/kotlin_project_setup.mdx | 3 ++- .../docs/content/_partials/metrics_access.mdx | 4 +-- apps/docs/content/_partials/project_setup.mdx | 3 ++- apps/docs/content/guides/api/api-keys.mdx | 15 +++++++++++ .../content/guides/api/creating-routes.mdx | 26 ++++++++++++------- .../guides/auth/quickstarts/nextjs.mdx | 8 ++++-- .../guides/auth/quickstarts/react-native.mdx | 5 +++- .../content/guides/auth/quickstarts/react.mdx | 8 ++++-- .../with-expo-react-native-social-auth.mdx | 4 +-- .../auth/server-side/creating-a-client.mdx | 2 ++ .../getting-started/quickstarts/flutter.mdx | 2 ++ .../getting-started/quickstarts/hono.mdx | 3 +++ .../quickstarts/ios-swiftui.mdx | 2 ++ .../getting-started/quickstarts/kotlin.mdx | 2 ++ .../getting-started/quickstarts/nextjs.mdx | 2 ++ .../getting-started/quickstarts/nuxtjs.mdx | 1 + .../getting-started/quickstarts/reactjs.mdx | 2 ++ .../getting-started/quickstarts/refine.mdx | 1 + .../getting-started/quickstarts/solidjs.mdx | 2 ++ .../getting-started/quickstarts/sveltekit.mdx | 1 + .../getting-started/quickstarts/vue.mdx | 1 + .../tutorials/with-angular.mdx | 2 +- .../tutorials/with-expo-react-native.mdx | 2 +- .../tutorials/with-flutter.mdx | 2 +- .../tutorials/with-ionic-angular.mdx | 2 +- .../tutorials/with-ionic-react.mdx | 2 +- .../tutorials/with-ionic-vue.mdx | 2 +- .../getting-started/tutorials/with-kotlin.mdx | 2 +- .../getting-started/tutorials/with-nextjs.mdx | 2 +- .../getting-started/tutorials/with-nuxt-3.mdx | 2 +- .../getting-started/tutorials/with-react.mdx | 2 +- .../tutorials/with-redwoodjs.mdx | 2 +- .../getting-started/tutorials/with-refine.mdx | 2 +- .../tutorials/with-solidjs.mdx | 2 +- .../getting-started/tutorials/with-svelte.mdx | 6 ++--- .../tutorials/with-sveltekit.mdx | 2 +- .../getting-started/tutorials/with-swift.mdx | 2 +- .../getting-started/tutorials/with-vue-3.mdx | 2 +- .../content/guides/realtime/broadcast.mdx | 15 ++++++++++- .../docs/content/guides/realtime/presence.mdx | 15 ++++++++++- 42 files changed, 132 insertions(+), 45 deletions(-) diff --git a/apps/docs/content/_partials/api_settings.mdx b/apps/docs/content/_partials/api_settings.mdx index 090ae9ba08..7f19874cef 100644 --- a/apps/docs/content/_partials/api_settings.mdx +++ b/apps/docs/content/_partials/api_settings.mdx @@ -2,15 +2,17 @@ Now that you've created some database tables, you are ready to insert data using the auto-generated API. -To do this, you need to get the Project URL and key. Get the URL from [the API settings section](/dashboard/project/_/settings/api) of a project and the key from the [the API Keys section of a project's Settings page](/dashboard/project/_/settings/api-keys/). +To do this, you need to get the Project URL and key from [the project **Connect** dialog](/dashboard/project/\_?showConnect=true&connectTab={{ .tab }}&framework={{ .framework }}). Supabase is changing the way keys work to improve project security and developer experience. You can [read the full announcement](https://github.com/orgs/supabase/discussions/29260), but in the transition period, you can use both the current `anon` and `service_role` keys and the new publishable key with the form `sb_publishable_xxx` which will replace the older keys. -To get the key values, open [the API Keys section of a project's Settings page](/dashboard/project/_/settings/api-keys/) and do the following: +In most cases, you can get the correct key from [the Project's **Connect** dialog](/dashboard/project/\_?showConnect=true&connectTab={{ .tab }}&framework={{ .framework }}), but if you want a specific key, you can find all keys in [the API Keys section of a Project's Settings page](/dashboard/project/_/settings/api-keys/): - **For legacy keys**, copy the `anon` key for client-side operations and the `service_role` key for server-side operations from the **Legacy API Keys** tab. - **For new keys**, open the **API Keys** tab, if you don't have a publishable key already, click **Create new API Keys**, and copy the value from the **Publishable key** section. + +[Read the API keys docs](/docs/guides/api/api-keys) for a full explanation of all key types and their uses. diff --git a/apps/docs/content/_partials/api_settings_steps.mdx b/apps/docs/content/_partials/api_settings_steps.mdx index dbd3d3cd7e..e3f21307de 100644 --- a/apps/docs/content/_partials/api_settings_steps.mdx +++ b/apps/docs/content/_partials/api_settings_steps.mdx @@ -1,12 +1,16 @@ {/* TODO: How to completely consolidate partials? */} +You can also get the Project URL and key from [the project's **Connect** dialog](/dashboard/project/\_?showConnect=true&connectTab={{ .tab }}&framework={{ .framework }}). + Supabase is changing the way keys work to improve project security and developer experience. You can [read the full announcement](https://github.com/orgs/supabase/discussions/29260), but in the transition period, you can use both the current `anon` and `service_role` keys and the new publishable key with the form `sb_publishable_xxx` which will replace the older keys. -To get the key values, open [the API Keys section of a project's Settings page](/dashboard/project/_/settings/api-keys/) and do the following: +In most cases, you can get the correct key from [the Project's **Connect** dialog](/dashboard/project/\_?showConnect=true&connectTab={{ .tab }}&framework={{ .framework }}), but if you want a specific key, you can find all keys in [the API Keys section of a Project's Settings page](/dashboard/project/_/settings/api-keys/): - **For legacy keys**, copy the `anon` key for client-side operations and the `service_role` key for server-side operations from the **Legacy API Keys** tab. - **For new keys**, open the **API Keys** tab, if you don't have a publishable key already, click **Create new API Keys**, and copy the value from the **Publishable key** section. + +[Read the API keys docs](/docs/guides/api/api-keys) for a full explanation of all key types and their uses. diff --git a/apps/docs/content/_partials/kotlin_project_setup.mdx b/apps/docs/content/_partials/kotlin_project_setup.mdx index 751559eaff..1f32521eef 100644 --- a/apps/docs/content/_partials/kotlin_project_setup.mdx +++ b/apps/docs/content/_partials/kotlin_project_setup.mdx @@ -33,7 +33,8 @@ Now we are going to set up the database schema. You can just copy/paste the SQL -<$Partial path="api_settings.mdx" /> +<$Partial path="api_settings.mdx" variables={{ "framework": "{{ .framework }}", "tab": "{{ .tab }}" }} +/> ### Set up Google authentication diff --git a/apps/docs/content/_partials/metrics_access.mdx b/apps/docs/content/_partials/metrics_access.mdx index bd16c90b34..89cc6cf2cb 100644 --- a/apps/docs/content/_partials/metrics_access.mdx +++ b/apps/docs/content/_partials/metrics_access.mdx @@ -23,7 +23,7 @@ className="rounded-lg border border-foreground/10 bg-surface-100 text-foreground 3. Authenticate with HTTP Basic Auth: - **Username**: `service_role` - - **Password**: a service role secret (JWT) from [**Project Settings > JWT** (opens in a new tab)](/dashboard/project/_/settings/jwt) or any other Secret API key from [**Project Settings > API keys** (opens in a new tab)](/dashboard/project/_/settings/api-keys) + - **Password**: a service role secret (JWT) from [**Project Settings > JWT**](/dashboard/project/_/settings/jwt) or any other Secret API key from [**Project Settings > API keys** (opens in a new tab)](/dashboard/project/_/settings/api-keys) Testing locally is as simple as running `curl` with your service role secret: @@ -34,7 +34,7 @@ className="rounded-lg border border-foreground/10 bg-surface-100 text-foreground You can provision long-lived automation tokens in two ways: - - Create an account access token once at [**Account Settings > Access Tokens (opens in a new tab)**](/dashboard/account/tokens) and reuse it wherever you configure observability tooling. + - Create an account access token once at [**Account Settings > Access Tokens**](/dashboard/account/tokens) and reuse it wherever you configure observability tooling. - **Optional**: programmatically exchange an access token for project API keys via the [Management API ](/docs/reference/api/management-projects-api-keys-retrieve'). ```bash diff --git a/apps/docs/content/_partials/project_setup.mdx b/apps/docs/content/_partials/project_setup.mdx index 3548980bce..f160138831 100644 --- a/apps/docs/content/_partials/project_setup.mdx +++ b/apps/docs/content/_partials/project_setup.mdx @@ -55,4 +55,5 @@ supabase migration new user_management_starter -<$Partial path="api_settings.mdx" /> +<$Partial path="api_settings.mdx" variables={{ "framework": "{{ .framework }}", "tab": "{{ .tab }}" }} +/> diff --git a/apps/docs/content/guides/api/api-keys.mdx b/apps/docs/content/guides/api/api-keys.mdx index 6b32efd7ac..90ae6e7a75 100644 --- a/apps/docs/content/guides/api/api-keys.mdx +++ b/apps/docs/content/guides/api/api-keys.mdx @@ -32,6 +32,21 @@ There are 4 types of API keys that can be used with Supabase: + + +Supabase is changing the way keys work to improve project security and developer experience. You can [read the full announcement](https://github.com/orgs/supabase/discussions/29260), but in the transition period, you can use both the current `anon` and `service_role` keys and the new publishable key with the form `sb_publishable_xxx` which will replace the older keys. + + + +## Where to find keys + +You can find API keys in a couple of different places. + +In most cases, you can get the correct key from [the Project's **Connect** dialog](/dashboard/project/_?showConnect=true), but if you want a specific key, you can find all keys in [the API Keys section of a Project's Settings page](/dashboard/project/_/settings/api-keys/): + +- **For legacy keys**, copy the `anon` key for client-side operations and the `service_role` key for server-side operations from the **Legacy API Keys** tab. +- **For new keys**, open the **API Keys** tab, if you don't have a publishable key already, click **Create new API Keys**, and copy the value from the **Publishable key** section. + ## `anon` and publishable keys The `anon` and publishable keys secure the public components of your application. Public components run in environments where it is impossible to secure any secrets. These include: diff --git a/apps/docs/content/guides/api/creating-routes.mdx b/apps/docs/content/guides/api/creating-routes.mdx index 2e987ce107..7c84e6cc82 100644 --- a/apps/docs/content/guides/api/creating-routes.mdx +++ b/apps/docs/content/guides/api/creating-routes.mdx @@ -52,20 +52,26 @@ create table Every Supabase project has a unique API URL. Your API is secured behind an API gateway which requires an API Key for every request. -1. Go to the [Settings](/dashboard/project/_/settings/general) page in the Dashboard. -2. Click **API** in the sidebar. -3. Find your API `URL`, `anon`, and `service_role` keys on this page. +{/* TODO: Further consolidate partial */} - +To do this, you need to get the Project URL and key from [the project's **Connect** dialog](/dashboard/project/_?showConnect=true). + + + +Supabase is changing the way keys work to improve project security and developer experience. You can [read the full announcement](https://github.com/orgs/supabase/discussions/29260), but in the transition period, you can use both the current `anon` and `service_role` keys and the new publishable key with the form `sb_publishable_xxx` which will replace the older keys. + +In most cases, you can get the correct key from [the Project's **Connect** dialog](/dashboard/project/_?showConnect=true), but if you want a specific key, you can find all keys in [the API Keys section of a Project's Settings page](/dashboard/project/_/settings/api-keys/): + +- **For legacy keys**, copy the `anon` key for client-side operations and the `service_role` key for server-side operations from the **Legacy API Keys** tab. +- **For new keys**, open the **API Keys** tab, if you don't have a publishable key already, click **Create new API Keys**, and copy the value from the **Publishable key** section. + + + +[Read the API keys docs](/docs/guides/api/api-keys) for a full explanation of all key types and their uses. The REST API is accessible through the URL `https://.supabase.co/rest/v1` -Both of these routes require the `anon` key to be passed through an `apikey` header. +Both of these routes require the key to be passed through an `apikey` header. ## Using the API diff --git a/apps/docs/content/guides/auth/quickstarts/nextjs.mdx b/apps/docs/content/guides/auth/quickstarts/nextjs.mdx index a65eb1adca..db5d05ee51 100644 --- a/apps/docs/content/guides/auth/quickstarts/nextjs.mdx +++ b/apps/docs/content/guides/auth/quickstarts/nextjs.mdx @@ -52,9 +52,11 @@ hideToc: true - Rename `.env.example` to `.env.local` and populate with [your project's URL and Key](/dashboard/project/_/settings/api). + Rename `.env.example` to `.env.local` and populate with your Supabase connection variables: - <$Partial path="api_settings_steps.mdx" /> + + + @@ -65,6 +67,8 @@ hideToc: true NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=sb_publishable_... or anon key ``` + <$Partial path="api_settings_steps.mdx" /> + diff --git a/apps/docs/content/guides/auth/quickstarts/react-native.mdx b/apps/docs/content/guides/auth/quickstarts/react-native.mdx index 8e2eccc75b..adf3ad3b5f 100644 --- a/apps/docs/content/guides/auth/quickstarts/react-native.mdx +++ b/apps/docs/content/guides/auth/quickstarts/react-native.mdx @@ -66,7 +66,9 @@ hideToc: true Create a helper file `lib/supabase.ts` that exports a Supabase client using your Project URL and key. - <$Partial path="api_settings_steps.mdx" /> + + + @@ -106,6 +108,7 @@ hideToc: true }) } ``` + <$Partial path="api_settings_steps.mdx" /> diff --git a/apps/docs/content/guides/auth/quickstarts/react.mdx b/apps/docs/content/guides/auth/quickstarts/react.mdx index dc82dd8626..51c35b328f 100644 --- a/apps/docs/content/guides/auth/quickstarts/react.mdx +++ b/apps/docs/content/guides/auth/quickstarts/react.mdx @@ -63,9 +63,12 @@ hideToc: true - Create `.env.local` and populate with your project's URL and Key. + Rename `.env.example` to `.env.local` and populate with your Supabase connection variables: + + + + - <$Partial path="api_settings_steps.mdx" /> @@ -75,6 +78,7 @@ hideToc: true VITE_SUPABASE_URL=your-project-url VITE_SUPABASE_PUBLISHABLE_DEFAULT_KEY=sb_publishable_... or anon key ``` + <$Partial path="api_settings_steps.mdx" /> diff --git a/apps/docs/content/guides/auth/quickstarts/with-expo-react-native-social-auth.mdx b/apps/docs/content/guides/auth/quickstarts/with-expo-react-native-social-auth.mdx index be42dd87c9..2f6e0a9206 100644 --- a/apps/docs/content/guides/auth/quickstarts/with-expo-react-native-social-auth.mdx +++ b/apps/docs/content/guides/auth/quickstarts/with-expo-react-native-social-auth.mdx @@ -16,7 +16,7 @@ If you get stuck while working through this guide, refer to the [full example on -<$Partial path="project_setup.mdx" /> +<$Partial path="project_setup.mdx" variables={{ "framework": "exporeactnative", "tab": "mobiles" }} /> ## Building the app @@ -832,7 +832,7 @@ For more information, follow the [Supabase Login with Apple](/docs/guides/auth/s - + #### Prerequisites Before proceeding, as per the mobile options you need an Apple Service ID. To obtain it you can follow the [Invertase Initial Setup Guide](https://github.com/invertase/react-native-apple-authentication/blob/main/docs/INITIAL_SETUP.md) and the [Invertase Android Setup Guide](https://github.com/invertase/react-native-apple-authentication/blob/main/docs/ANDROID_EXTRA.md) mentioned in the Invertase tab. diff --git a/apps/docs/content/guides/auth/server-side/creating-a-client.mdx b/apps/docs/content/guides/auth/server-side/creating-a-client.mdx index e91b5d24c7..876c643677 100644 --- a/apps/docs/content/guides/auth/server-side/creating-a-client.mdx +++ b/apps/docs/content/guides/auth/server-side/creating-a-client.mdx @@ -45,6 +45,8 @@ Create a `.env.local` file in the project root directory. In the file, set the p +<$Partial path="api_settings_steps.mdx" /> + diff --git a/apps/docs/content/guides/getting-started/quickstarts/flutter.mdx b/apps/docs/content/guides/getting-started/quickstarts/flutter.mdx index b36cbd8f6c..c984a73595 100644 --- a/apps/docs/content/guides/getting-started/quickstarts/flutter.mdx +++ b/apps/docs/content/guides/getting-started/quickstarts/flutter.mdx @@ -79,6 +79,8 @@ hideToc: true } ``` + <$Partial path="api_settings_steps.mdx" variables={{ "framework": "flutter", "tab": "mobiles" }} /> + diff --git a/apps/docs/content/guides/getting-started/quickstarts/hono.mdx b/apps/docs/content/guides/getting-started/quickstarts/hono.mdx index 7efe526cbd..6dde6d2013 100644 --- a/apps/docs/content/guides/getting-started/quickstarts/hono.mdx +++ b/apps/docs/content/guides/getting-started/quickstarts/hono.mdx @@ -61,6 +61,9 @@ hideToc: true cp .env.example .env ``` +{/* TODO: Not ideal for frameworks that have no entry in Connect */} +<$Partial path="api_settings_steps.mdx" variables={{ "framework": "", "tab": "frameworks" }} /> + diff --git a/apps/docs/content/guides/getting-started/quickstarts/ios-swiftui.mdx b/apps/docs/content/guides/getting-started/quickstarts/ios-swiftui.mdx index 2cda6ab608..23114cd443 100644 --- a/apps/docs/content/guides/getting-started/quickstarts/ios-swiftui.mdx +++ b/apps/docs/content/guides/getting-started/quickstarts/ios-swiftui.mdx @@ -58,6 +58,8 @@ hideToc: true ) ``` + <$Partial path="api_settings_steps.mdx" variables={{ "framework": "swift", "tab": "mobiles" }} /> + diff --git a/apps/docs/content/guides/getting-started/quickstarts/kotlin.mdx b/apps/docs/content/guides/getting-started/quickstarts/kotlin.mdx index 1271178623..bb919a5b8c 100644 --- a/apps/docs/content/guides/getting-started/quickstarts/kotlin.mdx +++ b/apps/docs/content/guides/getting-started/quickstarts/kotlin.mdx @@ -98,6 +98,8 @@ hideToc: true ... ``` + <$Partial path="api_settings_steps.mdx" variables={{ "framework": "androidkotlin", "tab": "mobiles" }} /> + diff --git a/apps/docs/content/guides/getting-started/quickstarts/nextjs.mdx b/apps/docs/content/guides/getting-started/quickstarts/nextjs.mdx index a3b42a6c9b..50442f48e5 100644 --- a/apps/docs/content/guides/getting-started/quickstarts/nextjs.mdx +++ b/apps/docs/content/guides/getting-started/quickstarts/nextjs.mdx @@ -58,6 +58,8 @@ hideToc: true + <$Partial path="api_settings_steps.mdx" variables={{ "framework": "nextjs", "tab": "frameworks" }} /> + diff --git a/apps/docs/content/guides/getting-started/quickstarts/nuxtjs.mdx b/apps/docs/content/guides/getting-started/quickstarts/nuxtjs.mdx index 4a0c47a1e2..9e47c024e2 100644 --- a/apps/docs/content/guides/getting-started/quickstarts/nuxtjs.mdx +++ b/apps/docs/content/guides/getting-started/quickstarts/nuxtjs.mdx @@ -84,6 +84,7 @@ hideToc: true ``` + <$Partial path="api_settings_steps.mdx" variables={{ "framework": "nuxt", "tab": "frameworks" }} /> diff --git a/apps/docs/content/guides/getting-started/quickstarts/reactjs.mdx b/apps/docs/content/guides/getting-started/quickstarts/reactjs.mdx index ffafeb5391..a61018b11e 100644 --- a/apps/docs/content/guides/getting-started/quickstarts/reactjs.mdx +++ b/apps/docs/content/guides/getting-started/quickstarts/reactjs.mdx @@ -74,6 +74,8 @@ hideToc: true + <$Partial path="api_settings_steps.mdx" variables={{ "framework": "react", "tab": "frameworks" }} /> + diff --git a/apps/docs/content/guides/getting-started/quickstarts/refine.mdx b/apps/docs/content/guides/getting-started/quickstarts/refine.mdx index 9c0f9783a8..18ca950ee5 100644 --- a/apps/docs/content/guides/getting-started/quickstarts/refine.mdx +++ b/apps/docs/content/guides/getting-started/quickstarts/refine.mdx @@ -100,6 +100,7 @@ hideToc: true }, }); ``` + <$Partial path="api_settings_steps.mdx" variables={{ "framework": "refine", "tab": "frameworks" }} /> diff --git a/apps/docs/content/guides/getting-started/quickstarts/solidjs.mdx b/apps/docs/content/guides/getting-started/quickstarts/solidjs.mdx index a0d82752f2..6043d57f98 100644 --- a/apps/docs/content/guides/getting-started/quickstarts/solidjs.mdx +++ b/apps/docs/content/guides/getting-started/quickstarts/solidjs.mdx @@ -72,6 +72,8 @@ hideToc: true + <$Partial path="api_settings_steps.mdx" variables={{ "framework": "solidjs", "tab": "frameworks" }} /> + diff --git a/apps/docs/content/guides/getting-started/quickstarts/sveltekit.mdx b/apps/docs/content/guides/getting-started/quickstarts/sveltekit.mdx index 071118d0d8..e0e064ec2b 100644 --- a/apps/docs/content/guides/getting-started/quickstarts/sveltekit.mdx +++ b/apps/docs/content/guides/getting-started/quickstarts/sveltekit.mdx @@ -72,6 +72,7 @@ hideToc: true ``` + <$Partial path="api_settings_steps.mdx" variables={{ "framework": "sveltekit", "tab": "frameworks" }} /> diff --git a/apps/docs/content/guides/getting-started/quickstarts/vue.mdx b/apps/docs/content/guides/getting-started/quickstarts/vue.mdx index 0c73a9f5f6..4d4e311d39 100644 --- a/apps/docs/content/guides/getting-started/quickstarts/vue.mdx +++ b/apps/docs/content/guides/getting-started/quickstarts/vue.mdx @@ -73,6 +73,7 @@ hideToc: true ``` + <$Partial path="api_settings_steps.mdx" variables={{ "framework": "vue", "tab": "frameworks" }} /> diff --git a/apps/docs/content/guides/getting-started/tutorials/with-angular.mdx b/apps/docs/content/guides/getting-started/tutorials/with-angular.mdx index 3aa93feb37..fa99b87b17 100644 --- a/apps/docs/content/guides/getting-started/tutorials/with-angular.mdx +++ b/apps/docs/content/guides/getting-started/tutorials/with-angular.mdx @@ -13,7 +13,7 @@ If you get stuck while working through this guide, refer to the [full example on -<$Partial path="project_setup.mdx" /> +<$Partial path="project_setup.mdx" variables={{ "framework": "ionicangular", "tab": "mobiles" }} /> ## Building the app diff --git a/apps/docs/content/guides/getting-started/tutorials/with-expo-react-native.mdx b/apps/docs/content/guides/getting-started/tutorials/with-expo-react-native.mdx index 6521e47307..05fe900af0 100644 --- a/apps/docs/content/guides/getting-started/tutorials/with-expo-react-native.mdx +++ b/apps/docs/content/guides/getting-started/tutorials/with-expo-react-native.mdx @@ -14,7 +14,7 @@ If you get stuck while working through this guide, refer to the [full example on -<$Partial path="project_setup.mdx" /> +<$Partial path="project_setup.mdx" variables={{ "framework": "exporeactnative", "tab": "mobiles" }} /> ## Building the app diff --git a/apps/docs/content/guides/getting-started/tutorials/with-flutter.mdx b/apps/docs/content/guides/getting-started/tutorials/with-flutter.mdx index da29ecd8b2..0ce422ecf8 100644 --- a/apps/docs/content/guides/getting-started/tutorials/with-flutter.mdx +++ b/apps/docs/content/guides/getting-started/tutorials/with-flutter.mdx @@ -14,7 +14,7 @@ If you get stuck while working through this guide, refer to the [full example on -<$Partial path="project_setup.mdx" /> +<$Partial path="project_setup.mdx" variables={{ "framework": "flutter", "tab": "mobiles" }} /> ## Building the app diff --git a/apps/docs/content/guides/getting-started/tutorials/with-ionic-angular.mdx b/apps/docs/content/guides/getting-started/tutorials/with-ionic-angular.mdx index 90aa0eec33..3ee88c2e33 100644 --- a/apps/docs/content/guides/getting-started/tutorials/with-ionic-angular.mdx +++ b/apps/docs/content/guides/getting-started/tutorials/with-ionic-angular.mdx @@ -13,7 +13,7 @@ If you get stuck while working through this guide, refer to the [full example on -<$Partial path="project_setup.mdx" /> +<$Partial path="project_setup.mdx" variables={{ "framework": "ionicangular", "tab": "mobiles" }} /> ## Building the app diff --git a/apps/docs/content/guides/getting-started/tutorials/with-ionic-react.mdx b/apps/docs/content/guides/getting-started/tutorials/with-ionic-react.mdx index 0885c96f44..56ad0ee998 100644 --- a/apps/docs/content/guides/getting-started/tutorials/with-ionic-react.mdx +++ b/apps/docs/content/guides/getting-started/tutorials/with-ionic-react.mdx @@ -13,7 +13,7 @@ If you get stuck while working through this guide, refer to the [full example on -<$Partial path="project_setup.mdx" /> +<$Partial path="project_setup.mdx" variables={{ "framework": "ionicreact", "tab": "mobiles" }} /> ## Building the app diff --git a/apps/docs/content/guides/getting-started/tutorials/with-ionic-vue.mdx b/apps/docs/content/guides/getting-started/tutorials/with-ionic-vue.mdx index 4136c3ed5c..ed80d02077 100644 --- a/apps/docs/content/guides/getting-started/tutorials/with-ionic-vue.mdx +++ b/apps/docs/content/guides/getting-started/tutorials/with-ionic-vue.mdx @@ -13,7 +13,7 @@ If you get stuck while working through this guide, refer to the [full example on -<$Partial path="project_setup.mdx" /> +<$Partial path="project_setup.mdx" variables={{ "framework": "vuejs", "tab": "frameworks" }} /> ## Building the app diff --git a/apps/docs/content/guides/getting-started/tutorials/with-kotlin.mdx b/apps/docs/content/guides/getting-started/tutorials/with-kotlin.mdx index 25dc9824ff..e04e38c96b 100644 --- a/apps/docs/content/guides/getting-started/tutorials/with-kotlin.mdx +++ b/apps/docs/content/guides/getting-started/tutorials/with-kotlin.mdx @@ -17,7 +17,7 @@ If you get stuck while working through this guide, refer to the [full example on -<$Partial path="kotlin_project_setup.mdx" /> +<$Partial path="kotlin_project_setup.mdx" variables={{ "framework": "androidkotlin", "tab": "mobiles" }} /> ## Building the app diff --git a/apps/docs/content/guides/getting-started/tutorials/with-nextjs.mdx b/apps/docs/content/guides/getting-started/tutorials/with-nextjs.mdx index ef89210d43..e34045aac6 100644 --- a/apps/docs/content/guides/getting-started/tutorials/with-nextjs.mdx +++ b/apps/docs/content/guides/getting-started/tutorials/with-nextjs.mdx @@ -14,7 +14,7 @@ If you get stuck while working through this guide, refer to the [full example on -<$Partial path="project_setup.mdx" /> +<$Partial path="project_setup.mdx" variables={{ "framework": "nextjs", "tab": "frameworks" }} /> ## Building the app diff --git a/apps/docs/content/guides/getting-started/tutorials/with-nuxt-3.mdx b/apps/docs/content/guides/getting-started/tutorials/with-nuxt-3.mdx index d4d1c79344..88868969d7 100644 --- a/apps/docs/content/guides/getting-started/tutorials/with-nuxt-3.mdx +++ b/apps/docs/content/guides/getting-started/tutorials/with-nuxt-3.mdx @@ -14,7 +14,7 @@ If you get stuck while working through this guide, refer to the [full example on -<$Partial path="project_setup.mdx" /> +<$Partial path="project_setup.mdx" variables={{ "framework": "nuxt", "tab": "frameworks" }} /> ## Building the app diff --git a/apps/docs/content/guides/getting-started/tutorials/with-react.mdx b/apps/docs/content/guides/getting-started/tutorials/with-react.mdx index a877837bfa..abb433c92e 100644 --- a/apps/docs/content/guides/getting-started/tutorials/with-react.mdx +++ b/apps/docs/content/guides/getting-started/tutorials/with-react.mdx @@ -14,7 +14,7 @@ If you get stuck while working through this guide, refer to the [full example on -<$Partial path="project_setup.mdx" variables={{ "framework": "React" }} /> +<$Partial path="project_setup.mdx" variables={{ "framework": "react", "tab": "frameworks" }} /> ## Building the app diff --git a/apps/docs/content/guides/getting-started/tutorials/with-redwoodjs.mdx b/apps/docs/content/guides/getting-started/tutorials/with-redwoodjs.mdx index 8518040eac..a071af1709 100644 --- a/apps/docs/content/guides/getting-started/tutorials/with-redwoodjs.mdx +++ b/apps/docs/content/guides/getting-started/tutorials/with-redwoodjs.mdx @@ -39,7 +39,7 @@ Instead, we'll rely on the Supabase client to do some of the work on the **`web` 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`. -<$Partial path="project_setup.mdx" /> +<$Partial path="project_setup.mdx" variables={{ "framework": "", "tab": "frameworks" }} /> ## Building the app diff --git a/apps/docs/content/guides/getting-started/tutorials/with-refine.mdx b/apps/docs/content/guides/getting-started/tutorials/with-refine.mdx index ea5e706090..2f7b929dd2 100644 --- a/apps/docs/content/guides/getting-started/tutorials/with-refine.mdx +++ b/apps/docs/content/guides/getting-started/tutorials/with-refine.mdx @@ -25,7 +25,7 @@ It is possible to customize the `authProvider` for Supabase and as we'll see bel -<$Partial path="project_setup.mdx" /> +<$Partial path="project_setup.mdx" variables={{ "framework": "refine", "tab": "frameworks" }} /> ## Building the app diff --git a/apps/docs/content/guides/getting-started/tutorials/with-solidjs.mdx b/apps/docs/content/guides/getting-started/tutorials/with-solidjs.mdx index 9324596329..6eef0ff067 100644 --- a/apps/docs/content/guides/getting-started/tutorials/with-solidjs.mdx +++ b/apps/docs/content/guides/getting-started/tutorials/with-solidjs.mdx @@ -13,7 +13,7 @@ If you get stuck while working through this guide, refer to the [full example on -<$Partial path="project_setup.mdx" /> +<$Partial path="project_setup.mdx" variables={{ "framework": "solidjs", "tab": "frameworks" }} /> ## Building the app diff --git a/apps/docs/content/guides/getting-started/tutorials/with-svelte.mdx b/apps/docs/content/guides/getting-started/tutorials/with-svelte.mdx index 026815a95a..15c69b1c2f 100644 --- a/apps/docs/content/guides/getting-started/tutorials/with-svelte.mdx +++ b/apps/docs/content/guides/getting-started/tutorials/with-svelte.mdx @@ -13,7 +13,7 @@ If you get stuck while working through this guide, refer to the [full example on -<$Partial path="project_setup.mdx" /> +<$Partial path="project_setup.mdx" variables={{ "framework": "sveltekit", "tab": "frameworks" }} /> ## Building the app @@ -73,7 +73,7 @@ meta="name=src/lib/Auth.svelte" After a user is signed in, allow them to edit their profile details and manage their account. Create a new component for that called `Account.svelte`. -<$CodeSample +<$CodeSample path="/user-management/svelte-user-management/src/lib/Account.svelte" lines={[[1, 4], [7, 11], [14, 33], [34,53], [55,73], [75,-1]]} meta="src/lib/Account.svelte" @@ -121,7 +121,7 @@ meta="name=src/lib/Avatar.svelte" And then you can add the widget to the Account page: -<$CodeSample +<$CodeSample path="/user-management/svelte-user-management/src/lib/Account.svelte" lines={[[1,1], [5,5], [71,73], [74,74], [92,-1]]} meta="src/lib/Account.svelte" diff --git a/apps/docs/content/guides/getting-started/tutorials/with-sveltekit.mdx b/apps/docs/content/guides/getting-started/tutorials/with-sveltekit.mdx index ccdc1bcdf5..f83a941e77 100644 --- a/apps/docs/content/guides/getting-started/tutorials/with-sveltekit.mdx +++ b/apps/docs/content/guides/getting-started/tutorials/with-sveltekit.mdx @@ -13,7 +13,7 @@ If you get stuck while working through this guide, refer to the [full example on -<$Partial path="project_setup.mdx" /> +<$Partial path="project_setup.mdx" variables={{ "framework": "sveltekit", "tab": "frameworks" }} /> ## Building the app diff --git a/apps/docs/content/guides/getting-started/tutorials/with-swift.mdx b/apps/docs/content/guides/getting-started/tutorials/with-swift.mdx index da2508ad2b..89177e8ea8 100644 --- a/apps/docs/content/guides/getting-started/tutorials/with-swift.mdx +++ b/apps/docs/content/guides/getting-started/tutorials/with-swift.mdx @@ -13,7 +13,7 @@ If you get stuck while working through this guide, refer to the [full example on -<$Partial path="project_setup.mdx" /> +<$Partial path="project_setup.mdx" variables={{ "framework": "swift", "tab": "mobiles" }} /> ## Building the app diff --git a/apps/docs/content/guides/getting-started/tutorials/with-vue-3.mdx b/apps/docs/content/guides/getting-started/tutorials/with-vue-3.mdx index 1d5185fd93..12e15b09d9 100644 --- a/apps/docs/content/guides/getting-started/tutorials/with-vue-3.mdx +++ b/apps/docs/content/guides/getting-started/tutorials/with-vue-3.mdx @@ -14,7 +14,7 @@ If you get stuck while working through this guide, refer to the [full example on -<$Partial path="project_setup.mdx" /> +<$Partial path="project_setup.mdx" variables={{ "framework": "vuejs", "tab": "frameworks" }} /> ## Building the app diff --git a/apps/docs/content/guides/realtime/broadcast.mdx b/apps/docs/content/guides/realtime/broadcast.mdx index 1623beb441..34f35fee7d 100644 --- a/apps/docs/content/guides/realtime/broadcast.mdx +++ b/apps/docs/content/guides/realtime/broadcast.mdx @@ -33,7 +33,20 @@ You can use the Supabase client libraries to receive Broadcast messages. ### Initialize the client -Go to your Supabase project's [API Settings](/dashboard/project/_/settings/api) and grab the `URL` and `anon` public API key. +{/* TODO: Further consolidate partial */} + +Get the Project URL and key from [the project's **Connect** dialog](/dashboard/project/_?showConnect=true). + + + +Supabase is changing the way keys work to improve project security and developer experience. You can [read the full announcement](https://github.com/orgs/supabase/discussions/29260), but in the transition period, you can use both the current `anon` and `service_role` keys and the new publishable key with the form `sb_publishable_xxx` which will replace the older keys. + +In most cases, you can get the correct key from [the Project's **Connect** dialog](/dashboard/project/_?showConnect=true), but if you want a specific key, you can find all keys in [the API Keys section of a Project's Settings page](/dashboard/project/_/settings/api-keys/): + +- **For legacy keys**, copy the `anon` key for client-side operations and the `service_role` key for server-side operations from the **Legacy API Keys** tab. +- **For new keys**, open the **API Keys** tab, if you don't have a publishable key already, click **Create new API Keys**, and copy the value from the **Publishable key** section. + + + +Supabase is changing the way keys work to improve project security and developer experience. You can [read the full announcement](https://github.com/orgs/supabase/discussions/29260), but in the transition period, you can use both the current `anon` and `service_role` keys and the new publishable key with the form `sb_publishable_xxx` which will replace the older keys. + +In most cases, you can get the correct key from [the Project's **Connect** dialog](/dashboard/project/_?showConnect=true), but if you want a specific key, you can find all keys in [the API Keys section of a Project's Settings page](/dashboard/project/_/settings/api-keys/): + +- **For legacy keys**, copy the `anon` key for client-side operations and the `service_role` key for server-side operations from the **Legacy API Keys** tab. +- **For new keys**, open the **API Keys** tab, if you don't have a publishable key already, click **Create new API Keys**, and copy the value from the **Publishable key** section. + +