GitHub – auth0-blog/spa-jwt-authentication-tutorial: Add authentication to a vanilla js single page app

1 – start branch

This is the starting point for the application.

Advanced options

Advanced options can be set by specifying the advancedOptions property when configuring Auth0Client. Learn about the complete set of advanced options in the API documentation

Auth0 configuration

Create a Single Page Application in the Auth0 Dashboard.

If you’re using an existing application, verify that you have configured the following settings in your Single Page Application:

  • Click on the “Settings” tab of your application’s page.
  • Ensure that “Token Endpoint Authentication Method” under “Application Properties” is set to “None”
  • Scroll down and click on the “Show Advanced Settings” link.
  • Under “Advanced Settings”, click on the “OAuth” tab.
  • Ensure that “JsonWebToken Signature Algorithm” is set to RS256 and that “OIDC Conformant” is enabled.

Next, configure the following URLs for your application under the “Application URIs” section of the “Settings” page:

These URLs should reflect the origins that your application is running on. Allowed Callback URLs may also include a path, depending on where you’re handling the callback (see below).

Take note of the Client ID and Domain values under the “Basic Information” section. You’ll need these values in the next step.


In this repository you’ll find several branches. Each of the branches represents one step taken to implement the Authentication.


We appreciate feedback and contribution to this repo! Before you get started, please see the following:

Creating a custom cache

The SDK can be configured to use a custom cache store that is implemented by your application. This is useful if you are using this SDK in an environment where more secure token storage is available, such as potentially a hybrid mobile app.

To do this, provide an object to the cache property of the SDK configuration.

The object should implement the following functions. Note that all of these functions can optionally return a Promise or a static value.

SignatureReturn typeDescription
get(key)Promise or objectReturns the item from the cache with the specified key, or undefined if it was not found
set(key: string, object: any) Promise or voidSets an item into the cache
remove(key)Promise or voidRemoves a single item from the cache at the specified key, or no-op if the item was not found
allKeys()Promise<string[]> or string [](optional) Implement this if your cache has the ability to return a list of all keys. Otherwise, the SDK internally records its own key manifest using your cache. Note: if you only want to ensure you only return keys used by this SDK, the keys we use are prefixed with @@auth0spajs@@

Here’s an example of a custom cache implementation that uses sessionStorage to store tokens and apply it to the Auth0 SPA SDK:

Creating the client

Create an Auth0Client instance before rendering or initializing your application. You should only have one instance of the client.

Data caching options

The SDK can be configured to cache ID tokens and access tokens either in memory or in local storage. The default is in memory. This setting can be controlled using the cacheLocation option when creating the Auth0 client.

To use the in-memory mode, no additional options need are required as this is the default setting. To configure the SDK to cache data using local storage, set cacheLocation as follows:

Important: This feature will allow the caching of data such as ID and access tokens to be stored in local storage. Exercising this option changes the security characteristics of your application and should not be used lightly.


From the CDN:

Using npm:

npm install @auth0/auth0-spa-js

Using yarn:

yarn add @auth0/auth0-spa-js

Log in to an organization

Log in to an organization by specifying the organization parameter when setting up the client:

You can also specify the organization when logging in:


Organizations is a set of features that provide better support for developers who build and maintain SaaS and Business-to-Business (B2B) applications.

Refresh token fallback

In all cases where a refresh token is not available, the SDK falls back to the legacy technique of using a hidden iframe with prompt=none to try and get a new access token and refresh token. This scenario would occur for example if you are using the in-memory cache and you have refreshed the page. In this case, any refresh token that was stored previously would be lost.

Refresh tokens

Refresh tokens can be used to request new access tokens. Read more about how our refresh tokens work for browser-based applications to help you decide whether or not you need to use them.

Running the example

This application has a VanillaJS SPA and a NodeJS backend.

Support feedback

For support or to provide feedback, please raise an issue on our issue tracker.

Vulnerability reporting

Please do not report security vulnerabilities on the public GitHub issue tracker. The Responsible Disclosure Program details the procedure for disclosing security issues.

What is auth0?

Auth0 helps you to easily:


The frontned uses browserify and gulp, so you must have node, npm and gulp installed.

Once you have that installed, you just need to run the following:

3 – sending jwts on requests

Now, we’ve implemented sending the JWT on the Authorization header on every request. Check it out here


Clone the server for this example.

Run the server app in the port 3001 following the needed instructions.

Похожее:  Как позвонить в техподдержку Триколор ТВ? 8-800-500-01-23 - Бесплатная горячая линия

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *