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.

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

embedded login with username/password as well as embedded passwordless login
user signup
get a user profile from /userinfo endpoint
request an email to change the user's password
link users with the Management API
get user with the Management API
update user attributes with the Management API
update user metadata with the Management API
There are also some options that are configurable in Auth0.js that do not have a counterpart in the auth0-spa-js. An example of this is responseType. There is a reason that there is not a direct 1:1 mapping for each option. In this case, responseType is unnecessary, because the SDK is only for use in SPAs, and so one would not need to change the response type.

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.

WebAuth

import { WebAuth } from 'auth0.js';

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

Was this helpful?/

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

Was this helpful?/

authorize()

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

Was this helpful?/

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

Was this helpful?/

parseHash()

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

Was this helpful?/

Auth0Client.handleRedirectCallback()

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

Was this helpful?/

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

userInfo()

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

Was this helpful?/

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?/

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

Was this helpful?/

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

Was this helpful?/

checkSession()

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

Was this helpful?/

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.

Auth0Client.getTokenSilently()

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

Was this helpful?/

checkSession()

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?/

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?/

Docs