docs: Examples Key changes (#45170)

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Documentation**
* Updated examples and guides to use Supabase publishable (client) keys
instead of anon keys for client-side usage across frameworks and
platforms.
* Renamed environment variable examples and .env templates to reflect
publishable key naming.
* Adjusted sample requests and client-init examples to send/use the
publishable key via the apikey header where applicable.
* Updated references from service_role to secret for server-side
credential guidance.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: fadymak <fady@fadymak.com>

apps/docs/content/guides/ai/examples/huggingface-image-captioning.mdx

@@ -60,11 +60,12 @@ interface WebhookPayload {
 serve(async (req) => {
   const payload: WebhookPayload = await req.json()
   const soRecord = payload.record
+  const SUPABASE_SECRET_KEYS = JSON.parse(Deno.env.get('SUPABASE_SECRET_KEYS')!)
   const supabaseAdminClient = createClient<Database>(
     // Supabase API URL - env var exported by default when deployed.
     Deno.env.get('SUPABASE_URL') ?? '',
-    // Supabase API SERVICE ROLE KEY - env var exported by default when deployed.
-    Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') ?? ''
+    // Supabase API SECRET KEY - env var exported by default when deployed.
+    Deno.env.get(SUPABASE_SECRET_KEYS['default']) ?? ''
   )
 
   // Construct image url from storage

apps/docs/content/guides/functions/examples/elevenlabs-transcribe-speech.mdx

@@ -117,10 +117,10 @@ console.log(`Function "elevenlabs-scribe-bot" up and running!`)
 const elevenLabsClient = new ElevenLabsClient({
   apiKey: Deno.env.get('ELEVENLABS_API_KEY') || '',
 })
-
+const SUPABASE_SECRET_KEYS = JSON.parse(Deno.env.get('SUPABASE_SECRET_KEYS')!)
 const supabase = createClient(
   Deno.env.get('SUPABASE_URL') || '',
-  Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') || ''
+  Deno.env.get(SUPABASE_SECRET_KEYS['default']) || ''
 )
 
 async function scribe({

examples/ai/aws_bedrock_image_gen/supabase/functions/image_gen/index.ts

@@ -53,12 +53,12 @@ Deno.serve(async (req) => {
     const parsedData = JSON.parse(jsonString)
     console.log(parsedData)
     const image = parsedData.images[0]
-
+    const SUPABASE_SECRET_KEYS = JSON.parse(Deno.env.get('SUPABASE_SECRET_KEYS')!)
     const supabaseClient = createClient(
       // Supabase API URL - env var exported by default.
       Deno.env.get('SUPABASE_URL')!,
-      // Supabase API ANON KEY - env var exported by default.
-      Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!
+      // Supabase API SECRET KEY - env var exported by default.
+      Deno.env.get(SUPABASE_SECRET_KEYS['default'])!
     )
 
     const { data: upload, error: uploadError } = await supabaseClient.storage

examples/ai/edge-functions/README.md

@@ -24,7 +24,7 @@ Run a search via curl POST request:
 
 ```bash
 curl -i --location --request POST 'https://<PROJECT-REF>.supabase.co/functions/v1/search' \
-    --header 'Authorization: Bearer <SUPABASE_ANON_KEY>' \
+    --header 'apikey: <SUPABASE_PUBLISHABLE_KEY>' \
     --header 'Content-Type: application/json' \
     --data '{"search":"vehicles"}'
 ```

examples/ai/edge-functions/supabase/functions/generate-embedding/index.ts

@@ -11,10 +11,11 @@ interface WebhookPayload {
   schema: 'public'
   old_record: null | EmbeddingsRecord
 }
+const SUPABASE_SECRET_KEYS = JSON.parse(Deno.env.get('SUPABASE_SECRET_KEYS')!)
 
 const supabase = createClient<Database>(
   Deno.env.get('SUPABASE_URL')!,
-  Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!
+  Deno.env.get(SUPABASE_SECRET_KEYS['default'])!
 )
 
 const model = new Supabase.ai.Session('gte-small')

examples/ai/edge-functions/supabase/functions/search/index.ts

@@ -3,9 +3,11 @@ import 'jsr:@supabase/functions-js/edge-runtime.d.ts'
 import { createClient } from 'jsr:@supabase/supabase-js@2'
 import { Database } from '../_shared/database.types.ts'
 
+const SUPABASE_SECRET_KEYS = JSON.parse(Deno.env.get('SUPABASE_SECRET_KEYS')!)
+
 const supabase = createClient<Database>(
   Deno.env.get('SUPABASE_URL')!,
-  Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!
+  Deno.env.get(SUPABASE_SECRET_KEYS['default'])!
 )
 
 const model = new Supabase.ai.Session('gte-small')

examples/ai/edge-functions/supabase/migrations/20240410041607_database-webhook.sql

@@ -1,4 +1,4 @@
--- Insert your <PROJECT-REF> and <SUPABASE_ANON_KEY> below, then uncomment the trigger creation and run `supabase db push`
+-- Insert your <PROJECT-REF> and <SUPABASE_PUBLISHABLE_KEY> below, then uncomment the trigger creation and run `supabase db push`
 -- Alternatively, head to the Database Webhook settings https://supabase.com/dashboard/project/_/database/hooks
 -- Select "Create a new Hook" > Table "public.embeddings" > check "INSERT" & "Update" > Supabase Edge Functions > Add auth header with service key
 
@@ -9,7 +9,7 @@
 -- EXECUTE FUNCTION supabase_functions.http_request (
 --   'https://<PROJECT-REF>.supabase.co/functions/v1/generate-embedding',
 --   'POST',
---   '{"Content-type":"application/json","Authorization":"Bearer <SUPABASE_ANON_KEY>"}',
+--   '{"Content-type":"application/json","apikey":"<SUPABASE_PUBLISHABLE_KEY>"}',
 --   '{}',
 --   '5000'
 -- );
@@ -24,7 +24,7 @@
 -- EXECUTE FUNCTION supabase_functions.http_request (
 --   'http://kong:8000/functions/v1/generate-embedding',
 --   'POST',
---   '{"Content-type":"application/json","Authorization":"Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0"}',
+--   '{"Content-type":"application/json","apikey":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0"}',
 --   '{}',
 --   '5000'
 -- );

examples/auth/expo-social-auth/.env.template

@@ -1,5 +1,5 @@
 EXPO_PUBLIC_SUPABASE_URL=""
-EXPO_PUBLIC_SUPABASE_ANON_KEY=""
+EXPO_PUBLIC_SUPABASE_PUBLISHABLE_KEY=""
 EXPO_PUBLIC_APPLE_AUTH_SERVICE_ID=""
 EXPO_PUBLIC_APPLE_AUTH_REDIRECT_URI=""
 EXPO_PUBLIC_GOOGLE_AUTH_WEB_CLIENT_ID=""

examples/auth/expo-social-auth/lib/supabase.ts

@@ -21,7 +21,7 @@ const ExpoSecureStoreAdapter = {
 
 export const supabase = createClient(
   process.env.EXPO_PUBLIC_SUPABASE_URL ?? '',
-  process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY ?? '',
+  process.env.EXPO_PUBLIC_SUPABASE_PUBLISHABLE_KEY ?? '',
   {
     auth: {
       storage: ExpoSecureStoreAdapter as any,

examples/auth/expo-social-auth/lib/supabase.web.ts

@@ -22,7 +22,7 @@ const ExpoWebSecureStoreAdapter = {
 
 export const supabase = createClient(
   process.env.EXPO_PUBLIC_SUPABASE_URL ?? '',
-  process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY ?? '',
+  process.env.EXPO_PUBLIC_SUPABASE_PUBLISHABLE_KEY ?? '',
   {
     auth: {
       storage: ExpoWebSecureStoreAdapter,

examples/auth/flutter-mfa/lib/main.dart

@@ -11,7 +11,7 @@ import 'package:mfa_app/pages/mfa/enroll_page.dart';
 void main() async {
   await Supabase.initialize(
     url: 'YOUR_SUPABASE_URL',
-    anonKey: 'YOUR_ANON_KEY',
+    publishableKey: 'YOUR_PUBLISHABLE_KEY',
   );
   runApp(const MyApp());
 }

examples/auth/flutter-native-google-auth/lib/main.dart

@@ -6,7 +6,7 @@ void main() async {
   /// TODO: update Supabase credentials with your own
   await Supabase.initialize(
     url: 'YOUR_SUPABASE_URL',
-    anonKey: 'YOUR_ANON_KEY',
+    publishableKey: 'YOUR_PUBLISHABLE_KEY',
   );
   runApp(const MyApp());
 }

examples/auth/hono-full/.env.example

@@ -1,3 +1,3 @@
 # Get your keys at https://supabase.com/dashboard/project/_/settings/api
 VITE_SUPABASE_URL=your_supabase_url
-VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
+VITE_SUPABASE_PUBLISHABLE_KEY=your_supabase_publishable_key

examples/auth/hono-full/src/client.tsx

@@ -8,7 +8,7 @@ const client = hc<AppType>('/')
 
 const supabase = createBrowserClient(
   import.meta.env.VITE_SUPABASE_URL!,
-  import.meta.env.VITE_SUPABASE_ANON_KEY!
+  import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY!
 )
 
 function App() {

examples/auth/hono-full/src/middleware/auth.middleware.ts

@@ -16,7 +16,7 @@ export const getSupabase = (c: Context) => {
 
 type SupabaseEnv = {
   VITE_SUPABASE_URL: string
-  VITE_SUPABASE_ANON_KEY: string
+  VITE_SUPABASE_PUBLISHABLE_KEY: string
 }
 
 export const supabaseMiddleware = (): MiddlewareHandler => {
@@ -24,14 +24,14 @@ export const supabaseMiddleware = (): MiddlewareHandler => {
     const supabaseEnv = env<SupabaseEnv>(c)
     const supabaseUrl = supabaseEnv.VITE_SUPABASE_URL ?? import.meta.env.VITE_SUPABASE_URL
     const supabasePublishableKey =
-      supabaseEnv.VITE_SUPABASE_ANON_KEY ?? import.meta.env.VITE_SUPABASE_ANON_KEY
+      supabaseEnv.VITE_SUPABASE_PUBLISHABLE_KEY ?? import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY
 
     if (!supabaseUrl) {
       throw new Error('SUPABASE_URL missing!')
     }
 
     if (!supabasePublishableKey) {
-      throw new Error('SUPABASE_ANON_KEY missing!')
+      throw new Error('SUPABASE_PUBLISHABLE_KEY missing!')
     }
 
     const supabase = createServerClient(supabaseUrl, supabasePublishableKey, {

examples/auth/hono/.env.example

@@ -1,3 +1,3 @@
 # Get your keys at https://supabase.com/dashboard/project/_/settings/api
 VITE_SUPABASE_URL=your_supabase_url
-VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
+VITE_SUPABASE_PUBLISHABLE_KEY=your_supabase_publishable_key

examples/auth/hono/src/middleware/auth.middleware.ts

@@ -23,17 +23,17 @@ export const supabaseMiddleware = (): MiddlewareHandler => {
   return async (c, next) => {
     const supabaseEnv = env<SupabaseEnv>(c)
     const supabaseUrl = supabaseEnv.SUPABASE_URL
-    const supabaseAnonKey = supabaseEnv.SUPABASE_PUBLISHABLE_KEY
+    const supabasePublishableKey = supabaseEnv.SUPABASE_PUBLISHABLE_KEY
 
     if (!supabaseUrl) {
       throw new Error('SUPABASE_URL missing!')
     }
 
-    if (!supabaseAnonKey) {
+    if (!supabasePublishableKey) {
       throw new Error('SUPABASE_PUBLISHABLE_KEY missing!')
     }
 
-    const supabase = createServerClient(supabaseUrl, supabaseAnonKey, {
+    const supabase = createServerClient(supabaseUrl, supabasePublishableKey, {
       cookies: {
         getAll() {
           return parseCookieHeader(c.req.header('Cookie') ?? '')

examples/auth/quickstarts/expo-react-native-social-auth/lib/supabase.ts

@@ -21,7 +21,7 @@ const ExpoSecureStoreAdapter = {
 
 export const supabase = createClient(
   process.env.EXPO_PUBLIC_SUPABASE_URL ?? '',
-  process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY ?? '',
+  process.env.EXPO_PUBLIC_SUPABASE_PUBLISHABLE_KEY ?? '',
   {
     auth: {
       storage: ExpoSecureStoreAdapter as any,

examples/auth/quickstarts/expo-react-native-social-auth/lib/supabase.web.ts

@@ -22,7 +22,7 @@ const ExpoWebSecureStoreAdapter = {
 
 export const supabase = createClient(
   process.env.EXPO_PUBLIC_SUPABASE_URL ?? '',
-  process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY ?? '',
+  process.env.EXPO_PUBLIC_SUPABASE_PUBLISHABLE_KEY ?? '',
   {
     auth: {
       storage: ExpoWebSecureStoreAdapter,

examples/auth/quickstarts/react-native/.env.example

@@ -1,2 +1,2 @@
 EXPO_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
-EXPO_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
+EXPO_PUBLIC_SUPABASE_PUBLISHABLE_KEY=YOUR_SUPABASE_PUBLISHABLE_KEY

examples/auth/quickstarts/react-native/lib/supabase.ts

@@ -4,9 +4,9 @@ import AsyncStorage from '@react-native-async-storage/async-storage'
 import { createClient, processLock } from '@supabase/supabase-js'
 
 const supabaseUrl = process.env.EXPO_PUBLIC_SUPABASE_URL!
-const supabaseAnonKey = process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY!
+const supabasePublishableKey = process.env.EXPO_PUBLIC_SUPABASE_PUBLISHABLE_KEY!
 
-export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
+export const supabase = createClient(supabaseUrl, supabasePublishableKey, {
   auth: {
     ...(Platform.OS !== 'web' ? { storage: AsyncStorage } : {}),
     autoRefreshToken: true,

examples/caching/with-cloudflare-workers-kv/README.md

@@ -16,10 +16,10 @@ Finally, we use the Thunder Client extension to simulate a POST request to the `
 router.post(
   '/revalidate',
   withContent,
-  async (request, { SUPABASE_URL, SUPABASE_ANON_KEY, ARTICLES }, context) => {
+  async (request, { SUPABASE_URL, SUPABASE_PUBLISHABLE_KEY, ARTICLES }, context) => {
     const updateCache = async () => {
       const { type, record, old_record } = request.content
-      const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY)
+      const supabase = createClient(SUPABASE_URL, SUPABASE_PUBLISHABLE_KEY)
 
       if (type === 'INSERT' || type === 'UPDATE') {
         await writeTo(ARTICLES, `/articles/${record.id}`, record)

examples/caching/with-cloudflare-workers-kv/src/index.js

@@ -17,7 +17,7 @@ router.get('/write-kv', async (request, { ARTICLES }) => {
   return json(articles)
 })
 
-router.get('/articles', async (request, { SUPABASE_URL, SUPABASE_ANON_KEY, ARTICLES }) => {
+router.get('/articles', async (request, { SUPABASE_URL, SUPABASE_PUBLISHABLE_KEY, ARTICLES }) => {
   const cachedArticles = await readFrom(ARTICLES, '/articles')
 
   if (cachedArticles) {
@@ -27,40 +27,43 @@ router.get('/articles', async (request, { SUPABASE_URL, SUPABASE_ANON_KEY, ARTIC
 
   console.log('fetching fresh articles')
 
-  const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY)
+  const supabase = createClient(SUPABASE_URL, SUPABASE_PUBLISHABLE_KEY)
 
   const { data } = await supabase.from('articles').select('*')
   await writeTo(ARTICLES, '/articles', data)
   return json(data)
 })
 
-router.get('/articles/:id', async (request, { SUPABASE_URL, SUPABASE_ANON_KEY, ARTICLES }) => {
-  const { id } = request.params
-  const cachedArticle = await readFrom(ARTICLES, `/articles/${id}`)
+router.get(
+  '/articles/:id',
+  async (request, { SUPABASE_URL, SUPABASE_PUBLISHABLE_KEY, ARTICLES }) => {
+    const { id } = request.params
+    const cachedArticle = await readFrom(ARTICLES, `/articles/${id}`)
 
-  if (cachedArticle) {
-    console.log('sending the cache')
-    return json(cachedArticle)
+    if (cachedArticle) {
+      console.log('sending the cache')
+      return json(cachedArticle)
+    }
+
+    console.log('fetching fresh article')
+
+    const supabase = createClient(SUPABASE_URL, SUPABASE_PUBLISHABLE_KEY)
+
+    const { data } = await supabase.from('articles').select('*').match({ id }).single()
+
+    await writeTo(ARTICLES, `/articles/${id}`, data)
+
+    return json(data)
   }
-
-  console.log('fetching fresh article')
-
-  const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY)
-
-  const { data } = await supabase.from('articles').select('*').match({ id }).single()
-
-  await writeTo(ARTICLES, `/articles/${id}`, data)
-
-  return json(data)
-})
+)
 
 router.post(
   '/revalidate',
   withContent,
-  async (request, { SUPABASE_URL, SUPABASE_ANON_KEY, ARTICLES }, context) => {
+  async (request, { SUPABASE_URL, SUPABASE_PUBLISHABLE_KEY, ARTICLES }, context) => {
     const updateCache = async () => {
       const { type, record, old_record } = request.content
-      const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY)
+      const supabase = createClient(SUPABASE_URL, SUPABASE_PUBLISHABLE_KEY)
 
       if (type === 'INSERT' || type === 'UPDATE') {
         await writeTo(ARTICLES, `/articles/${record.id}`, record)

examples/caching/with-nextjs-13/.env.local.example

@@ -1,2 +1,2 @@
 NEXT_PUBLIC_SUPABASE_URL=
-SUPABASE_SERVICE_ROLE_KEY=
+SUPABASE_SECRET_KEY=

examples/caching/with-nextjs-13/app/page.tsx

@@ -5,7 +5,7 @@ import { createClient } from '@supabase/supabase-js'
 
 const supabase = createClient(
   process.env.NEXT_PUBLIC_SUPABASE_URL ?? 'http://localhost:54321',
-  process.env.SUPABASE_SERVICE_ROLE_KEY ??
+  process.env.SUPABASE_SECRET_KEY ??
     'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6InNlcnZpY2Vfcm9sZSJ9.vI9obAHOGyVVKa3pD--kJlyxp-Z2zV9UUMAhKpNLAcU',
   { global: { fetch } } // Note: this is not required as supabase-js uses the global fetch when available!
 )

examples/edge-functions/app/.env.example

@@ -1,3 +1,3 @@
 # Get these from your Dashboard: https://supabase.com/dashboard/project/_/settings/api
 REACT_APP_SUPABASE_URL=
-REACT_APP_SUPABASE_ANON_KEY=
+REACT_APP_SUPABASE_PUBLISHABLE_KEY=

examples/edge-functions/app/src/utils/supabaseClient.js

@@ -2,6 +2,6 @@ import { createClient } from '@supabase/supabase-js'
 
 export const supabase = createClient(
   process.env.REACT_APP_SUPABASE_URL ?? 'http://localhost:54321',
-  process.env.REACT_APP_SUPABASE_ANON_KEY ??
+  process.env.REACT_APP_SUPABASE_DEFAULT_PUBLISHABLE_KEY ??
     'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24ifQ.625_WdcF3KHqz5amU0x2X5WWHP-OEs_4qj0ssLNHzTs'
 )

examples/edge-functions/supabase/functions/background-upload-storage/index.ts

@@ -2,10 +2,11 @@ import { createClient } from 'npm:supabase-js@2'
 import OpenAI from 'https://deno.land/x/openai@v4.68.2/mod.ts'
 
 const client = new OpenAI({ apiKey: Deno.env.get('OPENAI_API_KEY')! })
+const SUPABASE_SECRET_KEYS = JSON.parse(Deno.env.get('SUPABASE_SECRET_KEYS')!)
 
 const supabase = createClient(
   Deno.env.get('SUPABASE_URL')!,
-  Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!
+  Deno.env.get(SUPABASE_SECRET_KEYS['default'])!
 )
 
 type StorageFileApi = ReturnType<typeof supabase.storage.from>

examples/edge-functions/supabase/functions/elevenlabs-speech-to-text/index.ts

@@ -15,9 +15,11 @@ const elevenLabsClient = new ElevenLabsClient({
   apiKey: Deno.env.get('ELEVENLABS_API_KEY') || '',
 })
 
+const SUPABASE_SECRET_KEYS = JSON.parse(Deno.env.get('SUPABASE_SECRET_KEYS')!)
+
 const supabase = createClient(
   Deno.env.get('SUPABASE_URL') || '',
-  Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') || ''
+  Deno.env.get(SUPABASE_SECRET_KEYS['default']) || ''
 )
 
 async function scribe({

examples/edge-functions/supabase/functions/elevenlabs-text-to-speech/index.ts

@@ -4,9 +4,10 @@ import { createClient } from 'npm:supabase-js@2'
 import { ElevenLabsClient } from 'npm:elevenlabs@1.52.0'
 import * as hash from 'npm:object-hash'
 
+const SUPABASE_SECRET_KEYS = JSON.parse(Deno.env.get('SUPABASE_SECRET_KEYS')!)
 const supabase = createClient(
   Deno.env.get('SUPABASE_URL')!,
-  Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!
+  Deno.env.get(SUPABASE_SECRET_KEYS['default'])!
 )
 
 const client = new ElevenLabsClient({

examples/edge-functions/supabase/functions/file-upload-storage/index.ts

@@ -23,11 +23,13 @@ app.use(async (ctx) => {
     return
   }
 
+  const SUPABASE_PUBLISHABLE_KEYS = JSON.parse(Deno.env.get('SUPABASE_PUBLISHABLE_KEYS')!)
+
   const supabaseClient = createClient(
     // Supabase API URL - env var exported by default.
     Deno.env.get('SUPABASE_URL')!,
-    // Supabase API ANON KEY - env var exported by default.
-    Deno.env.get('SUPABASE_ANON_KEY')!
+    // Supabase publishable key - env var exported by default.
+    Deno.env.get(SUPABASE_PUBLISHABLE_KEYS['default'])!
   )
 
   //upload image to Storage

examples/edge-functions/supabase/functions/get-tshirt-competition/index.ts

@@ -55,11 +55,13 @@ Deno.serve(async (req) => {
       )
     }
 
+    const SUPABASE_SECRET_KEYS = JSON.parse(Deno.env.get('SUPABASE_SECRET_KEYS')!)
+
     const supabaseAdminClient = createClient(
       // Supabase API URL - env var exported by default when deployed.
       Deno.env.get('SUPABASE_URL') ?? '',
-      // Supabase API SERVICE ROLE KEY - env var exported by default when deployed.
-      Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') ?? ''
+      // Supabase API SECRET KEY - env var exported by default when deployed.
+      Deno.env.get(SUPABASE_SECRET_KEYS['default']) ?? ''
     )
     // Submit email to draw
     const { error } = await supabaseAdminClient.from('get-tshirt-competition-2').upsert(

examples/edge-functions/supabase/functions/huggingface-image-captioning/index.ts

@@ -18,11 +18,12 @@ interface WebhookPayload {
 Deno.serve(async (req) => {
   const payload: WebhookPayload = await req.json()
   const soRecord = payload.record
+  const SUPABASE_SECRET_KEYS = JSON.parse(Deno.env.get('SUPABASE_SECRET_KEYS')!)
   const supabaseAdminClient = createClient<Database>(
     // Supabase API URL - env var exported by default when deployed.
     Deno.env.get('SUPABASE_URL') ?? '',
-    // Supabase API SERVICE ROLE KEY - env var exported by default when deployed.
-    Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') ?? ''
+    // Supabase API SECRET KEY - env var exported by default when deployed.
+    Deno.env.get(SUPABASE_SECRET_KEYS['default']) ?? ''
   )
 
   // Construct image url from storage

examples/edge-functions/supabase/functions/og-image-with-storage-cdn/handler.tsx

@@ -195,11 +195,13 @@ export async function handler(req: Request) {
       }
     )
 
+    const SUPABASE_SECRET_KEYS = JSON.parse(Deno.env.get('SUPABASE_SECRET_KEYS')!)
+
     const supabaseAdminClient = createClient(
       // Supabase API URL - env var exported by default when deployed.
       Deno.env.get('SUPABASE_URL') ?? '',
-      // Supabase API SERVICE ROLE KEY - env var exported by default when deployed.
-      Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') ?? ''
+      // Supabase API SECRET KEY - env var exported by default when deployed.
+      Deno.env.get(SUPABASE_SECRET_KEYS['default']) ?? ''
     )
 
     // Upload image to storage.

examples/edge-functions/supabase/functions/openai-image-generation/index.ts

@@ -80,10 +80,12 @@ Deno.serve(async (req) => {
     }
     const generatedImageBlob = new Blob([uint8Array], { type: 'image/png' })
 
+    const SUPABASE_SECRET_KEYS = JSON.parse(Deno.env.get('SUPABASE_SECRET_KEYS')!)
+
     // Upload the generated image to Supabase Storage
     const supabaseClient = createClient(
       Deno.env.get('SUPABASE_URL') || '',
-      Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') || ''
+      Deno.env.get(SUPABASE_SECRET_KEYS['default']) || ''
     )
 
     // Create a unique identifier for this generation

examples/edge-functions/supabase/functions/read-storage/index.ts

@@ -19,12 +19,13 @@ Deno.serve(async (req) => {
   }
 
   try {
+    const SUPABASE_PUBLISHABLE_KEYS = JSON.parse(Deno.env.get('SUPABASE_PUBLISHABLE_KEYS')!)
     // Create a Supabase client with the Auth context of the logged in user.
     const supabaseClient = createClient(
       // Supabase API URL - env var exported by default.
       Deno.env.get('SUPABASE_URL') ?? '',
-      // Supabase API ANON KEY - env var exported by default.
-      Deno.env.get('SUPABASE_ANON_KEY') ?? '',
+      // Supabase API publishable key - env var exported by default.
+      Deno.env.get(SUPABASE_PUBLISHABLE_KEYS['default']) ?? '',
       // Create client with Auth context of the user that called the function.
       // This way your row-level-security (RLS) policies are applied.
       {

examples/edge-functions/supabase/functions/restful-tasks/index.ts

@@ -76,12 +76,13 @@ Deno.serve(async (req) => {
   }
 
   try {
+    const SUPABASE_PUBLISHABLE_KEYS = JSON.parse(Deno.env.get('SUPABASE_PUBLISHABLE_KEYS')!)
     // Create a Supabase client with the Auth context of the logged in user.
     const supabaseClient = createClient(
       // Supabase API URL - env var exported by default.
       Deno.env.get('SUPABASE_URL') ?? '',
-      // Supabase API ANON KEY - env var exported by default.
-      Deno.env.get('SUPABASE_ANON_KEY') ?? '',
+      // Supabase publishable key - env var exported by default.
+      Deno.env.get(SUPABASE_PUBLISHABLE_KEYS['default']) ?? '',
       // Create client with Auth context of the user that called the function.
       // This way your row-level-security (RLS) policies are applied.
       {

examples/edge-functions/supabase/functions/select-from-table-with-auth-rls/index.ts

@@ -17,12 +17,13 @@ Deno.serve(async (req: Request) => {
   }
 
   try {
+    const SUPABASE_PUBLISHABLE_KEYS = JSON.parse(Deno.env.get('SUPABASE_PUBLISHABLE_KEYS')!)
     // Create a Supabase client with the Auth context of the logged in user.
     const supabaseClient = createClient(
       // Supabase API URL - env var exported by default.
       Deno.env.get('SUPABASE_URL') ?? '',
-      // Supabase API ANON KEY - env var exported by default.
-      Deno.env.get('SUPABASE_ANON_KEY') ?? '',
+      // Supabase API PUBLISHABLE KEY - env var exported by default.
+      Deno.env.get(SUPABASE_PUBLISHABLE_KEYS['default']) ?? '',
       // Create client with Auth context of the user that called the function.
       // This way your row-level-security (RLS) policies are applied.
       {

examples/edge-functions/supabase/functions/sentry/index.ts

@@ -7,9 +7,11 @@ console.log('Hello from the Sentry Functions Challenge!')
 import { createClient } from 'npm:supabase-js@2'
 import * as Sentry from 'https://deno.land/x/sentry@7.102.0/index.mjs'
 
+const SUPABASE_SECRET_KEYS = JSON.parse(Deno.env.get('SUPABASE_SECRET_KEYS')!)
+
 const supabase = createClient(
   Deno.env.get('SUPABASE_URL')!,
-  Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!
+  Deno.env.get(SUPABASE_SECRET_KEYS['default'])!
 )
 
 Sentry.init({

examples/edge-functions/supabase/functions/tweet-to-image/handler.tsx

@@ -64,11 +64,13 @@ export async function handler(req: Request) {
       }
     )
 
+    const SUPABASE_SECRET_KEYS = JSON.parse(Deno.env.get('SUPABASE_SECRET_KEYS')!)
+
     const supabaseAdminClient = createClient(
       // Supabase API URL - env var exported by default when deployed.
       Deno.env.get('SUPABASE_URL') ?? '',
-      // Supabase API SERVICE ROLE KEY - env var exported by default when deployed.
-      Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') ?? ''
+      // Supabase API SECRET KEY - env var exported by default when deployed.
+      Deno.env.get(SUPABASE_SECRET_KEYS['default']) ?? ''
     )
 
     // Upload image to storage.

examples/edge-functions/supabase/functions/upstash-redis-ratelimit/index.ts

@@ -6,12 +6,13 @@ console.log(`Function "upstash-redis-counter" up and running!`)
 
 Deno.serve(async (req) => {
   try {
+    const SUPABASE_PUBLISHABLE_KEYS = JSON.parse(Deno.env.get('SUPABASE_PUBLISHABLE_KEYS')!)
     // Create a Supabase client with the Auth context of the logged in user.
     const supabaseClient = createClient(
       // Supabase API URL - env var exported by default.
       Deno.env.get('SUPABASE_URL') ?? '',
-      // Supabase API ANON KEY - env var exported by default.
-      Deno.env.get('SUPABASE_ANON_KEY') ?? '',
+      // Supabase publishable key - env var exported by default.
+      Deno.env.get(SUPABASE_PUBLISHABLE_KEYS['default']) ?? '',
       // Create client with Auth context of the user that called the function.
       // This way your row-level-security (RLS) policies are applied.
       {

examples/product-sample-supabase-kt/app/build.gradle

@@ -24,7 +24,7 @@ android {
         }
         Properties properties = new Properties()
         properties.load(project.rootProject.file("local.properties").newDataInputStream())
-        buildConfigField("String", "API_KEY", "\"${properties.getProperty("API_KEY")}\"")
+        buildConfigField("String", "API_PUBLISHABLE_KEY", "\"${properties.getProperty("API_PUBLISHABLE_KEY")}\"")
         buildConfigField("String", "SECRET", "\"${properties.getProperty("SECRET")}\"")
         buildConfigField("String", "SUPABASE_URL", "\"${properties.getProperty("SUPABASE_URL")}\"")
     }

examples/product-sample-supabase-kt/app/src/main/java/com/example/manageproducts/di/SupabaseModule.kt

@@ -28,7 +28,7 @@ object SupabaseModule {
     fun provideSupabaseClient(): SupabaseClient {
         return createSupabaseClient(
             supabaseUrl = BuildConfig.SUPABASE_URL,
-            supabaseKey = BuildConfig.API_KEY
+            supabaseKey = BuildConfig.API_PUBLISHABLE_KEY
         ) {
             install(Postgrest)
             install(GoTrue) {

examples/product-sample-supabase-kt/local.properties

@@ -6,6 +6,6 @@
 # header note.
 #Mon Jul 24 23:36:03 ICT 2023
 sdk.dir=/Users/hieuvu/Library/Android/sdk
-API_KEY=YOUR_SUPABASE_API_KEY
+API_PUBLISHABLE_KEY=YOUR_SUPABASE_PUBLISHABLE_KEY
 SECRET=YOUR_SUPABASE_SECRET
 SUPABASE_URL=YOUR_SUPABASE_URL

examples/prompts/edge-functions.md

@@ -19,13 +19,11 @@ You're an expert in writing TypeScript and Deno JavaScript runtime. Generate **h
 7. Do NOT use `import { serve } from "https://deno.land/std@0.168.0/http/server.ts"`. Instead use the built-in `Deno.serve`.
 8. Following environment variables (ie. secrets) are pre-populated in both local and hosted Supabase environments. Users don't need to manually set them:
    - SUPABASE_URL
-   - SUPABASE_ANON_KEY
-   - SUPABASE_SERVICE_ROLE_KEY
+   - SUPABASE_PUBLISHABLE_KEYS
+   - SUPABASE_SECRET_KEYS
    - SUPABASE_DB_URL
-9. To set other environment variables (ie. secrets) users can put them in a env file and run the `supabase secrets set --env-file path/to/env-file`
-10. A single Edge Function can handle multiple routes. It is recommended to use a library like Express or Hono to handle the routes as it's easier for developer to understand and maintain. Each route must be prefixed with `/function-name` so they are routed correctly.
-11. File write operations are ONLY permitted on `/tmp` directory. You can use either Deno or Node File APIs.
-12. Use `EdgeRuntime.waitUntil(promise)` static method to run long-running tasks in the background without blocking response to a request. Do NOT assume it is available in the request / execution context.
+
+You then need to use `JSON.parse(Deno.env.get('SUPABASE_SECRET_KEYS')!)` or `JSON.parse(Deno.env.get('SUPABASE_PUBLISHABLE_KEYS')!)` to access the actual keys in the code. For example, `Deno.env.get(SUPABASE_SECRET_KEYS['default'])` to access the default service key. 9. To set other environment variables (ie. secrets) users can put them in a env file and run the `supabase secrets set --env-file path/to/env-file` 10. A single Edge Function can handle multiple routes. It is recommended to use a library like Express or Hono to handle the routes as it's easier for developer to understand and maintain. Each route must be prefixed with `/function-name` so they are routed correctly. 11. File write operations are ONLY permitted on `/tmp` directory. You can use either Deno or Node File APIs. 12. Use `EdgeRuntime.waitUntil(promise)` static method to run long-running tasks in the background without blocking response to a request. Do NOT assume it is available in the request / execution context.
 
 ## Example Templates
 

examples/prompts/use-realtime.md

@@ -103,7 +103,7 @@ const channel = supabase.channel(`admin:${orgId}:alerts`)
 
 ```javascript
 // Basic setup
-const supabase = createClient('URL', 'ANON_KEY')
+const supabase = createClient('SUPABASE_URL', 'SUPABASE_PUBLISHABLE_KEY')
 
 // Channel configuration
 const channel = supabase.channel('room:123:messages', {
@@ -341,7 +341,7 @@ The client automatically manages these states:
 
 ```javascript
 // Client automatically reconnects with built-in logic
-const supabase = createClient('URL', 'ANON_KEY', {
+const supabase = createClient('SUPABASE_URL', 'SUPABASE_PUBLISHABLE_KEY', {
   realtime: {
     params: {
       log_level: 'info',

examples/realtime/flutter-figma-clone/lib/main.dart

@@ -11,7 +11,7 @@ void main() async {
 
   await Supabase.initialize(
     url: 'YOUR_SUPABASE_URL',
-    anonKey: 'YOUR_SUPABASE_ANON_KEY',
+    publishableKey: 'YOUR_SUPABASE_PUBLISHABLE_KEY',
   );
   runApp(const MyApp());
 }

examples/realtime/flutter-multiplayer-shooting-game/README.md

@@ -14,9 +14,9 @@ Sign up to Supabase - [app.supabase.io](https://app.supabase.io) and create a ne
 
 Go to the Project Settings (the cog icon), open the API tab, and find your API URL and `anon` key, you'll need these in the next step.
 
-The `anon` key is your client-side API key. It allows "anonymous access" to your database, until the user has logged in. Once they have logged in, the keys will switch to the user's own login token.
+Go to the Project Settings (the cog icon), open the API tab, and find your API URL and `publishable` key, you'll need these in the next step.
 
-![Supabase Anon Key](supabase_anon_key.jpg?raw=true 'Supabase Anon Key')
+The `publishable` key is your client-side API key. It allows "anonymous access" to your database, until the user has logged in. Once they have logged in, the keys will switch to the user's own login token.
 
 ### 3. Pull this example git repository
 

examples/realtime/nextjs-auth-presence/README.md

@@ -25,11 +25,9 @@ This will create user tables and profile tables for user management.
 
 ### 3. Get the URL and Key
 
-Go to the Project Settings (the cog icon), open the API tab, and find your API URL and `anon` key, you'll need these in the next step.
+Go to the Project Settings (the cog icon), open the API tab, and find your API URL and `publishable` key, you'll need these in the next step.
 
-The `anon` key is your client-side API key. It allows "anonymous access" to your database, until the user has logged in. Once they have logged in, the keys will switch to the user's own login token.
-
-![Supabase Anon Key](supabase_anon_key.jpg?raw=true 'Supabase Anon Key')
+The `publishable` key is your client-side API key. It allows "anonymous access" to your database, until the user has logged in. Once they have logged in, the keys will switch to the user's own login token.
 
 ### 4. Pull this example git repository
 

examples/slack-clone/nextjs-slack-clone/README.md

@@ -40,7 +40,7 @@ The `anon` key is your client-side API key. It allows "anonymous access" to your
 
 ![image](https://user-images.githubusercontent.com/10214025/88916245-528c2680-d298-11ea-8a71-708f93e1ce4f.png)
 
-**_NOTE_**: The `service_role` key has full access to your data, bypassing any security policies. These keys have to be kept secret and are meant to be used in server environments and never on a client or browser.
+**_NOTE_**: The `secret` key has full access to your data, bypassing any security policies. These keys have to be kept secret and are meant to be used in server environments and never on a client or browser.
 
 ## Supabase details
 

examples/storage/protomaps/supabase/functions/maps-private/index.ts

@@ -23,9 +23,10 @@ Deno.serve((req) => {
   const reqUrl = new URL(req.url)
   const url = `${Deno.env.get('SUPABASE_URL')}/storage/v1/object/authenticated${reqUrl.pathname}`
 
+  const SUPABASE_SECRET_KEYS = JSON.parse(Deno.env.get('SUPABASE_SECRET_KEYS')!)
   const { method, headers } = req
   // Add Auth header
   const modHeaders = new Headers(headers)
-  modHeaders.append('authorization', `Bearer ${Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!}`)
+  modHeaders.append('authorization', `Bearer ${Deno.env.get(SUPABASE_SECRET_KEYS['default'])!}`)
   return fetch(url, { method, headers: modHeaders })
 })

examples/storage/resumable-upload-signed-uppy/supabase/functions/create-upload-token/index.ts

@@ -1,11 +1,13 @@
 import 'jsr:@supabase/functions-js/edge-runtime.d.ts'
 import { createClient } from 'jsr:@supabase/supabase-js'
 
+const SUPABASE_SECRET_KEYS = JSON.parse(Deno.env.get('SUPABASE_SECRET_KEYS')!)
+
 Deno.serve(async (req) => {
   const SUPABASE_URL = Deno.env.get('SUPABASE_URL') ?? ''
-  const SUPABASE_SERVICE_ROLE_KEY = Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') ?? ''
+  const SUPABASE_SECRET_KEY = Deno.env.get(SUPABASE_SECRET_KEYS['default']) ?? ''
 
-  const supabase = createClient(SUPABASE_URL, SUPABASE_SERVICE_ROLE_KEY)
+  const supabase = createClient(SUPABASE_URL, SUPABASE_SECRET_KEY)
 
   try {
     const { filename } = await req.json()

examples/storage/resumable-upload-uppy/README.md

@@ -10,7 +10,7 @@ This example shows how to use [Supabase Storage](https://supabase.com/docs/refer
 - Open the index.html file and replace the following variables with your own:
 
 ```js
-const SUPABASE_ANON_KEY = '' // your project's anon key
+const SUPABASE_PUBLISHABLE_KEY = '' // your project's publishable key
 const SUPABASE_PROJECT_ID = '' // your project ref
 const STORAGE_BUCKET = '' // your storage bucket name
 const BEARER_TOKEN = '' // your bearer token

examples/storage/resumable-upload-uppy/index.html

@@ -44,7 +44,7 @@
         Tus,
       } from 'https://releases.transloadit.com/uppy/v3.6.1/uppy.min.mjs'
 
-      const SUPABASE_ANON_KEY = 'replace-with-your-publishable-key'
+      const SUPABASE_PUBLISHABLE_KEY = 'replace-with-your-publishable-key'
       const SUPABASE_PROJECT_ID = 'replace-with-your-project-id'
       const STORAGE_BUCKET = 'replace-with-your-bucket-id'
       const BEARER_TOKEN='replace-with-your-bearer-token'
@@ -63,7 +63,7 @@
           endpoint: supabaseStorageURL,
           headers: {
             authorization: `Bearer ${BEARER_TOKEN}`,
-            apikey: SUPABASE_ANON_KEY,
+            apikey: SUPABASE_PUBLISHABLE_KEY,
           },
           uploadDataDuringCreation: true,
           chunkSize: 6 * 1024 * 1024,

examples/todo-list/nextjs-todo-list/README.md

@@ -29,7 +29,7 @@ The `anon` key is your client-side API key. It allows "anonymous access" to your
 
 ![image](https://user-images.githubusercontent.com/10214025/88916245-528c2680-d298-11ea-8a71-708f93e1ce4f.png)
 
-**_NOTE_**: The `service_role` key has full access to your data, bypassing any security policies. These keys have to be kept secret and are meant to be used in server environments and never on a client or browser.
+**_NOTE_**: The `secret` key has full access to your data, bypassing any security policies. These keys have to be kept secret and are meant to be used in server environments and never on a client or browser.
 
 ## Supabase details
 

examples/todo-list/sveltejs-todo-list/.env.example

@@ -1,3 +1,3 @@
 # Update these with your Supabase details from your project settings > API
 VITE_SUPABASE_URL=https://your-project.supabase.co
-VITE_SUPABASE_ANON_KEY=your-publishable-key
+VITE_SUPABASE_PUBLISHABLE_KEY=your-publishable-key

examples/todo-list/sveltejs-todo-list/README.md

@@ -22,7 +22,7 @@ The `anon` key is your client-side API key. It allows "anonymous access" to your
 
 ![image](https://user-images.githubusercontent.com/10214025/88916245-528c2680-d298-11ea-8a71-708f93e1ce4f.png)
 
-**_NOTE_**: The `service_role` key has full access to your data, bypassing any security policies. These keys have to be kept secret and are meant to be used in server environments and never on a client or browser.
+**_NOTE_**: The `secret` key has full access to your data, bypassing any security policies. These keys have to be kept secret and are meant to be used in server environments and never on a client or browser.
 
 ## Supabase details
 

examples/todo-list/sveltejs-todo-list/src/lib/db.ts

@@ -3,5 +3,5 @@ import type { Database } from './schema'
 
 export const supabase = createClient<Database>(
   import.meta.env.VITE_SUPABASE_URL,
-  import.meta.env.VITE_SUPABASE_ANON_KEY
+  import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY
 )

examples/user-management/angular-user-management/README.md

@@ -56,13 +56,13 @@ create policy "Anyone can upload an avatar." on storage.objects
 
 ### 3. Configure environment variables
 
-Update the `src/environments/environment.ts` file with your Supabase project URL and anon key:
+Update the `src/environments/environment.ts` file with your Supabase project URL and publishable key:
 
 ```typescript
 export const environment = {
   production: false,
   supabaseUrl: 'YOUR_SUPABASE_URL',
-  supabaseKey: 'YOUR_SUPABASE_ANON_KEY',
+  supabasePublishableKey: 'YOUR_SUPABASE_PUBLISHABLE_KEY',
 }
 ```
 

examples/user-management/angular-user-management/src/app/supabase.service.ts

@@ -16,7 +16,7 @@ export class SupabaseService {
   private supabase: SupabaseClient
 
   constructor() {
-    this.supabase = createClient(environment.supabaseUrl, environment.supabaseKey)
+    this.supabase = createClient(environment.supabaseUrl, environment.supabasePublishableKey)
   }
 
   async getUser(): Promise<User | null> {

examples/user-management/angular-user-management/src/environments/environment.ts

@@ -1,5 +1,5 @@
 export const environment = {
   production: false,
   supabaseUrl: 'YOUR_SUPABASE_URL',
-  supabaseKey: 'YOUR_SUPABASE_KEY',
+  supabasePublishableKey: 'YOUR_SUPABASE_PUBLISHABLE_KEY',
 }

examples/user-management/expo-push-notifications/supabase/functions/push/index.ts

@@ -19,9 +19,10 @@ interface WebhookPayload {
   old_record: null | Notification
 }
 
+const SUPABASE_SECRET_KEYS = JSON.parse(Deno.env.get('SUPABASE_SECRET_KEYS')!)
 const supabase = createClient(
   Deno.env.get('SUPABASE_URL')!,
-  Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!
+  Deno.env.get(SUPABASE_SECRET_KEYS['default'])!
 )
 
 Deno.serve(async (req) => {

examples/user-management/expo-user-management/README.md

@@ -22,9 +22,9 @@ The `anon` key is your client-side API key. It allows "anonymous access" to your
 
 ![image](https://user-images.githubusercontent.com/10214025/88916245-528c2680-d298-11ea-8a71-708f93e1ce4f.png)
 
-**_NOTE_**: The `service_role` key has full access to your data, bypassing any security policies. These keys have to be kept secret and are meant to be used in server environments and never on a client or browser.
+**_NOTE_**: The `secret` key has full access to your data, bypassing any security policies. These keys have to be kept secret and are meant to be used in server environments and never on a client or browser.
 
-Run `cp .env.example .env` and fill your URL and anon key in the newly created `.env` file.
+Run `cp .env.example .env` and fill your URL and publishable key in the newly created `.env` file.
 
 ### 4. Install the dependencies & run the project:
 

examples/user-management/expo-user-management/lib/supabase.ts

@@ -2,9 +2,9 @@ import { createClient } from '@supabase/supabase-js'
 import AsyncStorage from '@react-native-async-storage/async-storage'
 
 const supabaseUrl = process.env.EXPO_PUBLIC_SUPABASE_URL!
-const supabaseKey = process.env.EXPO_PUBLIC_SUPABASE_KEY!
+const supabasePublishableKey = process.env.EXPO_PUBLIC_SUPABASE_PUBLISHABLE_KEY!
 
-export const supabase = createClient(supabaseUrl, supabaseKey, {
+export const supabase = createClient(supabaseUrl, supabasePublishableKey, {
   auth: {
     storage: AsyncStorage as any,
     autoRefreshToken: true,

examples/user-management/flutter-user-management/.env.example

@@ -1,2 +1,2 @@
 SUPABASE_URL=https://mysupabasereference.supabase.co
-SUPABASE_ANON_KEY=my.supabase.anon.key
+SUPABASE_PUBLISHABLE_KEY=my.supabase.publishable.key

examples/user-management/ionic-angular-user-management/README.md

@@ -39,13 +39,13 @@ Once your database has started, run the "User Management Starter" quickstart. In
 
 ### 3. Get the URL and Key
 
-Go to the Project Settings (the cog icon), open the API tab, and find your API URL and `anon` key, you'll need these in the next step.
+Go to the Project Settings (the cog icon), open the API tab, and find your API URL and `publishable` key, you'll need these in the next step.
 
-The `anon` key is your client-side API key. It allows "anonymous access" to your database, until the user has logged in. Once they have logged in, the keys will switch to the user's own login token. This enables row level security for your data. Read more about this [below](#postgres-row-level-security).
+The `publishable` key is your client-side API key. It allows "anonymous access" to your database, until the user has logged in. Once they have logged in, the keys will switch to the user's own login token. This enables row level security for your data. Read more about this [below](#postgres-row-level-security).
 
 ![image](https://user-images.githubusercontent.com/10214025/88916245-528c2680-d298-11ea-8a71-708f93e1ce4f.png)
 
-**_NOTE_**: The `service_role` key has full access to your data, bypassing any security policies. These keys have to be kept secret and are meant to be used in server environments and never on a client or browser.
+**_NOTE_**: The `secret` key has full access to your data, bypassing any security policies. These keys have to be kept secret and are meant to be used in server environments and never on a client or browser.
 
 ### 4. Env vars
 
@@ -55,7 +55,7 @@ Update your environment file `environment.ts`
 export const environment = {
   // ...
   supabaseUrl: "YOUR_SUPBASE_URL",
-  supbaseKey: "YOUR_SUPABASE_KEY"
+  supabasePublishableKey: "YOUR_SUPABASE_PUBLISHABLE_KEY"
 };
 ```
 

examples/user-management/ionic-angular-user-management/src/app/supabase.service.ts

@@ -19,7 +19,7 @@ export class SupabaseService {
     private loadingCtrl: LoadingController,
     private toastCtrl: ToastController
   ) {
-    this.supabase = createClient(environment.supabaseUrl, environment.supabaseKey)
+    this.supabase = createClient(environment.supabaseUrl, environment.supabasePublishableKey)
   }
 
   get user() {

examples/user-management/ionic-angular-user-management/src/environments/environment.prod.ts

@@ -1,5 +1,5 @@
 export const environment = {
   production: true,
   supabaseUrl: '',
-  supabaseKey: '',
+  supabasePublishableKey: '',
 }

examples/user-management/ionic-angular-user-management/src/environments/environment.ts

@@ -5,7 +5,7 @@
 export const environment = {
   production: false,
   supabaseUrl: '',
-  supabaseKey: '',
+  supabasePublishableKey: '',
 }
 
 /*

examples/user-management/ionic-react-user-management/README.md

@@ -25,7 +25,7 @@ This demonstrates how to use:
 
 The Vercel deployment will guide you through creating a Supabase account and project. After installation of the Supabase integration, all relevant environment variables will be set up so that the project is usable immediately after deployment 🚀.
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?project-name=supabase-ionic-react&repo-name=supabase-ionic-react&envDescription=Find%20the%20Supabase%20URL%20and%20key%20in%20your%20project%20settings%20at%20supabase.com%2Fdashboard&repository-url=https%3A%2F%2Fgithub.com%2Fsupabase%2Fsupabase%2Ftree%2Fmaster%2Fexamples%2Fuser-management%2Fionic-react-user-management&env=VITE_SUPABASE_URL%2CVITE_SUPABASE_KEY)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?project-name=supabase-ionic-react&repo-name=supabase-ionic-react&envDescription=Find%20the%20Supabase%20URL%20and%20key%20in%20your%20project%20settings%20at%20supabase.com%2Fdashboard&repository-url=https%3A%2F%2Fgithub.com%2Fsupabase%2Fsupabase%2Ftree%2Fmaster%2Fexamples%2Fuser-management%2Fionic-react-user-management&env=VITE_SUPABASE_URL%2CVITE_SUPABASE_PUBLISHABLE_KEY)
 
 ## Build from scratch
 
@@ -45,7 +45,7 @@ The publishable key is your client-side API key. It allows "anonymous access" to
 
 ![image](https://user-images.githubusercontent.com/10214025/88916245-528c2680-d298-11ea-8a71-708f93e1ce4f.png)
 
-**_NOTE_**: The `service_role` key has full access to your data, bypassing any security policies. These keys have to be kept secret and are meant to be used in server environments and never on a client or browser.
+**_NOTE_**: The `secret` key has full access to your data, bypassing any security policies. These keys have to be kept secret and are meant to be used in server environments and never on a client or browser.
 
 ### 4. Env vars
 
@@ -53,7 +53,7 @@ Create a `.env.local` file in the project root (or update your existing `.env.lo
 
 ```bash
 VITE_SUPABASE_URL=YOUR_SUPABASE_URL
-VITE_SUPABASE_KEY=YOUR_SUPABASE_PUBLISHABLE_KEY
+VITE_SUPABASE_PUBLISHABLE_KEY=YOUR_SUPABASE_PUBLISHABLE_KEY
 ```
 
 Populate these variables with your project's URL and publishable key from the Supabase dashboard.

examples/user-management/ionic-react-user-management/src/supabaseClient.ts

@@ -1,12 +1,12 @@
 import { createClient } from '@supabase/supabase-js'
 
 const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
-const supabaseKey = import.meta.env.VITE_SUPABASE_KEY
+const supabasePublishableKey = import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY
 
-if (!supabaseUrl || !supabaseKey) {
+if (!supabaseUrl || !supabasePublishableKey) {
   throw new Error(
-    'Missing Supabase environment variables: VITE_SUPABASE_URL and VITE_SUPABASE_KEY must be set.'
+    'Missing Supabase environment variables: VITE_SUPABASE_URL and VITE_SUPABASE_PUBLISHABLE_KEY must be set.'
   )
 }
 
-export const supabase = createClient(supabaseUrl, supabaseKey)
+export const supabase = createClient(supabaseUrl, supabasePublishableKey)

examples/user-management/ionic-vue-user-management/README.md

@@ -25,7 +25,7 @@ This demonstrates how to use:
 
 The Vercel deployment will guide you through creating a Supabase account and project. After installation of the Supabase integration, all relevant environment variables will be set up so that the project is usable immediately after deployment 🚀.
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?project-name=supabase-ionic-vue&repo-name=supabase-ionic-vue&envDescription=Find%20the%20Supabase%20URL%20and%20key%20in%20the%20your%20auto-generated%20docs%20at%20app.supabase.io&repository-url=https%3A%2F%2Fgithub.com%2Fmhartington%2Fsupabase-ionic-vue%2Ftree%2Fmain&env=VUE_APP_SUPABASE_URL%2CVUE_APP_SUPABASE_KEY)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?project-name=supabase-ionic-vue&repo-name=supabase-ionic-vue&envDescription=Find%20the%20Supabase%20URL%20and%20key%20in%20the%20your%20auto-generated%20docs%20at%20app.supabase.io&repository-url=https%3A%2F%2Fgithub.com%2Fmhartington%2Fsupabase-ionic-vue%2Ftree%2Fmain&env=VUE_APP_SUPABASE_URL%2CVUE_APP_SUPABASE_PUBLISHABLE_KEY)
 
 ## Build from scratch
 
@@ -45,7 +45,7 @@ The `anon` key is your client-side API key. It allows "anonymous access" to your
 
 ![image](https://user-images.githubusercontent.com/10214025/88916245-528c2680-d298-11ea-8a71-708f93e1ce4f.png)
 
-**_NOTE_**: The `service_role` key has full access to your data, bypassing any security policies. These keys have to be kept secret and are meant to be used in server environments and never on a client or browser.
+**_NOTE_**: The `secret` key has full access to your data, bypassing any security policies. These keys have to be kept secret and are meant to be used in server environments and never on a client or browser.
 
 ### 4. Env vars
 
@@ -55,7 +55,7 @@ Update your environment file `environment.ts`
 export const environment = {
   // ...
   supabaseUrl: "YOUR_SUPABASE_URL",
-  supabaseKey: "YOUR_SUPABASE_KEY"
+  supabasePublishableKey: "YOUR_SUPABASE_PUBLISHABLE_KEY"
 };
 ```
 

examples/user-management/ionic-vue-user-management/src/supabase.ts

@@ -1,7 +1,7 @@
 import { createClient } from '@supabase/supabase-js'
 
 const supabaseUrl = process.env.VUE_APP_SUPABASE_URL
-const supabaseKey = process.env.VUE_APP_SUPABASE_KEY
+const supabasePublishableKey = process.env.VUE_APP_SUPABASE_PUBLISHABLE_KEY
 
 if (!supabaseUrl) {
   throw new Error(
@@ -9,10 +9,10 @@ if (!supabaseUrl) {
   )
 }
 
-if (!supabaseKey) {
+if (!supabasePublishableKey) {
   throw new Error(
-    'Environment variable VUE_APP_SUPABASE_KEY is not set. Please define it before starting the application.'
+    'Environment variable VUE_APP_SUPABASE_PUBLISHABLE_KEY is not set. Please define it before starting the application.'
   )
 }
 
-export const supabase = createClient(supabaseUrl, supabaseKey)
+export const supabase = createClient(supabaseUrl, supabasePublishableKey)

examples/user-management/nextjs-user-management/README.md

@@ -43,7 +43,7 @@ The `anon` key is your client-side API key. It allows "anonymous access" to your
 
 ![image](https://user-images.githubusercontent.com/10214025/88916245-528c2680-d298-11ea-8a71-708f93e1ce4f.png)
 
-**_NOTE_**: The `service_role` key has full access to your data, bypassing any security policies. These keys have to be kept secret and are meant to be used in server environments and never on a client or browser.
+**_NOTE_**: The `secret` key has full access to your data, bypassing any security policies. These keys have to be kept secret and are meant to be used in server environments and never on a client or browser.
 
 ## Supabase details
 

examples/user-management/refine-user-management/README.MD

@@ -43,7 +43,7 @@ The `anon` key is your client-side API key. It allows "anonymous access" to your
 
 ![image](https://user-images.githubusercontent.com/10214025/88916245-528c2680-d298-11ea-8a71-708f93e1ce4f.png)
 
-**_NOTE_**: The `service_role` key has full access to your data, bypassing any security policies. These keys have to be kept secret and are meant to be used in server environments and never on a client or browser.
+**_NOTE_**: The `secret` key has full access to your data, bypassing any security policies. These keys have to be kept secret and are meant to be used in server environments and never on a client or browser.
 
 ### 4. Env vars
 
@@ -51,7 +51,7 @@ Create a file in this folder `.env.local`
 
 ```
 VITE_SUPABASE_URL=YOUR_SUPABASE_URL
-VITE_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
+VITE_SUPABASE_PUBLISHABLE_KEY=YOUR_SUPABASE_PUBLISHABLE_KEY
 ```
 
 Populate this file with your URL and Key.

examples/user-management/refine-user-management/src/utility/supabaseClient.ts

@@ -1,9 +1,9 @@
 import { createClient } from '@refinedev/supabase'
 
 const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
-const supabaseKey = import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY
+const supabasePublishableKey = import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY
 
-export const supabaseClient = createClient(supabaseUrl, supabaseKey, {
+export const supabaseClient = createClient(supabaseUrl, supabasePublishableKey, {
   db: {
     schema: 'public',
   },

examples/user-management/solid-user-management/README.md

@@ -45,7 +45,7 @@ The `anon` key is your client-side API key. It allows "anonymous access" to your
 
 ![image](https://user-images.githubusercontent.com/10214025/88916245-528c2680-d298-11ea-8a71-708f93e1ce4f.png)
 
-**_NOTE_**: The `service_role` key has full access to your data, bypassing any security policies. These keys have to be kept secret and are meant to be used in server environments and never on a client or browser.
+**_NOTE_**: The `secret` key has full access to your data, bypassing any security policies. These keys have to be kept secret and are meant to be used in server environments and never on a client or browser.
 
 ### 4. Env vars
 

examples/user-management/svelte-user-management/.env.example

@@ -1,2 +1,2 @@
 VITE_SUPABASE_URL=https://your-project-ref.supabase.co
-VITE_SUPABASE_ANON_KEY=your-publishable-key
+VITE_SUPABASE_PUBLISHABLE_KEY=your-publishable-key

examples/user-management/svelte-user-management/README.md

@@ -43,7 +43,7 @@ The `anon` key is your client-side API key. It allows "anonymous access" to your
 
 ![image](https://user-images.githubusercontent.com/10214025/88916245-528c2680-d298-11ea-8a71-708f93e1ce4f.png)
 
-**_NOTE_**: The `service_role` key has full access to your data, bypassing any security policies. These keys have to be kept secret and are meant to be used in server environments and never on a client or browser.
+**_NOTE_**: The `secret` key has full access to your data, bypassing any security policies. These keys have to be kept secret and are meant to be used in server environments and never on a client or browser.
 
 ### 4. Env vars
 

examples/user-management/sveltekit-user-management/README.md

@@ -18,7 +18,7 @@ The `anon` key is your client-side API key. It allows "anonymous access" to your
 
 ![image](https://user-images.githubusercontent.com/10214025/88916245-528c2680-d298-11ea-8a71-708f93e1ce4f.png)
 
-**_NOTE_**: The `service_role` key has full access to your data, bypassing any security policies. These keys have to be kept secret and are meant to be used in server environments and never on a client or browser.
+**_NOTE_**: The `secret` key has full access to your data, bypassing any security policies. These keys have to be kept secret and are meant to be used in server environments and never on a client or browser.
 
 ### 4. Env vars
 

examples/user-management/swift-user-management/.env.example

@@ -1,4 +1,4 @@
 # Get these from your API settings: https://supabase.com/dashboard/project/_/settings/api
 
 SUPABASE_URL=https://mysupabasereference.supabase.co
-SUPABASE_ANON_KEY=my.supabase.anon.key
+SUPABASE_PUBLISHABLE_KEY=my.supabase.publishable.key

examples/user-management/swift-user-management/swift-user-management/Supabase.swift

@@ -10,5 +10,5 @@ import Supabase
 
 let supabase = SupabaseClient(
   supabaseURL: URL(string: DotEnv.SUPABASE_URL)!,
-  supabaseKey: DotEnv.SUPABASE_ANON_KEY
+  supabaseKey: DotEnv.SUPABASE_PUBLISHABLE_KEY
 )

examples/user-management/vue3-user-management/.env.example

@@ -1,2 +1,2 @@
 VITE_SUPABASE_URL=https://your-project-ref.supabase.co
-VITE_SUPABASE_KEY=your-publishable-key
+VITE_SUPABASE_PUBLISHABLE_KEY=your-publishable-key

examples/user-management/vue3-user-management/src/supabase.js

@@ -1,6 +1,6 @@
 import { createClient } from '@supabase/supabase-js'
 
 const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
-const supabasePublishableKey = import.meta.env.VITE_SUPABASE_KEY
+const supabasePublishableKey = import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY
 
 export const supabase = createClient(supabaseUrl, supabasePublishableKey)

examples/with-cloudflare-workers/README.md

@@ -38,10 +38,10 @@ npx wrangler secret put SUPABASE_URL
 npx wrangler dev
 ```
 
-**Add a secret for SUPABASE_ANON_KEY**
+**Add a secret for SUPABASE_PUBLISHABLE_KEY**
 
 ```bash
-npx wrangler secret put SUPABASE_ANON_KEY
+npx wrangler secret put SUPABASE_PUBLISHABLE_KEY
 ```
 
 **Query data from Supabase**

examples/with-cloudflare-workers/src/index.js

@@ -1,8 +1,8 @@
 import { createClient } from '@supabase/supabase-js'
 
 export default {
-  async fetch(request, { SUPABASE_URL, SUPABASE_ANON_KEY }) {
-    const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY)
+  async fetch(request, { SUPABASE_URL, SUPABASE_PUBLISHABLE_KEY }) {
+    const supabase = createClient(SUPABASE_URL, SUPABASE_PUBLISHABLE_KEY)
 
     const { data } = await supabase.from('articles').select('*')
     return new Response(JSON.stringify(data), {