Full-Stack Code Samples: Single-Page App

Build a custom "Hello World" sample that shows how Single-Page App authentication and API server authorization work together to secure a full-stack application.

check mark icon
Client type

Single-Page App
Change client typeedit icon

check mark icon
Security level

Basic Role-Based Access Control
Change security leveledit icon

check mark icon
Use case

https://cdn.auth0.com/blog/developer-hub/auth0-shield-black.svg
https://cdn.auth0.com/blog/developer-hub/hello-world.svg
Hello World
Change use caseedit icon

Choose a frontend framework:

Angular logo
TypeScript logo
spa
authentication
Angular + TypeScript
This code sample uses Angular v13.0.0, TypeScript v4.4.3, and Auth0 Angular SDK v1.8.0
spa
authentication
React logo
JavaScript logo
spa
authentication
React + JavaScript
This code sample uses React v17.0.2, React Router v5.3.0, and Auth0 React SDK v1.8.0
spa
authentication
React logo
TypeScript logo
spa
authentication
React + TypeScript
This code sample uses React v17.0.2, React Router v5.3.0, TypeScript v4.1.2, and Auth0 React SDK v1.8.0
spa
authentication
Svelte logo
JavaScript logo
spa
authentication
Svelte + JavaScript
This code sample uses Svelte v3.0.0, Page `v1.11.6` for routing, and Auth0 SPA SDK v1.19.2
spa
authentication
Vue 3 logo
JavaScript logo
spa
authentication
legacy
Vue 3 + JavaScript
This code sample uses Vue v3.0.0 and Auth0 SPA SDK v1.18.0
spa
authentication
legacy
Vue 3 logo
TypeScript logo
spa
authentication
legacy
Vue 3 + TypeScript
This code sample uses Vue v3.0.0, TypeScript v4.1.5, and Auth0 SPA SDK v1.18.0
spa
authentication
legacy
Vue.js logo
JavaScript logo
spa
authentication
Vue.js + JavaScript
This code sample uses Vue v2.6.11, Vue Router v3.5.1, and Auth0 SPA SDK v1.18.0
spa
authentication