Use when adding authentication to Vanilla JS, Svelte, or any framework-agnostic single-page applications - integrates @auth0/auth0-spa-js SDK for SPAs without framework-specific wrappers
Add authentication to any browser-based single-page application using @auth0/auth0-spa-js — the low-level Auth0 SDK for Vanilla JS, Svelte, SolidJS, and any SPA not using React, Angular, or Vue.
Agent instruction: Before providing SDK setup instructions, fetch the latest release version by running:
text
gh api repos/auth0/auth0-spa-js/releases/latest --jq '.tag_name'
Agent instruction: Before adding new UI elements, search the project for existing click handlers for login, logout, sign-in, or sign-out buttons. If existing handlers are found, hook the Auth0 code into them without modifying the existing UI. Only create new buttons if no existing handlers are found.
js
// Login
document.getElementById('login-btn').addEventListener('click', async () => {
await auth0.loginWithRedirect();
});
// Logout
document.getElementById('logout-btn').addEventListener('click', () => {
auth0.logout({
logoutParams: { returnTo: window.location.origin }
});
});
// Update UI based on auth state
const isAuthenticated = await auth0.isAuthenticated();
if (isAuthenticated) {
const user = await auth0.getUser();
console.log(user.name, user.email);
}
Agent instruction: After completing the integration, build the project to verify it compiles successfully:
bash
npm run build
If the build fails, analyze the error output and fix the issues. Common integration build failures include:
Module not found: Missing npm install @auth0/auth0-spa-js — run the install command
Cannot find name 'import.meta': TypeScript target too low — set "target": "ES2020" or higher in tsconfig.json
createAuth0Client is not a function: Wrong import path or CDN usage without bundle step
Env vars undefined at runtime: Vite requires VITE_ prefix; webpack/CRA requires REACT_APP_ prefix
Re-run the build after each fix. Track the number of build-fix iterations.
Failcheck: If the build still fails after 5–6 fix attempts, stop and ask the user using AskUserQuestion:
"The build is still failing after several fix attempts. How would you like to proceed?"
Let the skill continue fixing iteratively — continue the build-fix loop for another 5–6 attempts
Fix it manually — show the remaining errors and let the user resolve them
Skip build verification — proceed without a successful build