Securing Modern Web Apps: A Hands-On Guide to OAuth 2.0 and OIDC with WSO2 Identity Server

prabash withanachchi

3 min read

·

1 day ago

--

Listen

Share

Introduction

In modern full-stack web development, handling user identity, session management, and authorization from scratch is risky and inefficient. Security protocols like OAuth 2.0 and OpenID Connect (OIDC) have become industry standards to resolve these complexities.

WSO2 Identity Server (WSO2 IS) is a world-class, enterprise-grade Customer Identity and Access Management (CIAM) solution that supports these open standards seamlessly.

In this article, we’ll explore how OAuth 2.0 and OIDC work under the hood with WSO2 IS and walk through a step-by-step setup to secure a React Single Page Application (SPA).

Understanding OAuth 2.0 vs. OIDC

Before jumping into implementation, it’s essential to clarify the roles of OAuth 2.0 and OpenID Connect:

• OAuth 2.0 (Authorization): A framework that allows a third-party application to obtain limited access to an HTTP service on behalf of a resource owner. It issues an Access Token.
• OpenID Connect / OIDC (Authentication): An identity layer built on top of OAuth 2.0. It allows clients to verify the identity of the end-user and receive basic profile information via an ID Token (JWT format).

Key Benefits of Using WSO2 Identity Server

1. Standards Compliance: Complete implementation of OAuth 2.0, OIDC, SAML 2.0, and FIDO2/Passkeys out of the box.
2. Extensibility: Easy integration with external identity providers (Google, GitHub, Enterprise Active Directory).
3. Developer-Friendly SDKs: Official SDKs for React, Angular, Next.js, Android, and iOS via Asgardeo/WSO2 IS ecosystems.

Step 1: Setting Up WSO2 Identity Server

You can quickly launch WSO2 Identity Server using Docker:

Bash

docker run -d \
  -p 9443:9443 \
  --name wso2is \
  wso2/wso2is:latest

Once running, navigate to https://localhost:9443/console and log in with the default administrator credentials (admin / admin).

Step 2: Registering a Single Page Application in WSO2 IS

To connect a React app to WSO2 IS, we need to register it as an OIDC Single Page Application:

• In the WSO2 IS Console, go to Applications $\rightarrow$ Register Application.
• Select Single-Page Application.
• Name your application (e.g., MyReactApp).
• Set the Authorized Redirect URLs to http://localhost:3000 (your local React development server).
• Click Register and copy the generated Client ID.

Step 3: Integrating WSO2 IS into React Frontend

Using the @asgardeo/auth-react SDK provided by WSO2, authentication takes only a few lines of code.

1. Install the SDK:

Bash

npm install @asgardeo/auth-react

2. Configure the Auth Provider (index.js):

JavaScript

import React from "react";
import ReactDOM from "react-dom/client";
import { AuthProvider } from "@asgardeo/auth-react";
import App from "./App";

const authConfig = {
    signInRedirectURL: "http://localhost:3000",
    signOutRedirectURL: "http://localhost:3000",
    clientID: "<YOUR_WSO2_CLIENT_ID>",
    baseUrl: "https://localhost:9443",
    scope: [ "openid", "profile" ]
};const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <AuthProvider config={ authConfig }>
        <App />
    </AuthProvider>
);

3. Handle Login and Profile Display (App.js):

JavaScript

import React from "react";
import { useAuthContext } from "@asgardeo/auth-react";

function App() {
    const { state, signIn, signOut } = useAuthContext();    return (
        <div style={{ padding: "20px" }}>
            <h2>WSO2 IS OAuth 2.0 / OIDC Demo</h2>
            {state.isAuthenticated ? (
                <div>
                  <p>Welcome, <strong>{state.username}</strong>!</p>
                    <button onClick={() =signOut()}>SignOut</button>
                </div>
            ) : (
                <button onClick={() => signIn()}>Sign In with WSO2 IS                        
                 </button>
            )}
         </div>
     );
 }export default App;

Key Benefits of Using WSO2 Identity Server

1. Standards Compliance: Complete implementation of OAuth 2.0, OIDC, SAML 2.0, and FIDO2/Passkeys out of the box.
2. Extensibility: Easy integration with external identity providers (Google, GitHub, Enterprise Active Directory).
3. Developer-Friendly SDKs: Official SDKs for React, Angular, Next.js, Android, and iOS via Asgardeo/WSO2 IS ecosystems.

Conclusion

Leveraging OAuth 2.0 and OpenID Connect via WSO2 Identity Server ensures that your applications remain secure, scalable, and compliant with enterprise IAM standards. By decoupling authentication from business logic, developer teams can focus on shipping features faster without compromising on security.