Securing React applications with Keycloak

December 26, 2023 · 6 min read

In the fast-paced world of web development, prioritizing the security of our applications is paramount. This blog post takes you on a journey to enhance the security of your React app by seamlessly integrating it with Keycloak, a robust authentication and authorization server. To simplify this process, we'll leverage the npm package react-oidc-context, bridging React and Keycloak while implementing OpenID Connect (OIDC). Whether you're a seasoned developer or just stepping into React and authentication, this post provides practical insights to bolster the security posture of your web application. Let's dive into the world of React, Keycloak, and react-oidc-context for a more secure development experience.

🚀 Quickstart:

Visit app.wedaa.tech
Click on the "Static Web page" component
Select a frontend framework: React, then click next
Choose Authentication and Authorization: Keycloak, then click Next
Review your project composition and confirm by clicking "Go to Canvas"
Provide a valid name to your prototype and click on "Validate"
Review your prototype configuration, then click Next
Finally, click "Generate Code" to download the secured React application

WeDAA offers a pre-configured React application secured by Keycloak. Simply extract our application, follow the instructions in the README, and initiate your application to seamlessly experience it first-hand.

🧠 Understanding the Generated Code

src/index.js

// Code for initializing React application with authentication and authorization capabilities.
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { AuthProvider } from 'react-oidc-context';

const oidcConfig = {
  authority: process.env.REACT_APP_OIDC_AUTHORITY,
  client_id: process.env.REACT_APP_OIDC_CLIENT_ID,
  redirect_uri: process.env.REACT_APP_PROJECT_URL,
  // ...
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <AuthProvider {...oidcConfig}>
    <App />
  </AuthProvider>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

This code initializes a React application with authentication and authorization capabilities using the react-oidc-context library.
The main application (App) is wrapped in an AuthProvider with configurations derived from the OIDC parameters specified in the oidcConfig object.
The oidcConfig object contains configuration parameters required for OpenID Connect authentication.
Environment variables (REACT_APP_OIDC_AUTHORITY, REACT_APP_OIDC_CLIENT_ID, and REACT_APP_PROJECT_URL) are used to dynamically set these values.

dotenv (.env file)

// Environment variables for configuring the React application.
PORT=4200
GENERATE_SOURCEMAP=false

REACT_APP_PROJECT_NAME=webapp
REACT_APP_PROJECT_URL=http://localhost:4200


# WEDAA 
REACT_APP_WEDAA_DOCS=https://wedaa-tech.github.io
REACT_APP_WEDAA_GITHUB=https://github.com/wedaa-tech

# OIDC Configuration
REACT_APP_OIDC_AUTHORITY=http://localhost:9080/realms/jhipster
REACT_APP_OIDC_CLIENT_ID=web_app

src/config/auth/privateRoute.js

// Code for defining a PrivateRoute component for protecting routes based on authentication status.
import React from 'react';
import { useAuth } from 'react-oidc-context';

const PrivateRoute = ({ children }) => {
  const auth = useAuth();

  switch (auth.activeNavigator) {
    case 'signinSilent':
      return <div>Signing you in...</div>;
    case 'signoutRedirect':
      return <div>Signing you out...</div>;
  }

  if (auth.isLoading) {
    // <div>Loading...</div>;
    return <div></div>;
  }

  if (auth.error) {
    return <div>Oops... {auth.error.message}</div>;
  }
  if (!auth.isAuthenticated) {
    let originPath = window.location.pathname;
    auth.signinRedirect({
      redirect_uri: process.env.REACT_APP_PROJECT_URL.concat(originPath),
    });
  }

  if (auth.isAuthenticated) {
    window.history.replaceState({}, document.title, window.location.pathname);
    return <>{children}</>;
  }
};

export default PrivateRoute;

This code defines a React component called PrivateRoute that serves as a wrapper for protecting certain routes in your application based on authentication status.
The PrivateRoute component takes a children prop, which represents the content that should be rendered if the user is authenticated.
Switch statement checks the activeNavigator property in the authentication context. If the user is in the process of a silent sign-in or sign-out redirect, it displays a corresponding message.
If the authentication context is still loading, the component returns an empty div (essentially doing nothing until authentication data is available).
If the user is not authenticated, it initiates a redirection to the authentication server using the signinRedirect method. It also captures the current path to redirect the user back to the intended page after authentication.
If the user is authenticated, it updates the browser history to remove sensitive information and renders the original children content.

docker/

|_docker
    |_realm-config
            |_jhipster-realm.json
    |_keycloak.yml

The Docker directory houses a Docker Compose configuration for Keycloak. This configuration initiates a Keycloak container that serves as the authentication server for our React application.
Within the docker/realm-config directory, there is a JSON-formatted realm configuration. This information, presented in JSON format, is essential for our React application as it serves as the OIDC (OpenID Connect) configuration.

🚦 Getting Started

Start the keycloak server

npm run docker:keycloak:up

Install dependencies for the first time.

npm install

Start you React application

npm start

📸 Example images in action

Home page of the React application generated via WeDAA.
Login Page for the React application powered by keycloak (click on the sign in button to land on this page, by default two users are provided [user,admin]; password is same as username).
Home page after sucessful Login.

✨ Conclusion

Congratulations! 🎉 You've successfully navigated the realm of securing your React applications with the formidable duo of Keycloak and react-oidc-context. As you embark on your coding journey, armed with a fortified understanding of authentication and authorization, here's a recap of your key accomplishments:

Seamlessly integrated Keycloak as the authentication and authorization powerhouse.
Leveraged the elegance of react-oidc-context to bridge the realms of React and OpenID Connect.
Initiated a secure React application that not only prioritizes user experience but also champions data protection.

🚀 Quick Dive

Before you go, let's take one last glance at the live example you've created. Head over to app.wedaa.tech and witness your React application in action. From dynamic prototyping to authentication magic, your creation stands as a testament to your development prowess.

🛠️ Further Exploration

As you continue your coding adventures, explore the depths of the generated code. Whether it's delving into the intricacies of src/index.js, configuring environment variables in .env, or understanding the protective dance of src/config/auth/privateRoute.js, every line of code tells a story of security, creativity, and innovation.

🌐 Beyond the Horizon

For more insights and documentation, sail over to the WeDAA Documentation and explore the GitHub repository at github.com/wedaa-tech. Your journey doesn't end here – it's a launching pad for future projects, collaborations, and secure web development endeavors.

🚀 Ready, Set, Code!

Armed with the knowledge and hands-on experience gained in this blog post, you're now equipped to conquer the world of React security. Start your engines, dive into the code, and let your creativity unfold. Happy coding, and may your React applications always be secure and splendid! 🌟

🚀 Quickstart:​

🧠 Understanding the Generated Code​

🚦 Getting Started​

📸 Example images in action​

✨ Conclusion​

🚀 Quick Dive​

🛠️ Further Exploration​

🌐 Beyond the Horizon​

🚀 Ready, Set, Code!​