OAuth 2.0 Authorization code flow React SPA demo using WSO2 Identity Server

This blog post will help you test out the OAuth2 authorization code flow in a React SPA application using the WSO2 Identity Server.

Read more about the OAuth 2.0 Authorization Code Grant from here

Pre-requisites

1. Install node if you haven’t already(npm is already bundled with node).
2. A running Identity Server. (If you want to build from source follow the instructions listed here).
3. IDE or code editor of your choice.

Setting up a service provider in WSO2 Identity Server.

Log in to the management console https://localhost:9443/carbon

User Service Providers, click on +Add and create a new service provider.

Create a Service Provider

In the edit view, expand the “Inbound Authentication Configuration” section, and further expand the “OAuth/OpenID Connect Configuration”.And click on “Configure”.

Configuring OAuth/OIDC

In the settings page,

1. Select OAuth Version as 2.0
2. Select “Code” as the grant type.
3. And add the callback URL. (The sample runs on https://localhost:9000, therefore the callback URL has to be https://localhost:9000/login).
4. Click on the “Update” button.

OAuth/OIDC Settings

Setting up the demo app.

You can fork the sample repo or directly clone and start working on it, but I suggest you create your own fork.

git clone https://github.com/brionmario/is-samples.git
cd is-samples/react-oidc
npm install

After all the node dependencies are being installed, you can configure the app settings.

Open the source code using an IDE/code editor and all the app configurations are available under the config.js file.

Follow the below steps to set up the application.

1. Copy the “OAuth Client Key” and “OAuth Client Secret” from the service provider that you just created.

Retrieving the Client ID and Client Secret

2. Modify the CLIENT_ID and CLIENT_SECRET attributes of the config.js file.

App Config

3. Configure IS to allow our application to access the APIs.

Since we are running our application on https://localhost:9000, IS will automatically block requests made to the IS endpoints. In order to allow CORS requests, please put the following CORS filter to the following config file in WSO2 Identity Server distribution pack.

<IS_HOME>/repository/resources/conf/templates/repository/conf/tomcat/web.xml.j2

CORS Filter

4. Run the application.

From inside the react-oidc folder, execute the following command to run the application using webpack dev server.

npm run demo

or if you are using command prompt or powershell, use the following commands.

# For command prompt
npm run demo-cmd
#For power shell
npm run demo-pshell

If the browser window doesn’t open automatically, manually navigate to the https://localhost:9000.

The blow screen will initially be presented to you if everything goes as expected 😁.

Initial Window

Click on the “LOGIN” button and you will be redirected to the WSO2 Identity Server authentication page. Enter your credentials and click on “CONTINUE”.

WSO2 Identity Server authentication page

If the login is successful, you will see the “Token Response” and the “ID Token Response” on the UI.

Responses

Explore the source code further especially the API requests under the actions folder. If you have any issues or concerns, feel free to raise them at https://github.com/brionmario/is-samples/issues.

Signing off… ✌️❤️