Skip to main content
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 .

​
Create the client

​
auth0.js

​
auth0-spa-js

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