Sample React OIDC Popup

A sample React application demonstrating OpenID Connect (OIDC) authentication with Cloudentity using multiple sign-in methods: popup, iframe, and silent token renewal.

Features

• Popup login -- Opens the Cloudentity authorization server in a popup window for user authentication
• Iframe login -- Embeds the login flow in an iframe within the app
• Silent token renewal -- Automatically refreshes access tokens using refresh tokens before they expire
• Silent logout -- Logs the user out without a full-page redirect
• Resource server call -- Demonstrates calling a protected API (http://localhost:7777/hello) with a Bearer token

Tech Stack

• React 19 with TypeScript
• oidc-client-ts for OIDC/OAuth 2.0 protocol handling
• React Router v7
• Yarn 4 (with Plug’n’Play)

Prerequisites

• Node.js (v16+)
• Yarn 4

Getting Started

1. Install dependencies:

   yarn install

2. Configure the OIDC settings:

   Edit src/oidc-settings.ts to point to your Cloudentity authorization server. Update the authority, client_id, and scopes as needed.

3. Start the development server:

   yarn start

   The app runs at https://localhost:3000 with HTTPS enabled by default.

Project Structure

File	Description
src/oidc-settings.ts	OIDC client configuration (authority, client ID, redirect URIs, scopes)
src/App.tsx	Main app component with login/logout logic and routing
src/Popup.tsx	Handles the popup sign-in callback
src/Iframe.tsx	Iframe-based login flow and its callback
src/Logout.tsx	Silent logout callback handler

Routes

Path	Purpose
/	Home page (shows login buttons or user info)
/iframe	Iframe login view
/iframeLogin	Initiates redirect-based login inside the iframe
/iframeCallback	Processes the OIDC callback inside the iframe
/popupCallback	Processes the OIDC callback from the popup window
/logoutCallback	Processes the silent logout callback

Available Scripts

Command	Description
yarn start	Start the dev server (HTTPS)
yarn build	Build for production
yarn test	Run tests