Docs

Migrate from Auth0.js to the Auth0 Single Page App SDK

In this article, you’ll see how to migrate your single page app (SPA) from auth0.js to auth0-spa-js. Listed below are scenarios using auth0.js and the equivalent auth0-spa-js code.

Functionality that cannot be migrated

Not all auth0.js functionality can be directly migrated to auth0-spa-js. Scenarios that cannot be directly migrated include:

Authentication Parameters are not modified anymore

Auth0.js converts custom parameters you set from camelCase to snake_case internally. For example, if you set deviceType: 'offline', auth0.js actually sends device_type: 'offline' to the server.

When using auth0-spa-js, custom parameters are not converted from camelCase to snake_case. It will relay whatever parameter you send to the authorization server.

Create the client

auth0.js

import { WebAuth } from 'auth0.js';

window.addEventListener('load', () => {
  var auth0 = new WebAuth({
    domain: 'YOUR_DOMAIN',
    clientID: 'YOUR_CLIENT_ID',
    redirectUri: 'https://YOUR_APP/callback'
  });
});

auth0-spa-js

import createAuth0Client from '@auth0/auth0-spa-js';

window.addEventListener('load', () => {
  const auth0 = await createAuth0Client({
    domain: 'YOUR_DOMAIN',
    client_id: 'YOUR_CLIENT_ID',
    redirect_uri: 'https://YOUR_APP/callback'
  });
});

Redirect to the Universal Login Page

auth0.js

document.getElementById('login').addEventListener('click', () => {
  auth0.authorize();
});

auth0-spa-js

document.getElementById('login').addEventListener('click', async () => {
  await auth0.loginWithRedirect();
});

Parse the hash after the redirect

auth0.js

window.addEventListener('load', () => {
  auth0.parseHash({ hash: window.location.hash }, function(err, authResult) {
    if (err) {
      return console.log(err);
    }
    console.log(authResult);
  });
});

auth0-spa-js

window.addEventListener('load', async () => {
  await auth0.handleRedirectCallback();
});

Get the user information

auth0.js

The userInfo() function makes a call to the /userinfo endpoint and returns the user profile.

window.addEventListener('load', () => {
  auth0.client.userInfo(accessToken, function(err, user) {
    console.log(user)
  });
});

auth0-spa-js

Unlike auth0.js, the Auth0 SPA SDK does not call to the /userinfo endpoint for the user profile. Instead Auth0Client.getUser() returns user information from the decoded id_token.

window.addEventListener('load', async () => {
  const user = await auth0.getUser();
  console.log(user);
});

Open the Universal Login Page in a popup

auth0.js

document.getElementById('login').addEventListener('click', () => {
  auth0.popup.authorize();
});

auth0-spa-js

document.getElementById('login').addEventListener('click', async () => {
  await auth0.loginWithPopup();
});

Refresh tokens

auth0.js

document.getElementById('login').addEventListener('click', () => {
  auth0.checkSession({}, function(err, authResult) {
    // Authentication tokens or error
  });
});

auth0-spa-js

The Auth0 SPA SDK handles Access Token refresh for you. Every time you call getTokenSilently, you'll either get a valid Access Token or an error if there's no session at Auth0.

document.getElementById('login').addEventListener('click', async () => {
  await auth0.getTokenSilently();
});

Get a token for a different audience or with more scopes

auth0.js

document.getElementById('login').addEventListener('click', () => {
  auth0.checkSession({
    audience: 'https://mydomain/another-api/',
    scope: 'read:messages'
  }, function(err, authResult) {
    // Authentication tokens or error
  });
});

auth0-spa-js

The Auth0 SPA SDK handles Access Token refresh for you. Every time you call getTokenSilently, you'll either get a valid Access Token or an error if there's no session at Auth0.

document.getElementById('login').addEventListener('click', async () => {
  await auth0.getTokenSilently({
    audience: 'https://mydomain/another-api/',
    scope: 'read:messages'
  });
});

Use getTokenWithPopup to open a popup and allow the user to consent to the new API:

document.getElementById('login').addEventListener('click', async () => {
  await auth0.getTokenWithPopup({
    audience: 'https://mydomain/another-api/',
    scope: 'read:messages'
  });
});