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 look like the encoded url from Angular 5.2.8 ?


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 becaus it  doesn’t encode / decode URI components like ; / ? : @ & = + $ , #

Now you can breathe ๐Ÿ™‚ your app works again ๐Ÿ™‚

Written by


Anthony is a specialist in Web technologies (14 years of experience), in particular Microsoft .NET and learns the Cloud Azure platform. He has received twice the Microsoft MVP award and he is also certified Microsoft MCSD and Azure Fundamentals.
%d bloggers like this: