feat: update prop name and add random string generation to AUTH0_SECRET

Author: darrickyong

main/docs/quickstart/spa/angular/index.mdx

@@ -789,7 +789,7 @@ export const localEnvSnippet = `export const environment = {
     <Tabs>
       <Tab title="Quick Setup (recommended)">
         Create an Auth0 App and copy the pre-filled `.env` file with the right configuration values.
-        <CreateInteractiveApp type="Angular" appType="spa" allowedCallbackUrls={["http://localhost:4200"]} allowedLogoutUrls={["http://localhost:4200"]} allowedOriginUrls={["http://localhost:4200"]}/>
+        <CreateInteractiveApp placeholderText="Angular" appType="spa" allowedCallbackUrls={["http://localhost:4200"]} allowedLogoutUrls={["http://localhost:4200"]} allowedOriginUrls={["http://localhost:4200"]}/>
         <AuthCodeBlock children={localEnvSnippet} language="typescript" filename="src/environments/environment.ts" />
       </Tab>
 

main/docs/quickstart/spa/react/index.mdx

@@ -706,7 +706,7 @@ VITE_AUTH0_CLIENT_ID={yourClientId}`;
     <Tabs>
       <Tab title="Quick Setup (recommended)">
         Create an Auth0 App and copy the pre-filled `.env` file with the right configuration values.
-        <CreateInteractiveApp type="React" appType="spa" allowedCallbackUrls={["http://localhost:5173"]} allowedLogoutUrls={["http://localhost:5173"]} allowedOriginUrls={["http://localhost:5173"]}/>
+        <CreateInteractiveApp placeholderText="React" appType="spa" allowedCallbackUrls={["http://localhost:5173"]} allowedLogoutUrls={["http://localhost:5173"]} allowedOriginUrls={["http://localhost:5173"]}/>
         <AuthCodeBlock children={localEnvSnippet} language="shellscript" filename=".env" />
       </Tab>
 

main/docs/quickstart/spa/svelte/index.mdx

@@ -133,7 +133,7 @@ VITE_AUTH0_CLIENT_ID={yourClientId}`;
     <Tabs>
       <Tab title="Quick Setup (recommended)">
         Create an Auth0 App and copy the pre-filled `.env` file with the right configuration values.
-        <CreateInteractiveApp type="Svelte" appType="spa" allowedCallbackUrls={["http://localhost:5173"]} allowedLogoutUrls={["http://localhost:5173"]} allowedOriginUrls={["http://localhost:5173"]}/>
+        <CreateInteractiveApp placeholderText="Svelte" appType="spa" allowedCallbackUrls={["http://localhost:5173"]} allowedLogoutUrls={["http://localhost:5173"]} allowedOriginUrls={["http://localhost:5173"]}/>
         <AuthCodeBlock children={localEnvSnippet} language="shellscript" filename=".env" />
       </Tab>
 

main/docs/quickstart/spa/vanillajs/index.mdx

@@ -857,7 +857,7 @@ VITE_AUTH0_CLIENT_ID={yourClientId}`;
     <Tabs>
       <Tab title="Quick Setup (recommended)">
         Create an Auth0 App and copy the pre-filled `.env` file with the right configuration values.
-        <CreateInteractiveApp type="Vanilla JS" appType="spa" allowedCallbackUrls={["http://localhost:5173"]} allowedLogoutUrls={["http://localhost:5173"]} allowedOriginUrls={["http://localhost:5173"]}/>
+        <CreateInteractiveApp placeholderText="Vanilla JS" appType="spa" allowedCallbackUrls={["http://localhost:5173"]} allowedLogoutUrls={["http://localhost:5173"]} allowedOriginUrls={["http://localhost:5173"]}/>
         <AuthCodeBlock children={localEnvSnippet} language="shellscript" filename=".env.local" />
       </Tab>
 

main/docs/quickstart/spa/vuejs/index.mdx

@@ -742,7 +742,7 @@ VITE_AUTH0_CLIENT_ID={yourClientId}`;
     <Tabs>
       <Tab title="Quick Setup (recommended)">
         Create an Auth0 App and copy the pre-filled `.env` file with the right configuration values.
-        <CreateInteractiveApp type="Vue" appType="spa" allowedCallbackUrls={["http://localhost:5173"]} allowedLogoutUrls={["http://localhost:5173"]} allowedOriginUrls={["http://localhost:5173"]}/>
+        <CreateInteractiveApp placeholderText="Vue" appType="spa" allowedCallbackUrls={["http://localhost:5173"]} allowedLogoutUrls={["http://localhost:5173"]} allowedOriginUrls={["http://localhost:5173"]}/>
         <AuthCodeBlock children={localEnvSnippet} language="shellscript" filename=".env" />
       </Tab>
 

main/docs/quickstart/webapp/nextjs/index.mdx

@@ -676,10 +676,16 @@ import {CreateInteractiveApp} from "/snippets/recipe.jsx";
 
 This quickstart demonstrates how to add Auth0 authentication to a Next.js application. You'll build a full-stack web application with server-side rendering, secure login functionality, and protected routes using the Auth0 Next.js SDK.
 
+
+export function generateRandomString(length) {
+  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  return Array.from({length}, () => chars[Math.floor(Math.random() * chars.length)]).join('');
+} 
+
 export const localEnvSnippet = `AUTH0_DOMAIN={yourDomain}
 AUTH0_CLIENT_ID={yourClientId}
 AUTH0_CLIENT_SECRET={yourClientSecret}
-AUTH0_SECRET=YOUR_LONG_RANDOM_SECRET_HERE
+AUTH0_SECRET=${generateRandomString(32)}
 APP_BASE_URL=http://localhost:3000`;
 
 <Steps>
@@ -728,7 +734,7 @@ APP_BASE_URL=http://localhost:3000`;
     <Tabs>
       <Tab title="Quick Setup (recommended)">
         Create an Auth0 App and copy the pre-filled `.env` file with the right configuration values.
-        <CreateInteractiveApp type="Next.js" appType="regular_web" allowedCallbackUrls={["http://localhost:3000/auth/callback"]} allowedLogoutUrls={["http://localhost:3000"]} allowedOriginUrls={["http://localhost:3000"]}/>
+        <CreateInteractiveApp placeholderText="Next.js" appType="regular_web" allowedCallbackUrls={["http://localhost:3000/auth/callback"]} allowedLogoutUrls={["http://localhost:3000"]} allowedOriginUrls={["http://localhost:3000"]}/>
         <AuthCodeBlock children={localEnvSnippet} language="shellscript" filename=".env.local" />
       </Tab>
 

main/snippets/recipe.jsx

@@ -670,7 +670,7 @@ export const SignUpForm = () => {
 };
 
 export const CreateInteractiveApp = ({
-  type = 'Auth0',
+  placeholderText = 'Auth0',
   appType = 'regular_web', // 'regular_web' | 'spa' | 'native' | 'non_interactive',
   allowedCallbackUrls = ['localhost:3000'],
   allowedLogoutUrls = ['localhost:3000'],
@@ -800,7 +800,7 @@ export const CreateInteractiveApp = ({
               text-gray-900 dark:text-gray-200
               focus:outline-none dark:focus:outline-none
             "
-            placeholder={`My ${type} App`}
+            placeholder={`My ${placeholderText} App`}
             value={name}
             onChange={(e) => setName(e.target.value)}
           />