Skip to main content

Use AI to integrate Auth0

If you use an AI coding assistant like Claude Code, Cursor, or GitHub Copilot, you can add Auth0 authentication automatically in minutes using agent skills.Install:
npx skills add auth0/agent-skills --skill auth0-quickstart --skill auth0-vanilla-js
Then ask your AI assistant:
Add Auth0 authentication to my vanilla JavaScript app
Your AI assistant will automatically create your Auth0 application, fetch credentials, install @auth0/auth0-spa-js, create authentication logic, and set up your configuration. Full agent skills documentation →
Prerequisites: Before you begin, ensure you have the following installed: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.
1

Create a new project

Create a new JavaScript project for this Quickstart
mkdir auth0-vanillajs && cd auth0-vanillajs
Initialize the project, install a local development server, and configure scripts
npm init -y && npm install --save-dev vite && npm pkg set scripts.dev="vite" scripts.build="vite build" scripts.preview="vite preview" type="module"
Create the basic project structure
touch index.html app.js style.css
2

Install the Auth0 SPA JS SDK

npm install @auth0/auth0-spa-js
3

Setup your Auth0 App

Next up, you need to create a new app on your Auth0 tenant and add the environment variables to your project.You have three options to set up your Auth0 app: use the Quick Setup tool (recommended), run a CLI command, or configure manually via the Dashboard:
4

Create the HTML structure and application logic

Create the application files:
5

Run your app

npm run dev
CheckpointYou should now have a fully functional Auth0 login page running on your localhost

​
Advanced Usage

If you need to call a protected API, you can get an access token:
// Add this to your app.js
async function getAccessToken() {
  try {
    const token = await auth0Client.getTokenSilently({
      authorizationParams: {
        audience: 'YOUR_API_IDENTIFIER',
        scope: 'read:messages'
      }
    });
    
    // Use the token to call your API
    const response = await fetch('/api/protected', {
      headers: {
        Authorization: `Bearer ${token}`
      }
    });
    
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error getting token:', error);
  }
}
For a smoother user experience, you can use popup-based login:
// Replace the login function in app.js
async function login() {
  try {
    await auth0Client.loginWithPopup();
    await updateUI();
  } catch (err) {
    if (err.error !== 'popup_closed_by_user') {
      showError(err.message);
    }
  }
}
If you’re using Auth0 Organizations:
// Update your Auth0 client configuration
auth0Client = await createAuth0Client({
  domain: import.meta.env.VITE_AUTH0_DOMAIN,
  clientId: import.meta.env.VITE_AUTH0_CLIENT_ID,
  authorizationParams: {
    redirect_uri: window.location.origin,
    organization: 'YOUR_ORGANIZATION_ID' // or prompt user to select
  }
});