React SPA with OIDC PKCE and identityserver.io

0
votes

As a school assignment I have to make the following:

Overview

Create a React SPA which does the following:

  1. Authenticates against (Welcome to the IdentityServer4 demo site) using the authorization code flow with PKCE

  2. Calls (test) using the correct token

Detail

Create a SPA in React. Usage of React is mandatory this time.

  • add a library which adds OIDC protocol support to the SPA. Make sure the authorization code flow with PKCE is supported

  • use (Welcome to the IdentityServer4 demo site)as your authorization server. This authorization server supports the authorization code flow with PKCE

  • call (test) using the correct token and show the results back to the user

  • host the react app on Netlify

As a beginner in this field, I totally don’t understand the assignment. Can anybody help me out?

1
reactjssingle-page-applicationidentityserver4openid-connectpkce
Welcome to SO! Could you be more clear on which parts you don't understand? I.e., are you comfortable making a React SPA yet, etc. - joshwilsonvu
I could hardly believe this would be a school assignment... - Vidmantas Blazevicius
I made a simple react application. So with the standard demo page... for the rest I don’t have alot of knowledge about SPA, OIDC and PKCE in connection with identiityserver.io - Incognito
Which school is that? Sounds pretty cool. - leastprivilege
College in Belgium mate - Incognito

1 Answers

17
votes

Edit - welcome to SO! Be nice here and help other people.

In the interest of being nice, here are some pointers and a solution to your assignment. But please, please, please - don't just copy it, learn how it works, think it through, apply it to your own react app.

First of all, while identityserver has very good documentation at https://identityserver4.readthedocs.io/ - it is very code-oriented and might be hard to start with.

So instead, take a look aut Auth0, a competing commercial product. They have pretty good docs as well, and they explain some of the protocols too. https://auth0.com/docs/protocols/oauth2 https://auth0.com/docs/flows/concepts/auth-code-pkce These are of particular interest.

Now, they also have scenarios like the one you need to implement. You might think it's this one: https://auth0.com/docs/architecture-scenarios/spa-api but they are a little behind in the new guidelines (but luckily your assignment isn't) that SPA's should also use code flow with PKCE, so you're better off with this: https://auth0.com/docs/architecture-scenarios/mobile-api (more on why this is better here: https://brockallen.com/2019/01/03/the-state-of-the-implicit-flow-in-oauth2/)

Having read all that, you need to find a good JS library that does oidc/oauth for you. No use in writing one yourself in school unless you're going for a Phd.

Google javascript oidc -> https://github.com/IdentityModel/oidc-client-js comes up. Hey! It's those guys from identityserver again. They're great people, aren't they? They've certainly got your back.

Now google react oidc-client-js - well isn't that nice, someone beat you to it: https://github.com/skoruba/react-oidc-client-js

That should get you started. Like I said, please don't make me regret this and take the trouble and time to actually learn this stuff. It could lead to an interesting line of work later on :-)