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 (opens in a new tab)

Pre-requisites

1. Install node (opens in a new tab) 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 (opens in a new tab)).
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 (opens in a new tab)

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

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

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 (opens in a new tab), therefore the callback URL has to be https://localhost:9000/login (opens in a new tab)).
4. Click on the “Update” button.

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](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.

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

export const CONFIG = {
    TOKEN_ENDPOINT: "https://localhost:9443/oauth2/token",
    AUTHORIZE_ENDPOINT: "https://localhost:9443/oauth2/authorize",
    RESPONSE_TYPE: "code",
    SCOPE: "openid",
    REDIRECT_URI: "https://localhost:9000/login",
    CLIENT_ID: "eBQwwWgf5TasqSUBnUHeoKVy51Ma",
    CLIENT_SECRET: "",
    GRANT_TYPE: "authorization_code",
    CLIENT_URL: "https://localhost:9000",
    LOGOUT_URL: "https://localhost:9443/oidc/logout",
    COOKIE_PATH: "/"
}; 

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

Since we are running our application on https://localhost:9000 (opens in a new tab), 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
    com.thetransactioncompany.cors.CORSFilter
    cors.allowOrigin
        https://localhost:9000 
    cors.supportedMethods
        GET, HEAD, POST, DELETE, OPTIONS, PATCH, PUT 
    cors.exposedHeaders
        Location 
 CORS
    /*
    REQUEST
    FORWARD 

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 (opens in a new tab).

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

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

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

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 (opens in a new tab).

Signing off… ✌️❤️