English
  • Deutsch
  • English
  • Français
  • Español
  • Português
  • 日本語
svelte logo
javascript logo
spring-boot logo
java logo
Authentication
Authorization

Hello World Full-Stack Security: Svelte + Spring Boot

Authentication
Authorization
Dan Arias
By Dan Arias, R&D Engineering ManagerLast update on November 29, 2021

Developers can easily secure a full-stack application using Auth0. This code sample demonstrates how to implement authentication in a client application built with Svelte and JavaScript, as well as how to implement authorization in an API server built with Spring Boot and Java. You'll connect the client and server applications to see the full security flow in action!

Let's get started!

Quick Auth0 Set Up

To get started, create an Auth0 account to connect your application with the Auth0 Identity Platform. You can also use any of your existing Auth0 accounts.

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:

    • Name: Hello World Client

    • Application Type: Single Page Web Applications

  • Click on the Create button.

Visit the "Register Applications" document for more details.

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:

  • Allowed Callback URLs: http://localhost:4040

  • Allowed Logout URLs: http://localhost:4040

  • Allowed Web Origins: http://localhost:4040

Scroll down and click the "Save Changes" button.

Next, locate the "Basic Information" section.

Auth0 application settings to enable user authentication

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. For security, these values are stored in memory and only used locally. They are gone as soon as you refresh the page! As an extra precaution, you should use values from an Auth0 test application instead of a production one.

As such, enter the "Domain" and "Client ID" values in the following fields to set up your single-page application in the next section:

Get the Auth0 audience

  • Open the APIs section of the Auth0 Dashboard.

  • Click on the Create API button and fill out the "New API" form with the following values:

    • Name: Hello World Server

    • Identifier: https://hello-world.example.com

  • Click on the Create button.

Visit the "Register APIs" document for more details.

When setting up APIs, we also refer to the API identifier as the Audience value. Store that value in the following field to set up your API server in the next section:

Set Up and Run the Spring Boot Project

Start by cloning the Spring Boot project and checking out the basic-authorization branch:

git clone https://github.com/auth0-developer-hub/api_spring-boot_java_hello-world.git --branch basic-authorization

Make the project directory your current working directory:

cd api_spring-boot_java_hello-world

Install the Spring Boot project dependencies using Gradle:

./gradlew dependencies --write-locks

Now, create a .env file under the project directory and populate it as follows:

.env
PORT=6060
CLIENT_ORIGIN_URL=http://localhost:4040
AUTH0_DOMAIN=AUTH0-DOMAIN
AUTH0_AUDIENCE=AUTH0-AUDIENCE

Execute the following command to run the Spring Boot API server:

./gradlew bootRun

Optional: Enable hot swapping

Spring Boot supports hot swapping. The spring-boot-devtools module includes support for restarting your application automatically as your project code changes.

You have two options to use Spring Boot hot swapping:

Use Spring Tools

You can install Spring Tools in your project. Then, whenever you run the Spring Boot server from your IDE, hot swapping will be enabled.

Spring Tools will handle watching project files, recompiling, and restarting the server as you make code changes in your project.

Using the Gradle Wrapper

You can run the Gradle Wrapper in a terminal application as follows:

  • Open a terminal window to watch and compile the Spring Boot project:
./gradlew compileJava -t
  • Open a second terminal window to start the server:
./gradlew bootRun

Running those Gradle tasks in parallel enables Spring Boot hot swapping. The server will automatically restart when you make code changes in your project.

Set Up and Run the Svelte Project

Start by cloning the project into your local machine:

git clone https://github.com/auth0-developer-hub/spa_svelte_javascript_hello-world.git --branch basic-authentication

You are checking out the basic-authentication branch, which holds all the Svelte code related to implementing user login with Auth0.

Make the project directory your current working directory:

cd spa_svelte_javascript_hello-world

Next, install the Svelte project dependencies:

npm install

Once you have access to the Svelte project, create a .env file under the project directory and populate it as follows:

.env
AUTH0_DOMAIN=AUTH0-DOMAIN
AUTH0_CLIENT_ID=AUTH0-CLIENT-ID
AUTH0_AUDIENCE=https://hello-world.example.com
API_SERVER_URL=http://localhost:6060

Run the Svelte application by issuing the following command:

npm run dev

You can now visit http://localhost:4040/ to access the application.

There's something missing in this Svelte code sample. There's 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 username and password or with a social provider like Facebook or Google.

Once you log in, visit the protected "Profile" page, http://localhost:4040/profile, to see all the user profile information that Auth0 securely shares with your application using ID tokens.

Then, visit the "External API" page, http://localhost:4040/external-api, to practice requesting protected resources from an external API server using access tokens. Before you can do that, you need to set up and configure an API with Auth0. It'll be quick!