Consider switching sample repo to 'Authorization Code with PKCE' flow

[jeroenheijmans]

The relevant working groups have updated the advice for single page applications (such as this one, which uses Angular) around the recommended flow. Latest recommendation seems to be that SPA's should switch from "Implicit Flow" to the "Authorization Code with PKCE" flow.

After several different feature requests it was recently released in version 8.

I'm not sure how exactly yet, but I would like my sample repository to somehow support showcasing Code+PKCE flow. However, many people will still want to be using Implicit flow, and it seems awkward to support both.

Some ideas how this repo could support both:

1. Have both options in master and provide a way to toggle between the two.
2. Have Code+PKCE as the 'primary' option in master, and refer to an older commit if folks want to see Implicit Flow in action.
3. Have a branch for Code+PKCE for now, and leave master at Implicit (perhaps with a readme update pointing to the branch). Then later switch them around (effectively going back to option 2).

I think option 3 will have to do for the moment, as we'll need a place to start anyways.

[jeroenheijmans]

There's now a branch for this support following option 3. I'm running into some issues with silent refreshes via iframe though, and will open an issue about that in the library repository.

[jeroenheijmans]

I've updated the branch so that it:

• supports Angular 9
• includes the bugfix from Identityserver encoding state fix #30
• relies on token refreshes as currently possible with the lib

I'm not yet ready to merge it to become the main example, as I think silent refresh via iframes is a must have for applications, to offer a nice UX.

[jeroenheijmans]

This issue is blocked by #34

[jeroenheijmans]

🎉 🎉 🎉 It is now finally working!

But... it required a bit of a heavy-handed workaround in commit aa3ea01 with the core thing repeated here:

<!-- silent-refresh.html for Code Flow -->
<script>
  console.log("The silent-refresh.html file was loaded and now posting to the parent.");
  const fakeHashFragment = location.search.replace(/^\?/, "#");
  parent.postMessage(fakeHashFragment, location.origin);
</script>

I'm not sure yet if I'm happy with promoting this workaround to the main example just yet. It seemed to work just perfectly, but I feel it requires a hack that should be handled by the library. I will see if I can convince the community of the same in the related issue there.

Wow, I now see that the Silent Refresh documentation was rewritten lately, promoting what I considered a workaround as a proper solution (with some added tweaks too).

I'm not sure if I like the approach, but it seems the way forward, so will just roll with it...