From 3ffaffc0ed8295fc8d52fbaba5088eccabefecb2 Mon Sep 17 00:00:00 2001
From: Kang Ming <kang.ming1996@gmail.com>
Date: Tue, 8 Oct 2024 22:27:07 +0800
Subject: [PATCH] docs: replace with LegacyApiKeys component

---
 apps/docs/components/MDX/database_setup.mdx                   | 2 +-
 apps/docs/components/MDX/kotlin_project_setup.mdx             | 4 ++--
 apps/docs/components/MDX/project_setup.mdx                    | 4 ++--
 apps/docs/content/guides/api/api-keys.mdx                     | 2 +-
 apps/docs/content/guides/api/creating-routes.mdx              | 4 ++--
 apps/docs/content/guides/auth/auth-anonymous.mdx              | 2 +-
 .../content/guides/getting-started/tutorials/with-angular.mdx | 2 +-
 .../getting-started/tutorials/with-expo-react-native.mdx      | 2 +-
 .../guides/getting-started/tutorials/with-ionic-angular.mdx   | 2 +-
 .../guides/getting-started/tutorials/with-ionic-react.mdx     | 2 +-
 .../guides/getting-started/tutorials/with-ionic-vue.mdx       | 2 +-
 .../content/guides/getting-started/tutorials/with-nextjs.mdx  | 2 +-
 .../content/guides/getting-started/tutorials/with-nuxt-3.mdx  | 2 +-
 .../content/guides/getting-started/tutorials/with-react.mdx   | 2 +-
 .../guides/getting-started/tutorials/with-redwoodjs.mdx       | 2 +-
 .../content/guides/getting-started/tutorials/with-refine.mdx  | 2 +-
 .../content/guides/getting-started/tutorials/with-solidjs.mdx | 2 +-
 .../content/guides/getting-started/tutorials/with-svelte.mdx  | 2 +-
 .../content/guides/getting-started/tutorials/with-swift.mdx   | 2 +-
 .../content/guides/getting-started/tutorials/with-vue-3.mdx   | 2 +-
 apps/docs/content/guides/realtime/broadcast.mdx               | 2 +-
 apps/docs/content/guides/realtime/presence.mdx                | 2 +-
 22 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/apps/docs/components/MDX/database_setup.mdx b/apps/docs/components/MDX/database_setup.mdx
index 314b27e4829..00f86699a84 100644
--- a/apps/docs/components/MDX/database_setup.mdx
+++ b/apps/docs/components/MDX/database_setup.mdx
@@ -15,4 +15,4 @@ Your database will be available in less than a minute.
 You can find your project credentials inside the project [settings](https://supabase.com/dashboard/project/_/settings/), including:
 
 - [Database credentials](https://supabase.com/dashboard/project/_/settings/database): connection strings and connection pooler details.
-- [API credentials](https://supabase.com/dashboard/project/_/settings/database): your serverless API URL and <PublishableKey/> / `service_role` keys.
+- [API credentials](https://supabase.com/dashboard/project/_/settings/database): your serverless API URL and <LegacyApiKeys keyword='publishable' type='anon'/> / `service_role` keys.
diff --git a/apps/docs/components/MDX/kotlin_project_setup.mdx b/apps/docs/components/MDX/kotlin_project_setup.mdx
index 594898ccd71..39fa99802dc 100644
--- a/apps/docs/components/MDX/kotlin_project_setup.mdx
+++ b/apps/docs/components/MDX/kotlin_project_setup.mdx
@@ -40,10 +40,10 @@ Now we are going to set up the database schema. You can just copy/paste the SQL
 ### 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 Project URL and <PublishableKey/> key from the API settings.
+We just need to get the Project URL and <LegacyApiKeys keyword='publishable' type='anon'/> key from the API settings.
 
 1. Go to the [API Settings](https://app.supabase.com/project/_/settings/api) page in the Dashboard.
-2. Find your Project `URL`, <PublishableKey/>, and `service_role` keys on this page.
+2. Find your Project `URL`, <LegacyApiKeys keyword='publishable' type='anon'/>, and `service_role` keys on this page.
 
 ### Set up Google Authentication
 
diff --git a/apps/docs/components/MDX/project_setup.mdx b/apps/docs/components/MDX/project_setup.mdx
index fcd16b3e9fa..997633e362c 100644
--- a/apps/docs/components/MDX/project_setup.mdx
+++ b/apps/docs/components/MDX/project_setup.mdx
@@ -62,7 +62,7 @@ supabase migration new user_management_starter
 ### 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 Project URL and <PublishableKey/> key from the API settings.
+We just need to get the Project URL and <LegacyApiKeys keyword='publishable' type='anon'/> key from the API settings.
 
 1. Go to the [API Settings](https://supabase.com/dashboard/project/_/settings/api) page in the Dashboard.
-1. Find your Project `URL`, <PublishableKey/>, and `service_role` keys on this page.
+1. Find your Project `URL`, <LegacyApiKeys keyword='publishable' type='anon'/>, and `service_role` keys on this page.
diff --git a/apps/docs/content/guides/api/api-keys.mdx b/apps/docs/content/guides/api/api-keys.mdx
index dbdb537cf25..c9c0f669706 100644
--- a/apps/docs/content/guides/api/api-keys.mdx
+++ b/apps/docs/content/guides/api/api-keys.mdx
@@ -4,7 +4,7 @@ title: 'Understanding API Keys'
 description: 'Securing your Data API with Postgres Row Level Security.'
 ---
 
-Supabase provides 2 default keys when you create a project: a <PublishableKey/> key, and a `secret` key. You can find both keys in the [API Settings](https://supabase.com/dashboard/project/_/settings/api).
+Supabase provides 2 default keys when you create a project: a <LegacyApiKeys keyword='publishable' type='anon'/> key, and a <LegacyApiKeys keyword='secret' type='secret'/> key. You can find both keys in the [API Settings](https://supabase.com/dashboard/project/*/settings/api).
 
 The data APIs are designed to work with Postgres Row Level Security (RLS). These keys map to the following Postgres roles:
 
diff --git a/apps/docs/content/guides/api/creating-routes.mdx b/apps/docs/content/guides/api/creating-routes.mdx
index bf9ab016769..0fd29b439b9 100644
--- a/apps/docs/content/guides/api/creating-routes.mdx
+++ b/apps/docs/content/guides/api/creating-routes.mdx
@@ -54,7 +54,7 @@ Every Supabase project has a unique API URL. Your API is secured behind an API g
 
 1. Go to the [Settings](https://supabase.com/dashboard/project/_/settings/general) page in the Dashboard.
 2. Click **API** in the sidebar.
-3. Find your API `URL`, <PublishableKey/>, and `service_role` keys on this page.
+3. Find your API `URL`, <LegacyApiKeys keyword='publishable' type='anon'/>, and `service_role` keys on this page.
 
 <video width="99%" muted playsInline controls={true}>
   <source
@@ -65,7 +65,7 @@ Every Supabase project has a unique API URL. Your API is secured behind an API g
 
 The REST API is accessible through the URL `https://<project_ref>.supabase.co/rest/v1`
 
-Both of these routes require the <PublishableKey/> key to be passed through an `apikey` header.
+Both of these routes require the <LegacyApiKeys keyword='publishable' type='anon'/> key to be passed through an `apikey` header.
 
 ## Using the API
 
diff --git a/apps/docs/content/guides/auth/auth-anonymous.mdx b/apps/docs/content/guides/auth/auth-anonymous.mdx
index 6a43cb185d3..ed14f4164bc 100644
--- a/apps/docs/content/guides/auth/auth-anonymous.mdx
+++ b/apps/docs/content/guides/auth/auth-anonymous.mdx
@@ -12,7 +12,7 @@ Calling `signInAnonymously()` creates an anonymous user. It's just like a perman
 
 Like permanent users, the `authenticated` Postgres role will be used when using the Data APIs to access your project. JWTs for these users will have an `is_anonymous` claim which you can use to distinguish in RLS policies.
 
-This is different from the <PublishableKey/> API key which does not create a user and can be used to implement public access to your database as it uses the `anon` Postgres role.
+This is different from the <LegacyApiKeys keyword='publishable' type='anon'/> API key which does not create a user and can be used to implement public access to your database as it uses the `anon` Postgres role.
 
 </Admonition>
 
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 8761dc40a61..01aca9a920e 100644
--- a/apps/docs/content/guides/getting-started/tutorials/with-angular.mdx
+++ b/apps/docs/content/guides/getting-started/tutorials/with-angular.mdx
@@ -36,7 +36,7 @@ npm install @supabase/supabase-js
 ```
 
 And finally we want to save the environment variables in the `src/environments/environment.ts` file.
-All we need are the API URL and the <PublishableKey/> key that you copied [earlier](#get-the-api-keys).
+All we need are the API URL and the <LegacyApiKeys keyword='publishable' type='anon'/> key that you copied [earlier](#get-the-api-keys).
 These variables will be exposed on the browser, and that's completely fine since we have [Row Level Security](/docs/guides/auth#row-level-security) enabled on our Database.
 
 ```ts src/environments/environment.ts
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 0da20c99747..487095bae1e 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
@@ -38,7 +38,7 @@ npx expo install @supabase/supabase-js @react-native-async-storage/async-storage
 ```
 
 Now let's create a helper file to initialize the Supabase client.
-We need the API URL and the <PublishableKey/> key that you copied [earlier](#get-the-api-keys).
+We need the API URL and the <LegacyApiKeys keyword='publishable' type='anon'/> key that you copied [earlier](#get-the-api-keys).
 These variables are safe to expose in your Expo app since Supabase has
 [Row Level Security](/docs/guides/auth#row-level-security) enabled on your Database.
 
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 0b50f65631f..2ef67c5b502 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
@@ -37,7 +37,7 @@ npm install @supabase/supabase-js
 ```
 
 And finally, we want to save the environment variables in the `src/environments/environment.ts` file.
-All we need are the API URL and the <PublishableKey/> key that you copied [earlier](#get-the-api-keys).
+All we need are the API URL and the <LegacyApiKeys keyword='publishable' type='anon'/> key that you copied [earlier](#get-the-api-keys).
 These variables will be exposed on the browser, and that's completely fine since we have [Row Level Security](/docs/guides/auth#row-level-security) enabled on our Database.
 
 ```ts environment.ts
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 9ddd9f4dadf..8bca4d4e7af 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
@@ -37,7 +37,7 @@ npm install @supabase/supabase-js
 ```
 
 And finally we want to save the environment variables in a `.env`.
-All we need are the API URL and the <PublishableKey/> key that you copied [earlier](#get-the-api-keys).
+All we need are the API URL and the <LegacyApiKeys keyword='publishable' type='anon'/> key that you copied [earlier](#get-the-api-keys).
 
 ```bash .env
 REACT_APP_SUPABASE_URL=YOUR_SUPABASE_URL
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 d6b89da26c3..7715116c21f 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
@@ -37,7 +37,7 @@ npm install @supabase/supabase-js
 ```
 
 And finally we want to save the environment variables in a `.env`.
-All we need are the API URL and the <PublishableKey/> key that you copied [earlier](#get-the-api-keys).
+All we need are the API URL and the <LegacyApiKeys keyword='publishable' type='anon'/> key that you copied [earlier](#get-the-api-keys).
 
 ```bash .env
 VUE_APP_SUPABASE_URL=YOUR_SUPABASE_URL
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 fa8f6eef722..677f02d354b 100644
--- a/apps/docs/content/guides/getting-started/tutorials/with-nextjs.mdx
+++ b/apps/docs/content/guides/getting-started/tutorials/with-nextjs.mdx
@@ -55,7 +55,7 @@ npm install @supabase/supabase-js
 ```
 
 And finally we want to save the environment variables in a `.env.local`.
-Create a `.env.local` file at the root of the project, and paste the API URL and the <PublishableKey/> key that you copied [earlier](#get-the-api-keys).
+Create a `.env.local` file at the root of the project, and paste the API URL and the <LegacyApiKeys keyword='publishable' type='anon'/> key that you copied [earlier](#get-the-api-keys).
 
 ```bash .env.local
 NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
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 9c4f4facb42..f059ef38f77 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
@@ -36,7 +36,7 @@ npm install @nuxtjs/supabase --save-dev
 ```
 
 And finally we want to save the environment variables in a `.env`.
-All we need are the API URL and the <PublishableKey/> key that you copied [earlier](#get-the-api-keys).
+All we need are the API URL and the <LegacyApiKeys keyword='publishable' type='anon'/> key that you copied [earlier](#get-the-api-keys).
 
 ```bash .env
 SUPABASE_URL="YOUR_SUPABASE_URL"
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 116457588a2..823ff39cd16 100644
--- a/apps/docs/content/guides/getting-started/tutorials/with-react.mdx
+++ b/apps/docs/content/guides/getting-started/tutorials/with-react.mdx
@@ -36,7 +36,7 @@ npm install @supabase/supabase-js
 ```
 
 And finally we want to save the environment variables in a `.env.local` file.
-All we need are the API URL and the <PublishableKey/> key that you copied [earlier](#get-the-api-keys).
+All we need are the API URL and the <LegacyApiKeys keyword='publishable' type='anon'/> key that you copied [earlier](#get-the-api-keys).
 
 ```bash .env
 VITE_SUPABASE_URL=YOUR_SUPABASE_URL
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 d9307099c42..3fbf7c73542 100644
--- a/apps/docs/content/guides/getting-started/tutorials/with-redwoodjs.mdx
+++ b/apps/docs/content/guides/getting-started/tutorials/with-redwoodjs.mdx
@@ -103,7 +103,7 @@ Say, **yes** and it will setup the Supabase client in your app and also provide
 ```
 
 Next, we want to save the environment variables in a `.env`.
-We need the `API URL` as well as the <PublishableKey/> and `jwt_secret` keys that you copied [earlier](#get-the-api-keys).
+We need the `API URL` as well as the <LegacyApiKeys keyword='publishable' type='anon'/> and `jwt_secret` keys that you copied [earlier](#get-the-api-keys).
 
 ```bash .env
 SUPABASE_URL=YOUR_SUPABASE_URL
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 81196bb798d..c96217fe87e 100644
--- a/apps/docs/content/guides/getting-started/tutorials/with-refine.mdx
+++ b/apps/docs/content/guides/getting-started/tutorials/with-refine.mdx
@@ -83,7 +83,7 @@ export const supabaseClient = createClient(supabaseUrl, supabaseAnonKey, {
 })
 ```
 
-And then, we want to save the environment variables in a `.env.local` file. All you need are the API URL and the <PublishableKey/> key that you copied [earlier](#get-the-api-keys).
+And then, we want to save the environment variables in a `.env.local` file. All you need are the API URL and the <LegacyApiKeys keyword='publishable' type='anon'/> key that you copied [earlier](#get-the-api-keys).
 
 ```bash .env.local
 VITE_SUPABASE_URL=YOUR_SUPABASE_URL
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 40f03141bb8..b6f0ce74f3a 100644
--- a/apps/docs/content/guides/getting-started/tutorials/with-solidjs.mdx
+++ b/apps/docs/content/guides/getting-started/tutorials/with-solidjs.mdx
@@ -35,7 +35,7 @@ npm install @supabase/supabase-js
 ```
 
 And finally we want to save the environment variables in a `.env`.
-All we need are the API URL and the <PublishableKey/> key that you copied [earlier](#get-the-api-keys).
+All we need are the API URL and the <LegacyApiKeys keyword='publishable' type='anon'/> key that you copied [earlier](#get-the-api-keys).
 
 ```bash .env
 VITE_SUPABASE_URL=YOUR_SUPABASE_URL
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 ee025db0077..338cfd525b7 100644
--- a/apps/docs/content/guides/getting-started/tutorials/with-svelte.mdx
+++ b/apps/docs/content/guides/getting-started/tutorials/with-svelte.mdx
@@ -36,7 +36,7 @@ npm install @supabase/supabase-js
 ```
 
 And finally we want to save the environment variables in a `.env`.
-All we need are the API URL and the <PublishableKey/> key that you copied [earlier](#get-the-api-keys).
+All we need are the API URL and the <LegacyApiKeys keyword='publishable' type='anon'/> key that you copied [earlier](#get-the-api-keys).
 
 ```bash .env
 VITE_SUPABASE_URL=YOUR_SUPABASE_URL
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 d751bef1ce4..02a94a838d3 100644
--- a/apps/docs/content/guides/getting-started/tutorials/with-swift.mdx
+++ b/apps/docs/content/guides/getting-started/tutorials/with-swift.mdx
@@ -28,7 +28,7 @@ Add the [supabase-swift](https://github.com/supabase/supabase-swift) dependency.
 Add the `https://github.com/supabase/supabase-swift` package to your app. For instructions, see the [Apple tutorial on adding package dependencies](https://developer.apple.com/documentation/xcode/adding-package-dependencies-to-your-app).
 
 Create a helper file to initialize the Supabase client.
-You need the API URL and the <PublishableKey/> key that you copied [earlier](#get-the-api-keys).
+You need the API URL and the <LegacyApiKeys keyword='publishable' type='anon'/> key that you copied [earlier](#get-the-api-keys).
 These variables will be exposed on the application, and that's completely fine since you have
 [Row Level Security](/docs/guides/auth#row-level-security) enabled on your database.
 
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 1fe47ffa3ac..2988d424f3a 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
@@ -41,7 +41,7 @@ npm install @supabase/supabase-js
 ```
 
 And finally we want to save the environment variables in a `.env`.
-All we need are the API URL and the <PublishableKey/> key that you copied [earlier](#get-the-api-keys).
+All we need are the API URL and the <LegacyApiKeys keyword='publishable' type='anon'/> key that you copied [earlier](#get-the-api-keys).
 
 ```bash .env
 VITE_SUPABASE_URL=YOUR_SUPABASE_URL
diff --git a/apps/docs/content/guides/realtime/broadcast.mdx b/apps/docs/content/guides/realtime/broadcast.mdx
index 40305dbc65a..67bd9c97810 100644
--- a/apps/docs/content/guides/realtime/broadcast.mdx
+++ b/apps/docs/content/guides/realtime/broadcast.mdx
@@ -12,7 +12,7 @@ You can use the Supabase client libraries to send and receive Broadcast messages
 
 ### Initialize the client
 
-Go to your Supabase project's [API Settings](https://supabase.com/dashboard/project/_/settings/api) and grab the `URL` and <PublishableKey/> key.
+Go to your Supabase project's [API Settings](https://supabase.com/dashboard/project/_/settings/api) and grab the `URL` and <LegacyApiKeys keyword='publishable' type='anon'/> key.
 
 <Tabs
   scrollable
diff --git a/apps/docs/content/guides/realtime/presence.mdx b/apps/docs/content/guides/realtime/presence.mdx
index 9891176495c..c26915ecc12 100644
--- a/apps/docs/content/guides/realtime/presence.mdx
+++ b/apps/docs/content/guides/realtime/presence.mdx
@@ -12,7 +12,7 @@ You can use the Supabase client libraries to track Presence state between users.
 
 ### Initialize the client
 
-Go to your Supabase project's [API Settings](https://supabase.com/dashboard/project/_/settings/api) and grab the `URL` and <PublishableKey/> key.
+Go to your Supabase project's [API Settings](https://supabase.com/dashboard/project/_/settings/api) and grab the `URL` and <LegacyApiKeys keyword='publishable' type='anon'/> key.
 
 <Tabs
   scrollable