5.7 Securing a React Application

Securing react applications by Ztrust using oidc-client-ts

Securing React applications with Ztrust using oidc-client-ts involves configuring both Ztrust and the React application to leverage OpenID Connect (OIDC) for authentication and authorization.

Prerequisites

Before integrating your React application with ZTrust, ensure the following are in place:

• ZTrust SSO – A running ZTrust instance configured as your identity and access management provider.

• React Application – A React project already set up. Authentication will be handled using oidc-client-ts, a library for managing OpenID Connect (OIDC) and OAuth2 authentication flows in browser-based apps.

• Configured Realm and Client – A realm and client created in ZTrust with OIDC enabled. The client settings (Client ID, Secret, Redirect URIs) will be required by your React app.

With these prerequisites, your application will be ready to establish a secure connection with ZTrust using OpenID Connect.

Step 1: Set up ZTrust

1. Access ZTrust Admin Console:

   

   Fig 5.7.a: Master realm welcome page
2. Click on Manage Realms in the sidebar to view the list of realms available in your ZTrust.

   

   Fig 5.7.b: List of avalible realms under manage realms
3. From the list of realms, select the realm where you want to secure React applications.

   

   Fig 5.7.c: Welcome to Demo realm
4. From the left sidebar, navigate to the Clients section.

   

   Fig 5.7.d: Navigating to clients section in side bar
5. You will see a list of clients (applications). Choose/ Create the client for which you want to secure React Application.

   

   Fig 5.7.e: List of available clients
6. After select your client, it will take you to the settings page.

   

   Fig 5.7.f: Client settings page
7. Enter your application’s redirect URL in the Valid Redirect URIs field.

   

   Fig 5.7.g: In client setting tab general settings fields
8. Then under Capability config turn on Client authentication and save

   

   Fig 5.7.h: In client setting tab capability config options
9. You will now see a new tab enabled, called Credentials.

   

   Fig 5.7.i: Client settings tab
10. Navigate to the Credentials tab, where you can view and copy the Client Secret.

    

    Fig 5.7.j: Navigating to Credentials tab
11. With the ZTrust configuration complete, we can now move on to the React Application side of the setup.

Step 2. React Application Setup with oidc-client-ts

• Install dependencies: npm install oidc-client-ts react-oidc-context react-router-dom

• Set up the OIDC configuration: Create an instance Create a configuration object with your Ztrust client details. Inside src/oidcConfig.js

  export const oidcConfig = {
   authority: "http://localhost:8080/realms/test",
   client_id: "app-client",
   redirect_uri: window.location.origin,
   response_type: "code",
   scope: "openid profile email",
   post_logout_redirect_uri: window.location.origin,
   onSigninCallback: () => window.history.replaceState({}, document.title, window.location.pathname),
  };
  

• Wrap your app with the AuthProvider: Import the AuthProvider and your oidcConfig and wrap your root component in src/main.jsx (or main.tsx).

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import { AuthProvider } from 'react-oidc-context';
  import App from './App.jsx';
  import { oidcConfig } from './oidcConfig';
  
  
  ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <AuthProvider {...oidcConfig}>
       <App />
     </AuthProvider>
   </React.StrictMode>
  );
  

• Implement authentication logic and routing: The logic for handling authentication and routing within your components (e.g., using useAuth to get the authentication state and protecting routes with withAuthenticationRequired) is exactly the same as in a standard React application.

  
  import { useState } from 'react'
  import reactLogo from './assets/react.svg'
  import viteLogo from '/vite.svg'
  import './App.css'
  
  
  import { useAuth } from 'react-oidc-context';
  import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
  import SecurePage from './pages/SecurePage';
  import HomePage from './pages/HomePage';
  
  
  function App() {
   const auth = useAuth();
  
  
   return (
     <BrowserRouter>
       <nav>
         <Link to="/">Home</Link>
         <Link to="/secure">Secure Page</Link>
         {!auth.isAuthenticated && (
           <button onClick={() => auth.signinRedirect()}>Log in</button>
         )}
         {auth.isAuthenticated && (
           <button onClick={() => auth.signoutRedirect()}>Log out</button>
         )}
       </nav>
       <Routes>
         <Route path="/" element={<HomePage />} />
         <Route path="/secure" element={<SecurePage />} />
       </Routes>
     </BrowserRouter>
   );
  }
  
  
  export default App
  

• Start your Vite dev server: npm run dev