CODEWITHSUNDEEP
angularoauth-2.0identityserver4asp.net-core-2.2oidc-client-js
klaydze
klaydze

Reputation: 981

Angular OpenID Code flow with PKCE implementation

I'm start learning and implementing an authorization / authentication on my simple SPA using Angular 8 as my client web app. I use the oidc-client-js library for my client and identityserver4 for my STS. I'm following the sample provided of oidc-client-js on github. In the said example, it uses Implicit flow but, upon reading to other blogs and forums, they encouraging you to use code flow with Pkce instead, which I'm trying to implement now. Below are my implementation codes.

auth-service.ts enter image description here

redirect html enter image description here

stub client enter image description here

Now, my problem is that, when I click the Login link on my client web app, I'm receiving the below error.

enter image description here

But, when I reverted it to Implicit flow, I can successfully login to my web app without any issue.

Can someone guide me on how do I implement the code flow with Pkce?

Many thanks in advance!

Upvotes: 1

Views: 4457

Answers (2)

Scott Blasingame
Scott Blasingame

Reputation: 1961

Since you are using Auth Code flow, you need to add this to your Oidc client config on your callback page.

response_mode: "query"

I figured it out by looking at the comment from Brock on this issue: https://github.com/IdentityModel/oidc-client-js/issues/780

Upvotes: 3

Gary Archer
Gary Archer

Reputation: 29218

I have some code + write ups that I think will help you, though they aren't Angular and you'll need to translate. You can run the code for my sample SPA via the steps on this page - maybe also see the iblog's Index page for write ups on the initial SPA code sample: https://authguidance.com/2019/04/07/final-spa-overview. Happy to answer any follow on questions ..

Upvotes: 0

Related Questions