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,responseType
is 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
to configure this snippet with your account
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
to configure this snippet with your account
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'
});
});