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

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

to configure this snippet with your account
import { WebAuth } from 'auth0.js';

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

Was this helpful?

/

auth0-spa-js

to configure this snippet with your account
import createAuth0Client from '@auth0/auth0-spa-js';

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

Was this helpful?

/

Redirect to the Universal Login Page

auth0.js

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

Was this helpful?

/

auth0-spa-js

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

Was this helpful?

/

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);
  });
});

Was this helpful?

/

auth0-spa-js

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

Was this helpful?

/

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)
  });
});

Was this helpful?

/

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);
});

Was this helpful?

/

Open the Universal Login Page in a popup

auth0.js

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

Was this helpful?

/

auth0-spa-js

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

Was this helpful?

/

Refresh tokens

auth0.js

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

Was this helpful?

/

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();
});

Was this helpful?

/

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
  });
});

Was this helpful?

/

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'
  });
});

Was this helpful?

/

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'
  });
});

Was this helpful?

/

Was this article helpful?