How to fix breaking changes since Angular 5.2.8 with Open Id Connect ?

Angular 5.2.8 breaking change

Angular 5.2.8 has introduced URL serialization so special characters are only encoded where needed.
But it broke Open Id connect token readability from hash…..

All the libraries used for Open Id Connect seem to be affected when your token is fetched from the hash in your authentication callback.

Here’s a quick fix to make it work while you waiting for the official fix from Angular (or your Open Id Connect library).

What does the encoded url from Angular 5.2.8 looks like ?

What did it look like before and how it should look like ?

How can we fix it ?

Before reading the hash to consume the token, we just need to decode the URI like this:

window.location.hash = decodeURIComponent(window.location.hash);
// finalize your authentication process by consuming the token

decodeURI won’t work unlike the previous because it  doesn’t encode / decode URI components like ; / ? : @ & = + $ , #

Now you can breathe 🙂 your app works again 🙂

Update !

The issue has been fix by Angular team in release 5.2.9