feat: add interactivity to quickstarts

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

@@ -7,6 +7,9 @@ title: Add Login to Your Angular Application
 
 
 import {AuthCodeGroup} from "/snippets/AuthCodeGroup.jsx";
+import {AuthCodeBlock} from "/snippets/AuthCodeBlock.jsx";
+import {CreateInteractiveApp} from "/snippets/recipe.jsx";
+
 
 <Accordion title="AI Prompt" defaultOpen icon="microchip-ai" iconType="sharp-solid">
   **Using AI to integrate Auth0?** Add this prompt to Cursor, Windsurf, Copilot, Claude Code or your favourite AI-powered IDE to speed up development.
@@ -751,6 +754,14 @@ SECURITY BEST PRACTICES FOR ANGULAR
 
 This quickstart demonstrates how to add Auth0 authentication to an Angular application. You'll build a secure single-page app with login and logout functionality using Angular's dependency injection system and the Auth0 Angular SDK.
 
+export const localEnvSnippet = `export const environment = {
+  production: false,
+  auth0: {
+    domain: {yourDomain},
+    clientId: {yourClientId}
+  }
+};`;
+
 <Steps>
   <Step title="Create a new project" stepNumber={1}>
     Create a new Angular project for this Quickstart
@@ -776,6 +787,12 @@ This quickstart demonstrates how to add Auth0 authentication to an Angular appli
     You can choose to do this automatically by running a CLI command or do it manually via the Dashboard:
 
     <Tabs>
+      <Tab title="Quick Setup (recommended)">
+        Create an Auth0 App and copy the pre-filled `.env` file with the right configuration values.
+        <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>
+
       <Tab title="CLI">
         Run the following shell command on your project's root directory to create an Auth0 app and generate an environment file:
 

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

@@ -7,6 +7,8 @@ title: Add Login to Your React Application
 
 
 import {AuthCodeGroup} from "/snippets/AuthCodeGroup.jsx";
+import {AuthCodeBlock} from "/snippets/AuthCodeBlock.jsx";
+import {CreateInteractiveApp} from "/snippets/recipe.jsx";
 
 <Accordion title="AI Prompt" defaultOpen icon="microchip-ai" iconType="sharp-solid">
   **Using AI to integrate Auth0?** Add this prompt to Cursor, Windsurf, Copilot, Claude Code or your favourite AI-powered IDE to speed up development.
@@ -674,6 +676,9 @@ import {AuthCodeGroup} from "/snippets/AuthCodeGroup.jsx";
 
 This quickstart demonstrates how to add Auth0 authentication to a React application. You'll build a secure single-page app with login, logout, and user profile features using the Auth0 React SDK.
 
+export const localEnvSnippet = `VITE_AUTH0_DOMAIN={yourDomain}
+VITE_AUTH0_CLIENT_ID={yourClientId}`;
+
 <Steps>
   <Step title="Create a new project" stepNumber={1}>
     Create a new React project for this Quickstart
@@ -699,6 +704,12 @@ This quickstart demonstrates how to add Auth0 authentication to a React applicat
     You can choose to do this automatically by running a CLI command or do it manually via the Dashboard:
 
     <Tabs>
+      <Tab title="Quick Setup (recommended)">
+        Create an Auth0 App and copy the pre-filled `.env` file with the right configuration values.
+        <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>
+
       <Tab title="CLI">
         Run the following shell command on your project's root directory to create an Auth0 app and generate a `.env` file:
 

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

@@ -7,6 +7,8 @@ title: Add Login to Your Svelte Application
 
 
 import {AuthCodeGroup} from "/snippets/AuthCodeGroup.jsx";
+import {AuthCodeBlock} from "/snippets/AuthCodeBlock.jsx";
+import {CreateInteractiveApp} from "/snippets/recipe.jsx";
 
 <Callout icon="pencil" color="#FFC107" iconType="solid">
   This Quickstart is currently in **Beta**. We'd love to hear your feedback!
@@ -99,6 +101,9 @@ import {AuthCodeGroup} from "/snippets/AuthCodeGroup.jsx";
 
 This quickstart demonstrates how to add Auth0 authentication to a Svelte application. You'll build a secure single-page app with login, logout, and user profile features using the Auth0 SPA JS SDK.
 
+export const localEnvSnippet = `VITE_AUTH0_DOMAIN={yourDomain}
+VITE_AUTH0_CLIENT_ID={yourClientId}`;
+
 <Steps>
   <Step title="Create a new project" stepNumber={1}>
     Create a new Svelte project for this Quickstart
@@ -126,6 +131,12 @@ This quickstart demonstrates how to add Auth0 authentication to a Svelte applica
     You can choose to do this automatically by running a CLI command or do it manually via the Dashboard:
 
     <Tabs>
+      <Tab title="Quick Setup (recommended)">
+        Create an Auth0 App and copy the pre-filled `.env` file with the right configuration values.
+        <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>
+
       <Tab title="CLI">
         Run the following shell command on your project's root directory to create an Auth0 app and generate a `.env` file:
 

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

@@ -6,6 +6,8 @@ title: Add Login to Your JavaScript Application
 ---
 
 import {AuthCodeGroup} from "/snippets/AuthCodeGroup.jsx";
+import {AuthCodeBlock} from "/snippets/AuthCodeBlock.jsx";
+import {CreateInteractiveApp} from "/snippets/recipe.jsx";
 
 <Accordion title="AI Prompt" defaultOpen icon="microchip-ai" iconType="sharp-solid">
   **Using AI to integrate Auth0?** Add this prompt to Cursor, Windsurf, Copilot, Claude Code or your favourite AI-powered IDE to speed up development.
@@ -819,6 +821,9 @@ If you're using Auth0 Organizations:
 
 This quickstart shows how to add Auth0 authentication to a vanilla JavaScript application. You'll create a modern single-page app with secure login functionality using plain JavaScript and the Auth0 SPA SDK.
 
+export const localEnvSnippet = `VITE_AUTH0_DOMAIN={yourDomain}
+VITE_AUTH0_CLIENT_ID={yourClientId}`;
+
 <Steps>
   <Step title="Create a new project" stepNumber={1}>
     Create a new JavaScript project for this Quickstart
@@ -850,6 +855,12 @@ This quickstart shows how to add Auth0 authentication to a vanilla JavaScript ap
     You can choose to do this automatically by running a CLI command or do it manually via the Dashboard:
 
     <Tabs>
+      <Tab title="Quick Setup (recommended)">
+        Create an Auth0 App and copy the pre-filled `.env` file with the right configuration values.
+        <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>
+
       <Tab title="CLI">
         Run the following shell command on your project's root directory to create an Auth0 app and generate a `.env.local` file:
 

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

@@ -7,6 +7,8 @@ title: Add Login to Your Vue Application
 
 
 import {AuthCodeGroup} from "/snippets/AuthCodeGroup.jsx";
+import {AuthCodeBlock} from "/snippets/AuthCodeBlock.jsx";
+import {CreateInteractiveApp} from "/snippets/recipe.jsx";
 
 <Accordion title="AI Prompt" defaultOpen icon="microchip-ai" iconType="sharp-solid">
   **Using AI to integrate Auth0?** Add this prompt to Cursor, Windsurf, Copilot, Claude Code or your favourite AI-powered IDE to speed up development.
@@ -710,6 +712,9 @@ Solution: Vue 3 with Vite uses import.meta.env.VITE_* for environment variables,
 
 This quickstart demonstrates how to integrate Auth0 authentication into a Vue.js 3 application. You'll build a responsive single-page app with secure user authentication using Vue's composition API and the Auth0 Vue SDK.
 
+export const localEnvSnippet = `VITE_AUTH0_DOMAIN={yourDomain}
+VITE_AUTH0_CLIENT_ID={yourClientId}`;
+
 <Steps>
   <Step title="Create a new project" stepNumber={1}>
     Create a new Vue 3 project for this Quickstart
@@ -735,6 +740,12 @@ This quickstart demonstrates how to integrate Auth0 authentication into a Vue.js
     You can choose to do this automatically by running a CLI command or do it manually via the Dashboard:
 
     <Tabs>
+      <Tab title="Quick Setup (recommended)">
+        Create an Auth0 App and copy the pre-filled `.env` file with the right configuration values.
+        <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>
+
       <Tab title="CLI">
         Run the following shell command on your project's root directory to create an Auth0 app and generate a `.env` file:
 

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

@@ -7,6 +7,8 @@ title: Add Login to Your Next.js Application
 
 
 import {AuthCodeGroup} from "/snippets/AuthCodeGroup.jsx";
+import {AuthCodeBlock} from "/snippets/AuthCodeBlock.jsx";
+import {CreateInteractiveApp} from "/snippets/recipe.jsx";
 
 <Accordion title="AI Prompt" defaultOpen icon="microchip-ai" iconType="sharp-solid">
   **Using AI to integrate Auth0?** Add this prompt to Cursor, Windsurf, Copilot, Claude Code or your favourite AI-powered IDE to speed up development.
@@ -674,6 +676,18 @@ import {AuthCodeGroup} from "/snippets/AuthCodeGroup.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=${generateRandomString(32)}
+APP_BASE_URL=http://localhost:3000`;
+
 <Steps>
   <Step title="Create a new project" stepNumber={1}>
     Create a new Next.js project for this Quickstart
@@ -718,6 +732,12 @@ This quickstart demonstrates how to add Auth0 authentication to a Next.js applic
     You can choose to do this automatically by running a CLI command or do it manually via the Dashboard:
 
     <Tabs>
+      <Tab title="Quick Setup (recommended)">
+        Create an Auth0 App and copy the pre-filled `.env` file with the right configuration values.
+        <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>
+
       <Tab title="CLI">
         Run the following shell command on your project's root directory to create an Auth0 app and generate a `.env.local` file:
 

main/snippets/AuthCodeBlock.jsx

@@ -5,24 +5,51 @@ export const AuthCodeBlock = ({
   highlight,
   children,
 }) => {
-  const [processedChildren, setProcessedChildren] = useState(children);
+  const [displayText, setDisplayText] = useState(children);
+  const [copyText, setCopyText] = useState(children);
+  const wrapperRef = React.useRef(null);
 
   useEffect(() => {
     let unsubscribe = null;
 
     function init() {
+      if (!window.autorun || !window.rootStore) {
+        return;
+      }
+
       unsubscribe = window.autorun(() => {
-        let processedChildren = children;
+        let processedChildrenForDisplay = children;
+        let processedChildrenForCopy = children;
+
         for (const [
           key,
           value,
         ] of window.rootStore.variableStore.values.entries()) {
-          processedChildren = processedChildren.replace(
-            new RegExp(key, "g"),
+          const escapedKey = key.replaceAll(
+            /[.*+?^${}()|[\]\\]/g,
+            String.raw`\$&`
+          );
+
+          // For display: mask client secret if it's not the placeholder
+          let displayValue = value;
+          if (key === "{yourClientSecret}" && value !== "{yourClientSecret}") {
+            displayValue = value.substring(0, 3) + "*****MASKED*****";
+          }
+
+          processedChildrenForDisplay = processedChildrenForDisplay.replaceAll(
+            new RegExp(escapedKey, "g"),
+            displayValue
+          );
+
+          // For copy: use the actual value (unmasked)
+          processedChildrenForCopy = processedChildrenForCopy.replaceAll(
+            new RegExp(escapedKey, "g"),
             value
           );
         }
-        setProcessedChildren(processedChildren);
+
+        setDisplayText(processedChildrenForDisplay);
+        setCopyText(processedChildrenForCopy);
       });
     }
 
@@ -38,15 +65,65 @@ export const AuthCodeBlock = ({
     };
   }, [children]);
 
+  // Override clipboard write to copy unmasked text
+  useEffect(() => {
+    if (!wrapperRef.current) return;
+
+    const originalWriteText = navigator.clipboard.writeText.bind(navigator.clipboard);
+    let isOverriding = false;
+
+    const handleClick = (e) => {
+      const button = e.target.closest('[data-testid="copy-code-button"]');
+      if (!button || !wrapperRef.current.contains(button)) return;
+
+      // Set flag to override next clipboard write
+      isOverriding = true;
+
+      // Override writeText temporarily
+      navigator.clipboard.writeText = (text) => {
+
+        if (isOverriding) {
+          isOverriding = false;
+          // Restore original immediately
+          navigator.clipboard.writeText = originalWriteText;
+          // Write our copyText instead
+          return originalWriteText(copyText);
+        }
+        return originalWriteText(text);
+      };
+
+      // Reset after a short delay in case the write doesn't happen
+      setTimeout(() => {
+        if (isOverriding) {
+          isOverriding = false;
+          navigator.clipboard.writeText = originalWriteText;
+        }
+      }, 100);
+    };
+
+    const wrapper = wrapperRef.current;
+    wrapper.addEventListener('click', handleClick, true);
+
+    return () => {
+      wrapper.removeEventListener('click', handleClick, true);
+      // Restore original if still overridden
+      if (navigator.clipboard.writeText !== originalWriteText) {
+        navigator.clipboard.writeText = originalWriteText;
+      }
+    };
+  }, [copyText]);
+
   return (
-    <CodeBlock
-      filename={filename}
-      icon={icon}
-      language={language}
-      lines
-      highlight={highlight}
-    >
-      {processedChildren}
-    </CodeBlock>
+    <div ref={wrapperRef}>
+      <CodeBlock
+        filename={filename}
+        icon={icon}
+        language={language}
+        lines
+        highlight={highlight}
+      >
+        {displayText}
+      </CodeBlock>
+    </div>
   );
 };

main/snippets/AuthCodeGroup.jsx

@@ -13,8 +13,12 @@ export const AuthCodeGroup = ({ children, dropdown }) => {
               key,
               value,
             ] of window.rootStore.variableStore.values.entries()) {
-              processedNode = processedNode.replace(
-                new RegExp(key, "g"),
+              const escapedKey = key.replaceAll(
+                /[.*+?^${}()|[\]\\]/g,
+                String.raw`\$&`
+              );
+              processedNode = processedNode.replaceAll(
+                new RegExp(escapedKey, "g"),
                 value
               );
             }