This code sample demonstrates how to implement authentication with Auth0 by Okta in a Svelte Single-Page Application (SPA) using the Auth0 SPA SDK. This Svelte code sample implements the following security tasks:
- Add user login and logout.
- Retrieve user profile information.
- Protect application routes.
- Make authenticated requests to an API.
Svelte Code Sample Specs
This code sample uses the following tools:
- Svelte
v3.44.0 - Page
v1.11.6for routing - Auth0 SPA SDK
v1.22.0 - Vite
v2.9.9
The Svelte project dependency installations were tested with npm v8.5.5. Running the Svelte application was tested using Node.js v16.15.0.
Quick Auth0 Set Up
First and foremost, if you haven't already, sign up for an Auth0 account to connect your application with the Auth0 Identity Platform.
Next, you'll connect your Single-Page Application (SPA) with Auth0. You'll need to create an application registration in the Auth0 Dashboard and get two configuration values: the Auth0 Domain and the Auth0 Client ID. You'll also need to define an Auth0 Audience value within your project to practice making secure calls to an external API.
Get the Auth0 domain and client ID
-
Open the Applications section of the Auth0 Dashboard.
-
Click on the Create Application button and fill out the form with the following values:
Hello World Client
- Click on the Create button.
An Auth0 Application page loads up.
As such, click on the "Settings" tab of your Auth0 Application page, locate the "Application URIs" section, and fill in the following values:
http://localhost:4040/callback
http://localhost:4040
http://localhost:4040
Scroll down and click the "Save Changes" button.
Next, locate the "Basic Information" section.
When you enter a value in the input fields present on this page, any code snippet that uses such value updates to reflect it. Using the input fields makes it easy to copy and paste code as you follow along.
As such, enter the "Domain" and "Client ID" values in the following fields to set up your single-page application in the next section:
Authenticate Svelte Users
Start by cloning the project into your local machine:
git clone https://github.com/auth0-developer-hub/spa_svelte_javascript_hello-world.git
Then, make the project directory your current working directory:
cd spa_svelte_javascript_hello-world
Check out the basic-authentication branch, which holds all the Svelte code related to implementing basic user authentication with Auth0:
git checkout basic-authentication
Next, install the Svelte project dependencies:
npm install
This Svelte project offers a functional application that consumes data from an external API to hydrate the user interface. For simplicity and convenience, the Svelte project on the basic-authentication branch simulates the external API locally using json-server. In the next section, you'll integrate this Svelte application with a real API server using a backend technology of your choice.
The compatible API server runs on http://localhost:6060 by default. As such, to connect your Svelte application with that API server and with the Auth0 Authentication API, create a .env file under the root project directory:
touch .env
Populate it with the following environment variables:
VITE_AUTH0_DOMAIN=AUTH0-DOMAINVITE_AUTH0_CLIENT_ID=AUTH0-CLIENT-IDVITE_AUTH0_CALLBACK_URL=http://localhost:4040/callbackVITE_API_SERVER_URL=http://localhost:6060
Next, execute the following command to run the JSON server API:
npm run api
Finally, open another terminal tab and execute this command to run your Svelte application:
npm run dev
You can now visit http://localhost:4040/ to access the application.
There's something missing in this Svelte code sample. There are no login or sign-up forms!
When you click on the "Log In" button, Svelte takes you to the Auth0 Universal Login page. Your users can log in to your application through a page hosted by Auth0, which provides them with a secure, standards-based login experience that you can customize with your own branding and various authentication methods, such as logging in with a username and password or with a social provider like Facebook or Google.
Once you log in, visit the protected "Profile" page to see all the user profile information that Auth0 securely shares with your application using ID tokens:
You can test that the protected Svelte routes require users to log in before accessing them. Click on the "Log Out" button and try to access the Profile page, Protected page, or the Admin page:
If everything is working as expected, Svelte redirects you to log in with Auth0.
Make Authenticated Calls to an API From Svelte
Before you can practice requesting protected resources from an external API server using access tokens, you need to set up and configure an API with Auth0.
You can simulate a secure full-stack application system in no time with the Auth0 Developer Center code samples. You can pair this Svelte client application with an API server that matches the technology stack that you use at work. This "Hello World" client application can communicate with any of our "Hello World" API server samples.
Set up a Hello World API server
Pick an API code sample in your preferred backend framework and language from the list below and follow the instructions on the code sample page to set it up. Once you complete the sample API server set up, please return to this Svelte code sample page to learn how to integrate that API server with your Svelte application.
While setting up the API server code sample, you created an Auth0 Audience value. Store that value in the following field so that you can use it throughout the instructions present in this section easily:
Set up the Svelte client application
If you haven't cloned the repository already, start by cloning the Svelte project into your local machine:
git clone https://github.com/auth0-developer-hub/spa_svelte_javascript_hello-world.git
Then, make the project directory your current working directory:
cd spa_svelte_javascript_hello-world
Check out the basic-authentication-with-api-integration branch:
git checkout basic-authentication-with-api-integration
Next, install the Svelte project dependencies:
npm install
Now, either create or update the .env file under the Svelte project directory with the following:
VITE_AUTH0_DOMAIN=AUTH0-DOMAINVITE_AUTH0_CLIENT_ID=AUTH0-CLIENT-IDVITE_AUTH0_CALLBACK_URL=http://localhost:4040/callbackVITE_API_SERVER_URL=http://localhost:6060VITE_AUTH0_AUDIENCE=AUTH0-AUDIENCE
This time around, you include a VITE_AUTH0_AUDIENCE value, which is an identifier that represents the compatible Hello World API you just registered in your Auth0 tenant. This identifier is also known as the Auth0 audience. Your Svelte application must provide this value to the Auth0 authorization server in order to get a valid access token to make authenticated requests to the compatible external API.
If you haven't started the Svelte application yet, execute this command to run it:
npm run dev
Now your Svelte is all set up to request protected data from the "Hello World" API server of your choice. Ensure that your API server is running and visit the Protected page or the Admin page of your Svelte application:
Verify that these pages are displaying the relevant messages from the API. Each API response includes a text property with the corresponding message data for the page.
Handle Svelte Complex Use Cases
These Svelte code samples covered the most common authentication use case for a Svelte application:
- Allow users to log in, sign up, and log out.
- Display user profile information.
- Require authentication to access Svelte routes.
- Make authenticated calls to an API from Svelte.
However, Auth0 is an extensible and flexible identity platform that can help you achieve even more. If you have a more complex use case, check out the Auth0 Architecture Scenarios to learn more about diverse architecture scenarios we have identified when working with customers on implementing Auth0.