Migrating Angular 1.x applications from Auth0.js v8 to v9

This guide includes all the information you need to update auth0.js from v8 to v9. Find out if you should upgrade or not by reading Migrating to Auth0.js v9.

Migration Steps

Update angular-auth0

Angular 1.x applications usually use the angular-auth0 packagewhen authenticating with Auth0. To use auth0.js v9 you need to update to the latest version (3.x).

You can update the angular-auth0 library using npm or yarn.

# installation with npm
npm install --save angular-auth0
# installation with yarn
yarn add angular-auth0

The script files need to be added to your build system, or added to the project with a script tag.

<script src="node_modules/angular-auth0/dist/angular-auth0.js"></script>

Update auth0.js

Update the Auth0.js library using npm or yarn.

# installation with npm
npm install --save auth0-js

# installation with yarn
yarn add auth0-js

Once updated, you can add it to your build system or bring it in to your project with a script tag.

<script type="text/javascript" src="node_modules/auth0-js/build/auth0.js"></script>

If you do not want to use a package manager, you can retrieve Auth0.js from Auth0's CDN.

<script src="https://cdn.auth0.com/js/auth0/9.0.1/auth0.min.js"></script>

Configure Your Auth0 Client for Embedded Login

When implementing embedded login, Auth0.js v9 will use cross-origin calls inside hidden iframes to perform authentication. To make sure this can be done securely, Auth0 needs to know the domains where you will be hosting your applications.

Add the domain to the Allowed Web Origins field. You can find this field in the Client Settings area of your Dashboard.

Allowed Web Origins

If you enable Custom Domain Names and the top level domain for your website is the same as the custom domain for the Auth0 tenant, Lock will work without any further configuration. Otherwise, you will need to configure your Auth0 client to use Cross-Origin Authentication.

Change calls to getProfile()

The deprecated getProfile() function was reimplemented in Auth0.js v9. The previous implementation received an ID Token as a parameter and returned the user profile.

The new implementation requires an Access Token parameter.

Review calls to getSSOData()

The deprecated getSSOData() function was reimplemented in Auth0.js v9 to simplify migration from older versions, but the behavior is not exactly the same.

The function will not work as expected when you use it in Web Applications that use the Authorization Code Flow (i.e. specifying response_type='code'). It will always return that there isn't a current session.

If you want to avoid showing the Lock dialog when there's an existing session in the server, you can use Auth0.js's checkSession() function.

We recommend that you don’t use getSSOData() and use checkSession() instead. In order for checkSession() to work properly, it also requires that you set the Allowed Web Origins field in the dashboard.

If you are going to keep using getSSOData() take into account the changes in the return values described in the table below. In most applications the only value that was actually used was the ‘sso’ property, which still has the same semantics.

Property Old Value New Value
sso true if user has an existing session, false if not The same
sessionClients List of clients ids the user has active sessions with List with a single element with the client id configured in auth0.js
lastUsedClientId The client id for the last active connection The last client used when authenticating from the current browsers
lastUsedUserId The user id for the current session The same
lastUsedUsername User's email or name The same (requires scope=’openid profile email’)
lastUsedConnection Last used connection and strategy. Last connection used when authenticated from the current browser. It will be null if the user authenticated with the Hosted Login Page. It will not return strategy, only name

In order for the function to work properly, you need to ask for scope='openid profile email' when you initialize Auth0.js.

Behavioral Changes

Hosted Login Pages

Auth0.js 9 and Lock v11 are designed for embedded login scenarios and cannot be used when customizing the Hosted Login Page.

If you have customized the Hosted Login Page keep using Auth0.js v8 / Lock v10.

Default Values

Auth0.js 9 will default the value of the scope parameter to openid profile email.

If you are running your website from http://localhost or and you do not specify the openid profile email scope when initializing auth0.js, calling the getSSOData() method will result in the following error in the browser console.

Consent required. When using `getSSOData`, the user has to be authenticated with the following scope: `openid profile email`

This will not happen when you run your application in production, or if you specify the required scope. You can read more about this scenario here.

Was this article helpful?