title: Angular OpenID Code flow with PKCE implementation
body: <p>I'm start learning and implementing an authorization / authentication on my simple SPA using Angular 8 as my client web app. I use the <code>oidc-client-js</code> library for my client and <code>identityserver4</code> for my STS. I'm following the sample provided of <a href="https://github.com/IdentityModel/oidc-client-js/tree/dev/samples/Angular" rel="nofollow noreferrer">oidc-client-js on github</a>. In the said example, it uses <code>Implicit</code> flow but, upon reading to other blogs and forums, they encouraging you to use <code>code</code> flow with <code>Pkce</code> instead, which I'm trying to implement now. Below are my implementation codes.</p>
  
  <p><strong>auth-service.ts</strong>
  <a href="https://i.stack.imgur.com/TQ9At.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TQ9At.png" alt="enter image description here"></a></p>
  
  <p><strong>redirect html</strong>
  <a href="https://i.stack.imgur.com/bKJdy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bKJdy.png" alt="enter image description here"></a></p>
  
  <p><strong>stub client</strong>
  <a href="https://i.stack.imgur.com/0rIG2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0rIG2.png" alt="enter image description here"></a></p>
  
  <p>Now, my problem is that, when I click the <code>Login</code> link on my client web app, I'm receiving the below error.</p>
  
  <p><a href="https://i.stack.imgur.com/TKbc9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TKbc9.png" alt="enter image description here"></a></p>
  
  <p>But, when I reverted it to <code>Implicit</code> flow, I can successfully login to my web app without any issue.</p>
  
  <p>Can someone guide me on how do I implement the <code>code</code> flow with <code>Pkce</code>?</p>
  
  <p>Many thanks in advance!</p>