Docs

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

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