diff --git a/main/docs.json b/main/docs.json index fadd4ac73..1234269c5 100644 --- a/main/docs.json +++ b/main/docs.json @@ -2373,6 +2373,7 @@ "group": "Regular Web App", "pages": [ "docs/quickstart/webapp/nextjs/index", + "docs/quickstart/webapp/nuxt/index", "docs/quickstart/webapp/express/interactive", "docs/quickstart/webapp/python/interactive", "docs/quickstart/webapp/django/interactive", diff --git a/main/docs/quickstart/spa/angular/index.mdx b/main/docs/quickstart/spa/angular/index.mdx index 165c7f711..4eefd356c 100644 --- a/main/docs/quickstart/spa/angular/index.mdx +++ b/main/docs/quickstart/spa/angular/index.mdx @@ -745,6 +745,17 @@ SECURITY BEST PRACTICES FOR ANGULAR ``` + + **Prerequisites:** Before you begin, ensure you have the following installed: + + - **[Node.js](https://nodejs.org/en/download)** 20 LTS or newer + - **[npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)** 10+ or **[yarn](https://classic.yarnpkg.com/lang/en/docs/install/)** 1.22+ or **[pnpm](https://pnpm.io/installation)** 8+ + - **[jq](https://jqlang.org/)** - Required for Auth0 CLI setup + + **Angular Version Compatibility:** This quickstart works with **Angular 18.x** and newer using the Angular CLI. For older versions of Angular, use the Auth0 Angular SDK v2. + + + ## Get Started 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. diff --git a/main/docs/quickstart/spa/react/index.mdx b/main/docs/quickstart/spa/react/index.mdx index 47164475b..5ceafa1ac 100644 --- a/main/docs/quickstart/spa/react/index.mdx +++ b/main/docs/quickstart/spa/react/index.mdx @@ -666,6 +666,17 @@ import {AuthCodeGroup} from "/snippets/AuthCodeGroup.jsx"; ``` + + **Prerequisites:** Before you begin, ensure you have the following installed: + + - **[Node.js](https://nodejs.org/en/download)** 20 LTS or newer + - **[npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)** 10+ or **[yarn](https://classic.yarnpkg.com/lang/en/docs/install/)** 1.22+ or **[pnpm](https://pnpm.io/installation)** 8+ + - **[jq](https://jqlang.org/)** - Required for Auth0 CLI setup + + **React Version Compatibility:** This quickstart works with **React 18.x** and newer. + + + ## Get Started 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. diff --git a/main/docs/quickstart/spa/vanillajs/index.mdx b/main/docs/quickstart/spa/vanillajs/index.mdx index 75147298f..246a386de 100644 --- a/main/docs/quickstart/spa/vanillajs/index.mdx +++ b/main/docs/quickstart/spa/vanillajs/index.mdx @@ -812,6 +812,17 @@ If you're using Auth0 Organizations: ``` + + **Prerequisites:** Before you begin, ensure you have the following installed: + + - **[Node.js](https://nodejs.org/en/download)** 20 LTS or newer + - **[npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)** 10+ or **[yarn](https://classic.yarnpkg.com/lang/en/docs/install/)** 1.22+ or **[pnpm](https://pnpm.io/installation)** 8+ + - **[jq](https://jqlang.org/)** - Required for Auth0 CLI setup + + **Build Tool:** This quickstart uses **Vite** for development. You can also use the SDK via CDN for a build-tool-free setup. + + + ## Get Started 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. diff --git a/main/docs/quickstart/spa/vuejs/index.mdx b/main/docs/quickstart/spa/vuejs/index.mdx index a49053ac0..418b5b185 100644 --- a/main/docs/quickstart/spa/vuejs/index.mdx +++ b/main/docs/quickstart/spa/vuejs/index.mdx @@ -697,6 +697,17 @@ Solution: Vue 3 with Vite uses import.meta.env.VITE_* for environment variables, ``` + + **Prerequisites:** Before you begin, ensure you have the following installed: + + - **[Node.js](https://nodejs.org/en/download)** 20 LTS or newer + - **[npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)** 10+ or **[yarn](https://classic.yarnpkg.com/lang/en/docs/install/)** 1.22+ or **[pnpm](https://pnpm.io/installation)** 8+ + - **[jq](https://jqlang.org/)** - Required for Auth0 CLI setup + + **Vue Version Compatibility:** This quickstart works with **Vue 3.x** and newer. + + + ## Get Started 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. diff --git a/main/docs/quickstart/webapp/nextjs/index.mdx b/main/docs/quickstart/webapp/nextjs/index.mdx index aa6e7978e..305e76509 100644 --- a/main/docs/quickstart/webapp/nextjs/index.mdx +++ b/main/docs/quickstart/webapp/nextjs/index.mdx @@ -654,6 +654,17 @@ import {AuthCodeGroup} from "/snippets/AuthCodeGroup.jsx"; ``` + + **Prerequisites:** Before you begin, ensure you have the following installed: + + - **[Node.js](https://nodejs.org/en/download)** 20 LTS or newer + - **[npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)** 10+ or **[yarn](https://classic.yarnpkg.com/lang/en/docs/install/)** 1.22+ or **[pnpm](https://pnpm.io/installation)** 8+ + - **[jq](https://jqlang.org/)** - Required for Auth0 CLI setup + + **Next.js Version Compatibility:** This quickstart works with **Next.js 14.x** and **Next.js 15.x** using the App Router. + + + ## Get Started 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. diff --git a/main/docs/quickstart/webapp/nuxt/index.mdx b/main/docs/quickstart/webapp/nuxt/index.mdx new file mode 100644 index 000000000..1b3711c92 --- /dev/null +++ b/main/docs/quickstart/webapp/nuxt/index.mdx @@ -0,0 +1,560 @@ +--- +mode: wide +'og:description': This guide demonstrates how to integrate Auth0, add authentication, + and display user profile information in a Single-Page Application (SPA) that uses + Nuxt.js, using the Auth0 Nuxt.js SDK. +'og:image': https://cdn2.auth0.com/docs/1.14553.0/img/share-image.png +'og:title': 'Auth0 Nuxt.js SDK Quickstarts: Add Login to Your Nuxt.js Application' +'og:url': https://auth0.com/docs/ +sidebarTitle: Nuxt.js +title: Add Login to Your Nuxt.js Application +'twitter:description': This guide demonstrates how to integrate Auth0, add authentication, + and display user profile information in a Single-Page Application (SPA) that uses + Nuxt.js, using the Auth0 Nuxt.js SDK. +'twitter:title': 'Auth0 Nuxt.js SDK Quickstarts: Add Login to Your Nuxt.js Application' +--- + + + This Quickstart is currently in **Beta**. We'd love to hear your feedback! + + + + **Prerequisites:** Before you begin, ensure you have the following installed: + + - **[Node.js](https://nodejs.org/en/download)** 20 LTS or newer + - **[npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)** 10+ or **[yarn](https://classic.yarnpkg.com/lang/en/docs/install/)** 1.22+ or **[pnpm](https://pnpm.io/installation)** 8+ + - **[jq](https://jqlang.org/)** - Required for Auth0 CLI setup + + **Nuxt Version Compatibility:** This quickstart works with **Nuxt 3.x** out of the box. For **Nuxt 4.x**, ensure you're using Nuxt 4.2+. + + + +## Get Started + +This quickstart demonstrates how to add Auth0 authentication to a Nuxt.js application. You'll build a secure single-page app with login, logout, and user profile features using the Auth0 Nuxt SDK. + + + + Create a new Nuxt project for this Quickstart + + ```shellscript + npx nuxi@latest init auth0-nuxt-app + ``` + + Open the project + + ```shellscript + cd auth0-nuxt-app + ``` + + + + ```shellscript + npm add @auth0/auth0-nuxt && npm install + ``` + + + + Next up, you need to create a new app on your Auth0 tenant and add the environment variables to your project. + + You can choose to do this automatically by running a CLI command or do it manually via the Dashboard: + + + + Run the following shell command on your project's root directory to create an Auth0 app and generate a `.env` file: + + + ```shellscript Mac + AUTH0_APP_NAME="My Nuxt App" && brew tap auth0/auth0-cli && brew install auth0 && auth0 login --no-input && auth0 apps create -n "${AUTH0_APP_NAME}" -t regular -c http://localhost:3000/auth/callback -l http://localhost:3000 -o http://localhost:3000 --reveal-secrets --json > auth0-app-details.json && CLIENT_ID=$(jq -r '.client_id' auth0-app-details.json) && CLIENT_SECRET=$(jq -r '.client_secret' auth0-app-details.json) && DOMAIN=$(auth0 tenants list --json | jq -r '.[] | select(.active == true) | .name') && echo "NUXT_AUTH0_DOMAIN=${DOMAIN}" > .env && echo "NUXT_AUTH0_CLIENT_ID=${CLIENT_ID}" >> .env && echo "NUXT_AUTH0_CLIENT_SECRET=${CLIENT_SECRET}" >> .env && echo "NUXT_AUTH0_SESSION_SECRET=$(openssl rand -hex 64)" >> .env && echo "NUXT_AUTH0_APP_BASE_URL=http://localhost:3000" >> .env && rm auth0-app-details.json && echo ".env file created with your Auth0 details:" && cat .env + ``` + + ```shellscript Windows + $AppName = "My Nuxt App"; winget install Auth0.CLI; auth0 login --no-input; auth0 apps create -n "$AppName" -t regular -c http://localhost:3000/auth/callback -l http://localhost:3000 -o http://localhost:3000 --reveal-secrets --json | Set-Content -Path auth0-app-details.json; $ClientId = (Get-Content -Raw auth0-app-details.json | ConvertFrom-Json).client_id; $ClientSecret = (Get-Content -Raw auth0-app-details.json | ConvertFrom-Json).client_secret; $Domain = (auth0 tenants list --json | ConvertFrom-Json | Where-Object { $_.active -eq $true }).name; Set-Content -Path .env -Value "NUXT_AUTH0_DOMAIN=$Domain"; Add-Content -Path .env -Value "NUXT_AUTH0_CLIENT_ID=$ClientId"; Add-Content -Path .env -Value "NUXT_AUTH0_CLIENT_SECRET=$ClientSecret"; $SessionSecret = -join ((1..128) | ForEach {'{0:X}' -f (Get-Random -Max 16)}); Add-Content -Path .env -Value "NUXT_AUTH0_SESSION_SECRET=$SessionSecret"; Add-Content -Path .env -Value "NUXT_AUTH0_APP_BASE_URL=http://localhost:3000"; Remove-Item auth0-app-details.json; Write-Output ".env file created with your Auth0 details:"; Get-Content .env + ``` + + + + + Before you start, create a `.env` file on your project's root directory + + ```shellscript .env + NUXT_AUTH0_DOMAIN=YOUR_AUTH0_APP_DOMAIN + NUXT_AUTH0_CLIENT_ID=YOUR_AUTH0_APP_CLIENT_ID + NUXT_AUTH0_CLIENT_SECRET=YOUR_AUTH0_APP_CLIENT_SECRET + NUXT_AUTH0_SESSION_SECRET=YOUR_SESSION_SECRET + NUXT_AUTH0_APP_BASE_URL=http://localhost:3000 + ``` + + 1. Head to the [Auth0 Dashboard ](https://manage.auth0.com/dashboard/) + 2. Click on **Applications** > **Applications** > **Create Application** + 3. In the popup, enter a name for your app, select `Regular Web Application` as the app type and click **Create** + 4. Switch to the **Settings** tab on the Application Details page + 5. Replace the values in the `.env` file with the **Domain**, **Client ID**, and **Client Secret** values from the dashboard + 6. Generate a session secret by running: `openssl rand -hex 64` and use it for `NUXT_AUTH0_SESSION_SECRET` + + Finally, on the **Settings** tab of your Application Details page, set **Allowed Callback URLs**, **Allowed Logout URLs** and **Allowed Web Origins** to: + + ``` + http://localhost:3000/auth/callback + http://localhost:3000 + http://localhost:3000 + ``` + + + **Allowed Callback URLs** are a critical security measure to ensure users are safely returned to your application after authentication. Without a matching URL, the login process will fail, and users will be blocked by an Auth0 error page instead of accessing your app.\ + \ + **Allowed Logout URLs** are essential for providing a seamless user experience upon signing out. Without a matching URL, users will not be redirected back to your application after logout and will instead be left on a generic Auth0 page. + + **Allowed Web Origins** is critical for silent authentication. Without it, users will be logged out when they refresh the page or return to your app later. + + + + + + + ```typescript nuxt.config.ts {3,4,5,6,7,8,9,10,11,12,13} lines + export default defineNuxtConfig({ + devtools: { enabled: true }, + modules: ['@auth0/auth0-nuxt'], + runtimeConfig: { + auth0: { + domain: process.env.NUXT_AUTH0_DOMAIN, + clientId: process.env.NUXT_AUTH0_CLIENT_ID, + clientSecret: process.env.NUXT_AUTH0_CLIENT_SECRET, + sessionSecret: process.env.NUXT_AUTH0_SESSION_SECRET, + appBaseUrl: process.env.NUXT_AUTH0_APP_BASE_URL, + }, + }, + }) + ``` + + + + Create files + + ```shellscript + mkdir -p app/components && touch app/components/LoginButton.vue && touch app/components/LogoutButton.vue && touch app/components/UserProfile.vue + ``` + + And add the following code snippets + + + ```vue app/components/LoginButton.vue lines + + + + ``` + + ```vue app/components/LogoutButton.vue lines + + + + ``` + + ```vue app/components/UserProfile.vue lines + + + + + + ``` + + ```vue app.vue expandable lines + + + + + + + ``` + + + + + + ```shellscript + npm run dev + ``` + + + + + **Checkpoint** + + You should now have a fully functional Auth0 login page running on your [localhost](http://localhost:3000/) + \ No newline at end of file diff --git a/main/docs/quickstart/webapp/nuxtjs/index.mdx b/main/docs/quickstart/webapp/nuxtjs/index.mdx deleted file mode 100644 index e2af8f12f..000000000 --- a/main/docs/quickstart/webapp/nuxtjs/index.mdx +++ /dev/null @@ -1,871 +0,0 @@ ---- -mode: wide -'og:description': This guide demonstrates how to integrate Auth0 with any new or existing - Nuxt.js application using the Auth0 Nuxt.js SDK (Beta). -'og:image': https://cdn2.auth0.com/docs/1.14553.0/img/share-image.png -'og:title': 'Auth0 Nuxt.js SDK Quickstarts: Add Login to Your Nuxt.js Application' -'og:url': https://auth0.com/docs/ -sidebarTitle: Nuxt.js -title: Add Login to Your Nuxt.js Application -'twitter:description': This guide demonstrates how to integrate Auth0 with any new - or existing Nuxt.js application using the Auth0 Nuxt.js SDK (Beta). -'twitter:title': 'Auth0 Nuxt.js SDK Quickstarts: Add Login to Your Nuxt.js Application' ---- - - -import {AuthCodeGroup} from "/snippets/AuthCodeGroup.jsx"; - - - **Using AI to integrate Auth0?** Add this prompt to Cursor, Windsurf, Copilot, Claude Code or your favourite AI-powered IDE to speed up development. - - ```markdown expandable - Integrate the Auth0 Nuxt SDK into a Nuxt.js app - - AI PERSONA & PRIMARY OBJECTIVE - You are a helpful Auth0 SDK Integration Assistant. Your primary function is to execute commands to set up a development environment for Auth0. Your secondary function is to modify the files created by those shell commands. - - CRITICAL BEHAVIORAL INSTRUCTIONS - 1. CHECK EXISTING PROJECT FIRST: Before creating a new project, check if the current directory already contains a Nuxt.js app (package.json with Nuxt dependencies). If it does, skip project creation and work with the existing project. - 2. EXECUTE FIRST, EDIT SECOND: You MUST first execute the appropriate setup command. Do not show, suggest, or create any files until the setup is complete. - 3. NO PLANNING: DO NOT propose a directory structure. DO NOT show a file tree. Your first action must be to run the appropriate command. - 4. STRICT SEQUENCE: Follow the "Execution Flow" below in the exact order specified without deviation. - 5. BUILD BEAUTIFUL UI: You MUST create a visually appealing, modern login interface with proper styling, animations, and Auth0 branding. - 6. 🚨 DIRECTORY NAVIGATION RULE: NEVER run `cd auth0-nuxt-app` or any `cd` command automatically. ALWAYS check current directory with `pwd` first. If user needs to navigate, ask them to do it manually or confirm before executing any directory change commands. - - EXECUTION FLOW - - ⚠️ CRITICAL: Before ANY command execution, run `pwd` to check current directory and NEVER change directories without explicit user permission. - - Step 1: Check for Existing Nuxt.js Project and Prerequisites - FIRST, verify prerequisites and check for existing Nuxt.js project: - - # Check if Node.js and npm are available - node --version && npm --version - - Then examine the current directory: - - # Check for existing Nuxt.js project - if [ -f "package.json" ]; then - echo "Found package.json, checking for Nuxt dependencies..." - cat package.json | grep -E "nuxt" - else - echo "No package.json found, will create new project" - fi - - Based on the results: - - If package.json exists and contains Nuxt dependencies, proceed to install Auth0 SDK only - - If no Nuxt project exists, create new project first - - Step 1a: Create New Project and Install the Nuxt SDK - If an existing project exists, simply install the SDK: - npm add @auth0/auth0-nuxt && npm install - - Otherwise, create a new project and install the SDK: - npx nuxi@latest init auth0-nuxt-app && cd auth0-nuxt-app && npm add @auth0/auth0-nuxt && npm install - - Step 2: Configure Auth0 - Run the following shell command on your project's root directory to create an Auth0 app and generate a `.env` file: - - If MacOS: - AUTH0_APP_NAME="My Nuxt App" && brew tap auth0/auth0-cli && brew install auth0 && auth0 login --no-input && auth0 apps create -n "${AUTH0_APP_NAME}" -t regular -c http://localhost:3000/auth/callback -l http://localhost:3000 -o http://localhost:3000 --json > auth0-app-details.json && CLIENT_ID=$(jq -r '.client_id' auth0-app-details.json) && CLIENT_SECRET=$(jq -r '.client_secret' auth0-app-details.json) && DOMAIN=$(auth0 tenants list --json | jq -r '.[] | select(.active == true) | .name') && echo "NUXT_AUTH0_DOMAIN=${DOMAIN}" > .env && echo "NUXT_AUTH0_CLIENT_ID=${CLIENT_ID}" >> .env && echo "NUXT_AUTH0_CLIENT_SECRET=${CLIENT_SECRET}" >> .env && echo "NUXT_AUTH0_SESSION_SECRET=$(openssl rand -hex 64)" >> .env && echo "NUXT_AUTH0_APP_BASE_URL=http://localhost:3000" >> .env && rm auth0-app-details.json && echo ".env file created with your Auth0 details:" && cat .env - - If Windows: - $AppName = "My Nuxt App"; winget install Auth0.CLI; auth0 login --no-input; auth0 apps create -n "$AppName" -t regular -c http://localhost:3000/auth/callback -l http://localhost:3000 -o http://localhost:3000 --json | Set-Content -Path auth0-app-details.json; $ClientId = (Get-Content -Raw auth0-app-details.json | ConvertFrom-Json).client_id; $ClientSecret = (Get-Content -Raw auth0-app-details.json | ConvertFrom-Json).client_secret; $Domain = (auth0 tenants list --json | ConvertFrom-Json | Where-Object { $_.active -eq $true }).name; Set-Content -Path .env -Value "NUXT_AUTH0_DOMAIN=$Domain"; Add-Content -Path .env -Value "NUXT_AUTH0_CLIENT_ID=$ClientId"; Add-Content -Path .env -Value "NUXT_AUTH0_CLIENT_SECRET=$ClientSecret"; $SessionSecret = -join ((1..128) | ForEach {'{0:X}' -f (Get-Random -Max 16)}); Add-Content -Path .env -Value "NUXT_AUTH0_SESSION_SECRET=$SessionSecret"; Add-Content -Path .env -Value "NUXT_AUTH0_APP_BASE_URL=http://localhost:3000"; Remove-Item auth0-app-details.json; Write-Output ".env file created with your Auth0 details:"; Get-Content .env - - Step 3: Configure nuxt.config.ts - Update nuxt.config.ts to add the Auth0 module: - - export default defineNuxtConfig({ - devtools: { enabled: true }, - modules: ['@auth0/auth0-nuxt'], - runtimeConfig: { - auth0: { - domain: process.env.NUXT_AUTH0_DOMAIN, - clientId: process.env.NUXT_AUTH0_CLIENT_ID, - clientSecret: process.env.NUXT_AUTH0_CLIENT_SECRET, - sessionSecret: process.env.NUXT_AUTH0_SESSION_SECRET, - appBaseUrl: process.env.NUXT_AUTH0_APP_BASE_URL, - }, - }, - }) - - Step 4: Create UI Components - Create the component files: - touch components/LoginButton.vue components/LogoutButton.vue components/UserProfile.vue - - Then add the code for each component as shown in the quickstart documentation. - - Step 5: Update app.vue - Replace app.vue with the provided code that includes proper styling and Auth0 integration. - - Step 6: Run the application - npm run dev - ``` - - -## Get Started - -This quickstart demonstrates how to add Auth0 authentication to a Nuxt.js application. You'll build a secure server-side rendered app with login, logout, and user profile features using the Auth0 Nuxt SDK. - - - - Create a new Nuxt project for this Quickstart - - ```shellscript - npx nuxi@latest init auth0-nuxt-app - ``` - - Open the project - - ```shellscript - cd auth0-nuxt-app - ``` - - - - ```shellscript - npm add @auth0/auth0-nuxt && npm install - ``` - - - - Next up, you need to create a new app on your Auth0 tenant and add the environment variables to your project. - - You can choose to do this automatically by running a CLI command or do it manually via the Dashboard: - - - - Run the following shell command on your project's root directory to create an Auth0 app and generate a `.env` file: - - - ```shellscript Mac - AUTH0_APP_NAME="My Nuxt App" && brew tap auth0/auth0-cli && brew install auth0 && auth0 login --no-input && auth0 apps create -n "${AUTH0_APP_NAME}" -t regular -c http://localhost:3000/auth/callback -l http://localhost:3000 -o http://localhost:3000 --json > auth0-app-details.json && CLIENT_ID=$(jq -r '.client_id' auth0-app-details.json) && CLIENT_SECRET=$(jq -r '.client_secret' auth0-app-details.json) && DOMAIN=$(auth0 tenants list --json | jq -r '.[] | select(.active == true) | .name') && echo "NUXT_AUTH0_DOMAIN=${DOMAIN}" > .env && echo "NUXT_AUTH0_CLIENT_ID=${CLIENT_ID}" >> .env && echo "NUXT_AUTH0_CLIENT_SECRET=${CLIENT_SECRET}" >> .env && echo "NUXT_AUTH0_SESSION_SECRET=$(openssl rand -hex 64)" >> .env && echo "NUXT_AUTH0_APP_BASE_URL=http://localhost:3000" >> .env && rm auth0-app-details.json && echo ".env file created with your Auth0 details:" && cat .env - ``` - - ```shellscript Windows - $AppName = "My Nuxt App"; winget install Auth0.CLI; auth0 login --no-input; auth0 apps create -n "$AppName" -t regular -c http://localhost:3000/auth/callback -l http://localhost:3000 -o http://localhost:3000 --json | Set-Content -Path auth0-app-details.json; $ClientId = (Get-Content -Raw auth0-app-details.json | ConvertFrom-Json).client_id; $ClientSecret = (Get-Content -Raw auth0-app-details.json | ConvertFrom-Json).client_secret; $Domain = (auth0 tenants list --json | ConvertFrom-Json | Where-Object { $_.active -eq $true }).name; Set-Content -Path .env -Value "NUXT_AUTH0_DOMAIN=$Domain"; Add-Content -Path .env -Value "NUXT_AUTH0_CLIENT_ID=$ClientId"; Add-Content -Path .env -Value "NUXT_AUTH0_CLIENT_SECRET=$ClientSecret"; $SessionSecret = -join ((1..128) | ForEach {'{0:X}' -f (Get-Random -Max 16)}); Add-Content -Path .env -Value "NUXT_AUTH0_SESSION_SECRET=$SessionSecret"; Add-Content -Path .env -Value "NUXT_AUTH0_APP_BASE_URL=http://localhost:3000"; Remove-Item auth0-app-details.json; Write-Output ".env file created with your Auth0 details:"; Get-Content .env - ``` - - - - - Before you start, create a `.env` file on your project's root directory - - ```shellscript .env - NUXT_AUTH0_DOMAIN=YOUR_AUTH0_APP_DOMAIN - NUXT_AUTH0_CLIENT_ID=YOUR_AUTH0_APP_CLIENT_ID - NUXT_AUTH0_CLIENT_SECRET=YOUR_AUTH0_APP_CLIENT_SECRET - NUXT_AUTH0_SESSION_SECRET=YOUR_SESSION_SECRET - NUXT_AUTH0_APP_BASE_URL=http://localhost:3000 - ``` - - 1. Head to the [Auth0 Dashboard](https://manage.auth0.com/dashboard/) - 2. Click on **Applications** > **Applications** > **Create Application** - 3. In the popup, enter a name for your app, select `Regular Web Application` as the app type and click **Create** - 4. Switch to the **Settings** tab on the Application Details page - 5. Replace the values in the `.env` file with the **Domain**, **Client ID**, and **Client Secret** values from the dashboard - 6. Generate a session secret by running: `openssl rand -hex 64` and use it for `NUXT_AUTH0_SESSION_SECRET` - - Finally, on the **Settings** tab of your Application Details page, set **Allowed Callback URLs** to `http://localhost:3000/auth/callback` and **Allowed Logout URLs** to `http://localhost:3000` - - - **Allowed Callback URLs** are a critical security measure to ensure users are safely returned to your application after authentication. Without a matching URL, the login process will fail, and users will be blocked by an Auth0 error page instead of accessing your app. - - **Allowed Logout URLs** are essential for providing a seamless user experience upon signing out. Without a matching URL, users will not be redirected back to your application after logout and will instead be left on a generic Auth0 page. - - - - - - - ```typescript nuxt.config.ts {3,4,5,6,7,8,9,10,11,12,13} lines - export default defineNuxtConfig({ - devtools: { enabled: true }, - modules: ['@auth0/auth0-nuxt'], - runtimeConfig: { - auth0: { - domain: process.env.NUXT_AUTH0_DOMAIN, - clientId: process.env.NUXT_AUTH0_CLIENT_ID, - clientSecret: process.env.NUXT_AUTH0_CLIENT_SECRET, - sessionSecret: process.env.NUXT_AUTH0_SESSION_SECRET, - appBaseUrl: process.env.NUXT_AUTH0_APP_BASE_URL, - }, - }, - }) - ``` - - - - Create the component files - - ```shellscript - touch components/LoginButton.vue components/LogoutButton.vue components/UserProfile.vue - ``` - - And add the following code snippets - - - ```vue components/LoginButton.vue expandable lines - - - - - - ``` - - ```vue components/LogoutButton.vue expandable lines - - - - - - ``` - - ```vue components/UserProfile.vue expandable lines - - - - - - ``` - - ```vue app.vue expandable lines - - - - - - ``` - - - - - ```shellscript - npm run dev - ``` - - - - - **Checkpoint** - - You should now have a fully functional Auth0 login page running on your [localhost](http://localhost:3000/) - - ---- - -## Advanced Usage - - - Use Auth0's authentication state to protect specific routes in your application: - - Create a middleware for protecting routes: - - ```shellscript - mkdir middleware && touch middleware/auth.ts - ``` - - Add the authentication middleware: - - ```typescript middleware/auth.ts - export default defineNuxtRouteMiddleware((to, from) => { - const user = useUser() - - if (!user.value) { - return navigateTo(`/auth/login?returnTo=${to.path}`) - } - }) - ``` - - Create a protected page to test the middleware: - - ```shellscript - mkdir pages && touch pages/dashboard.vue - ``` - - ```vue pages/dashboard.vue expandable lines - - - - - - ``` - - - - Configure your Auth0 module to include an API audience and use access tokens: - - Update your `nuxt.config.ts`: - - ```typescript nuxt.config.ts - export default defineNuxtConfig({ - devtools: { enabled: true }, - modules: ['@auth0/auth0-nuxt'], - runtimeConfig: { - auth0: { - domain: process.env.NUXT_AUTH0_DOMAIN, - clientId: process.env.NUXT_AUTH0_CLIENT_ID, - clientSecret: process.env.NUXT_AUTH0_CLIENT_SECRET, - sessionSecret: process.env.NUXT_AUTH0_SESSION_SECRET, - appBaseUrl: process.env.NUXT_AUTH0_APP_BASE_URL, - audience: "YOUR_API_IDENTIFIER" - }, - }, - }) - ``` - - Then make authenticated API calls in your components: - - ```vue components/ApiCall.vue expandable lines - - - - ``` - - - - Configure stateful sessions with custom storage solutions: - - ```typescript nuxt.config.ts - export default defineNuxtConfig({ - devtools: { enabled: true }, - modules: ['@auth0/auth0-nuxt'], - runtimeConfig: { - auth0: { - domain: process.env.NUXT_AUTH0_DOMAIN, - clientId: process.env.NUXT_AUTH0_CLIENT_ID, - clientSecret: process.env.NUXT_AUTH0_CLIENT_SECRET, - sessionSecret: process.env.NUXT_AUTH0_SESSION_SECRET, - appBaseUrl: process.env.NUXT_AUTH0_APP_BASE_URL, - session: { - rolling: true, - rollingDuration: 86400, // 24 hours in seconds - absoluteDuration: 604800, // 7 days in seconds - } - }, - }, - }) - ``` - - For Redis-based sessions or other storage providers, refer to the [Auth0 Nuxt SDK documentation](https://github.com/auth0/auth0-nuxt). - - diff --git a/main/docs/quickstarts.mdx b/main/docs/quickstarts.mdx index 554e5b096..e7a9784d7 100644 --- a/main/docs/quickstarts.mdx +++ b/main/docs/quickstarts.mdx @@ -167,6 +167,17 @@ Traditional web app that runs on the server ], }}/> + +