feat: add create component into respective framework mdx

Author: darrickyong

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 type="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 type="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 type="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 type="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 type="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,12 @@ 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 const localEnvSnippet = `AUTH0_DOMAIN={yourDomain}
+AUTH0_CLIENT_ID={yourClientId}
+AUTH0_CLIENT_SECRET=YOUR_AUTH0_APP_CLIENT_SECRET
+AUTH0_SECRET=YOUR_LONG_RANDOM_SECRET_HERE
+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 +726,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 type="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: