Using Javascript oidc-client with Auth0

I've worked on a couple projects recently that use OpenID connect (OIDC) for the login/user management flow. In both of these we started off using IdentityServer for this.

For the front end we used the OIDC-client javascript library which allows you to integrate login/logout etc. with an Open ID provider pretty easily.

On one of these projects we wanted to try using Auth0 as the identity provider to make use of the user management features it provides. As this supports OIDC this should have been a pretty straight forward switch.

We could have switched our javascript to use the Auth0 javascript client, but we already had a flow working using the OIDC client, and this keeps our options open to switch back to Identity Server or another provider in the future.

The good news is that the switch was fairly straightforward, but there were a couple of gotchas to watch out for.

The original config when using Identity Server looked something like this:

To work with Auth0 this had to be updated to something like this:

The main changes required are:

  • Updating the Identity Url to be your new Auth0 Tenant URL
  • Updating the Client Id to be your new Auth0 Client Id
  • Adding the extra query parameters so that the audience is sent as part of the request. This will need to be the Identifier of the API you have configured in Auth0, and can be found on the Settings tab of the API in Auth0. Without this you won't get a valid JWT returned for your request containing the users details and scopes etc.
  • Adding the meta data values - this shouldn't be required, but Auth0 doesn't return the metadata required to logout correctly in it's discovery document (thanks to Jerrie Pelser for blogging about this in his VueJS and Auth0 post, was scratching my head for a bit on that one!). Unfortunately you can't just add the logout URL and have to add them all.

Once I'd made those changes the application was running correctly again.

  • Post