fix: Use the new envVars property in the shadcn blocks (supabase#37585)

* Search and replace all mentions of SUPABASE_ANON_KEY.

* Copy over some comments from the nextjs template.

* Bump shadcn version.

* Change the building of the blocks to append envVars and docs.

* Use the new envVars property in the clients.

* Rebuild all blocks.

* Fix the wording.

* Update the docs.

Author: ivasilov

apps/ui-library/.env

@@ -1,5 +1,5 @@
 # Default to local supabase for local development
 NEXT_PUBLIC_SUPABASE_URL=http://localhost:54321
-NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0
+NEXT_PUBLIC_SUPABASE_PUBLISHABLE_OR_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0
 NEXT_PUBLIC_BASE_PATH=/ui
 NEXT_PUBLIC_API_URL="http://localhost:8080/platform"

apps/ui-library/content/docs/nextjs/client.mdx

@@ -19,11 +19,11 @@ If you've already set up your Supabase client—either using the `npx create-nex
 
 ### Getting started
 
-First, add a `.env` file to your project with the following environment variables:
+After installing the block, you'll have the following environment variables in your `.env.local` file:
 
 ```env
 NEXT_PUBLIC_SUPABASE_URL=
-NEXT_PUBLIC_SUPABASE_ANON_KEY=
+NEXT_PUBLIC_SUPABASE_PUBLISHABLE_OR_ANON_KEY=
 ```
 
 - If you're using supabase.com, you can find these values in the [Connect modal](https://supabase.com/dashboard/project/_?showConnect=true) under App Frameworks or in your project's [API settings](https://supabase.com/dashboard/project/_/settings/api).

apps/ui-library/content/docs/nextjs/password-based-auth.mdx

@@ -24,11 +24,11 @@ Once you install the block in your Next.js project, you'll get all the necessary
 
 ### Getting started
 
-First, add a `.env` file to your project with the following environment variables:
+After installing the block, you'll have the following environment variables in your `.env.local` file:
 
 ```env
 NEXT_PUBLIC_SUPABASE_URL=
-NEXT_PUBLIC_SUPABASE_ANON_KEY=
+NEXT_PUBLIC_SUPABASE_PUBLISHABLE_OR_ANON_KEY=
 ```
 
 - If you're using supabase.com, you can find these values in the [Connect modal](https://supabase.com/dashboard/project/_?showConnect=true) under App Frameworks or in your project's [API settings](https://supabase.com/dashboard/project/_/settings/api).

apps/ui-library/content/docs/nextjs/social-auth.mdx

@@ -26,11 +26,11 @@ Once you install the block in your Next.js project, you'll get all the necessary
 
 ### Getting started
 
-First, add a `.env` file to your project with the following environment variables:
+After installing the block, you'll have the following environment variables in your `.env.local` file:
 
 ```env
 NEXT_PUBLIC_SUPABASE_URL=
-NEXT_PUBLIC_SUPABASE_ANON_KEY=
+NEXT_PUBLIC_SUPABASE_PUBLISHABLE_OR_ANON_KEY=
 ```
 
 - If you're using supabase.com, you can find these values in the [Connect modal](https://supabase.com/dashboard/project/_?showConnect=true) under App Frameworks or in your project's [API settings](https://supabase.com/dashboard/project/_/settings/api).

apps/ui-library/content/docs/react-router/client.mdx

@@ -19,11 +19,11 @@ If you've already set up Supabase clients in your project, you can just continue
 
 ### Getting started
 
-First, add a `.env` file to your project with the following environment variables:
+After installing the block, you'll have the following environment variables in your `.env.local` file:
 
 ```env
 VITE_SUPABASE_URL=
-VITE_SUPABASE_ANON_KEY=
+VITE_SUPABASE_PUBLISHABLE_OR_ANON_KEY=
 ```
 
 - If you're using supabase.com, you can find these values in the [Connect modal](https://supabase.com/dashboard/project/_?showConnect=true) under App Frameworks or in your project's [API settings](https://supabase.com/dashboard/project/_/settings/api).

apps/ui-library/content/docs/react-router/password-based-auth.mdx

@@ -24,11 +24,11 @@ Once you install the block in your React Router project, you'll get all the nece
 
 ### Getting started
 
-First, add a `.env` file to your project with the following environment variables:
+After installing the block, you'll have the following environment variables in your `.env.local` file:
 
 ```env
 VITE_SUPABASE_URL=
-VITE_SUPABASE_ANON_KEY=
+VITE_SUPABASE_PUBLISHABLE_OR_ANON_KEY=
 ```
 
 - If you're using supabase.com, you can find these values in the [Connect modal](https://supabase.com/dashboard/project/_?showConnect=true) under App Frameworks or in your project's [API settings](https://supabase.com/dashboard/project/_/settings/api).

apps/ui-library/content/docs/react-router/social-auth.mdx

@@ -29,11 +29,11 @@ Once you install the block in your React Router project, you'll get all the nece
 
 ### Getting started
 
-First, add a `.env` file to your project with the following environment variables:
+After installing the block, you'll have the following environment variables in your `.env.local` file:
 
 ```env
 VITE_SUPABASE_URL=
-VITE_SUPABASE_ANON_KEY=
+VITE_SUPABASE_PUBLISHABLE_OR_ANON_KEY=
 ```
 
 - If you're using supabase.com, you can find these values in the [Connect modal](https://supabase.com/dashboard/project/_?showConnect=true) under App Frameworks or in your project's [API settings](https://supabase.com/dashboard/project/_/settings/api).

apps/ui-library/content/docs/react/client.mdx

@@ -19,11 +19,11 @@ If you've already set up a Supabase client in your project, you can just continu
 
 ### Getting started
 
-First, add a `.env` file to your project with the following environment variables:
+After installing the block, you'll have the following environment variables in your `.env.local` file:
 
 ```env
 VITE_SUPABASE_URL=
-VITE_SUPABASE_ANON_KEY=
+VITE_SUPABASE_PUBLISHABLE_OR_ANON_KEY=
 ```
 
 - If you're using supabase.com, you can find these values in the [Connect modal](https://supabase.com/dashboard/project/_?showConnect=true) under App Frameworks or in your project's [API settings](https://supabase.com/dashboard/project/_/settings/api).

apps/ui-library/content/docs/react/password-based-auth.mdx

@@ -24,11 +24,11 @@ Once you install the block in your React project, you'll get all the necessary p
 
 ### Getting started
 
-First, add a `.env` file to your project with the following environment variables:
+After installing the block, you'll have the following environment variables in your `.env.local` file:
 
 ```env
 VITE_SUPABASE_URL=
-VITE_SUPABASE_ANON_KEY=
+VITE_SUPABASE_PUBLISHABLE_OR_ANON_KEY=
 ```
 
 - If you're using supabase.com, you can find these values in the [Connect modal](https://supabase.com/dashboard/project/_?showConnect=true) under App Frameworks or in your project's [API settings](https://supabase.com/dashboard/project/_/settings/api).

apps/ui-library/content/docs/react/social-auth.mdx

@@ -26,11 +26,11 @@ Once you install the block in your React project, you'll get all the necessary p
 
 ### Getting started
 
-First, add a `.env` file to your project with the following environment variables:
+After installing the block, you'll have the following environment variables in your `.env.local` file:
 
 ```env
 VITE_SUPABASE_URL=
-VITE_SUPABASE_ANON_KEY=
+VITE_SUPABASE_PUBLISHABLE_OR_ANON_KEY=
 ```
 
 - If you're using supabase.com, you can find these values in the [Connect modal](https://supabase.com/dashboard/project/_?showConnect=true) under App Frameworks or in your project's [API settings](https://supabase.com/dashboard/project/_/settings/api).