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:
embedded login with username/password as well as embedded passwordless login
user signup
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,responseTypeis unnecessary, because the SDK is only for use in SPAs, and so one would not need to change the response type.
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: '{yourDomain}',
clientID: '{yourClientId}',
redirectUri: 'https://YOUR_APP/callback'
});
});Was this helpful?
auth0-spa-js
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?