Skip to content

README.md

Latest commit

 

History

History
72 lines (51 loc) · 2.35 KB

README.md

File metadata and controls

72 lines (51 loc) · 2.35 KB

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