A production-ready React application with OpenID Connect (OIDC) authentication integration
This project demonstrates a complete implementation of OIDC authentication in a modern React application using OpenID Connect protocol. Works with any OIDC-compliant provider including Keycloak, Auth0, Okta, Azure AD, and more. Built with Vite for optimal performance and developer experience.
- π OIDC Integration - Full OpenID Connect authentication flow with any provider
- π Multi-Provider Support - Works with Keycloak, Auth0, Okta, Azure AD, and more
- π Token Management - Automatic token refresh and silent renewal
- π‘οΈ Protected Routes - Route guards with
OidcSecurewrapper - π‘ HTTP Interceptors - Axios interceptors for automatic token injection
- β‘ Vite Build Tool - Lightning-fast HMR and optimized builds
- π React 19 - Latest React with compiler optimizations
- π― React Router v7 - Modern routing with data APIs
For a complete guide and detailed explanation:
π Connecting OIDC in React Apps: The Practical Guide with Keycloak
- Node.js 18.x or higher
- npm or yarn package manager
- OIDC Provider - Any OpenID Connect compliant provider:
- Keycloak (used in this example)
- Auth0
- Okta
- Azure AD / Entra ID
- Google Identity
- Or any other OIDC provider
1. Clone the repository
git clone https://github.com/emronr/react-oidc-example.git
cd react-oidc-example2. Install dependencies
npm install
3. Configure OIDC Provider
Edit src/configs/AuthConfig.js with your OIDC provider settings:
const oidcConfig = { client_id: "your-client-id", authority: "https://your-oidc-provider/authority-url", // e.g., Keycloak: http://localhost:8080/realms/MyRealm redirect_uri: window.location.origin + "/authentication/callback", silent_redirect_uri: window.location.origin + "/authentication/silent-callback", scope: "openid profile email offline_access", };
4. Start development server
npm run dev
The application will be available at http://localhost:5173
react-oidc-example/
βββ src/
β βββ configs/
β β βββ AuthConfig.js # OIDC configuration
β βββ hooks/
β β βββ useAxiosInterceptors.js # Token injection hook
β βββ pages/
β β βββ AuthTest.jsx # Authentication status demo
β β βββ BackendRequest.jsx # Protected API call example
β β βββ Counter.jsx # Simple counter page
β βββ routes/
β β βββ RouteList.jsx # Application routes
β βββ App.jsx # Main app component
β βββ main.jsx # Application entry point
β βββ index.css # Global styles
βββ public/ # Static assets
βββ index.html # HTML template
βββ vite.config.js # Vite configuration
βββ eslint.config.js # ESLint configuration
βββ package.json # Project dependencies
This example uses Keycloak as the OIDC provider, but you can use any OIDC-compliant provider. Below is the Keycloak setup guide:
1. Create a Realm
- Login to Keycloak Admin Console
- Create a new realm (e.g.,
MyRealm)
2. Create a Client
- Go to Clients β Create
- Configure the following:
| Setting | Value |
|---|---|
| Client ID | test-react-web |
| Client Protocol | openid-connect |
| Access Type | public |
| Standard Flow | Enabled |
| Valid Redirect URIs | http://localhost:5173/* |
| Web Origins | http://localhost:5173 |
| Admin URL | http://localhost:5173 |
3. Configure Scopes Ensure the following scopes are available:
openidprofileemailoffline_access(for refresh tokens)
Update src/configs/AuthConfig.js with your OIDC provider details:
For Keycloak:
const oidcConfig = { client_id: "your-client-id", authority: "http://your-keycloak-server/realms/your-realm", redirect_uri: window.location.origin + "/authentication/callback", silent_redirect_uri: window.location.origin + "/authentication/silent-callback", scope: "openid profile email offline_access", };
For Auth0:
const oidcConfig = { client_id: "your-auth0-client-id", authority: "https://your-domain.auth0.com", redirect_uri: window.location.origin + "/authentication/callback", silent_redirect_uri: window.location.origin + "/authentication/silent-callback", scope: "openid profile email", };
For Azure AD:
const oidcConfig = { client_id: "your-azure-client-id", authority: "https://login.microsoftonline.com/your-tenant-id/v2.0", redirect_uri: window.location.origin + "/authentication/callback", silent_redirect_uri: window.location.origin + "/authentication/silent-callback", scope: "openid profile email", };
Use OidcSecure to protect components:
import { OidcSecure } from "@axa-fr/react-oidc"; function ProtectedPage() { return ( <OidcSecure> <YourComponent /> </OidcSecure> ); }
import { useOidcUser } from "@axa-fr/react-oidc"; function UserProfile() { const { oidcUser } = useOidcUser(); return ( <div> <h1>Welcome, {oidcUser.name}</h1> <p>Email: {oidcUser.email}</p> </div> ); }
import { useOidc } from "@axa-fr/react-oidc"; function TokenInfo() { const { accessToken, refreshToken } = useOidc(); console.log("Access Token:", accessToken); console.log("Refresh Token:", refreshToken); }
The app uses the useAxiosInterceptors hook in App.jsx to automatically inject tokens into all Axios requests:
How it works:
// src/hooks/useAxiosInterceptors.js import { useOidcAccessToken } from "@axa-fr/react-oidc"; export function useAxiosInterceptors() { const { accessToken } = useOidcAccessToken(); useEffect(() => { const requestInterceptor = axios.interceptors.request.use((config) => { if (accessToken) { config.headers.Authorization = `Bearer ${accessToken}`; } return config; }); return () => axios.interceptors.request.eject(requestInterceptor); }, [accessToken]); }
Usage in App.jsx:
import { useAxiosInterceptors } from "./hooks/useAxiosInterceptors"; function App() { useAxiosInterceptors(); // This enables automatic token injection // ... }
Making API calls:
Once the hook is active, all Axios requests will automatically include the Bearer token:
import axios from "axios"; async function fetchProtectedData() { // Token is automatically added by the interceptor const response = await axios.get("http://localhost:8080/api/protected"); return response.data; }
| Package | Version | Purpose |
|---|---|---|
| @axa-fr/react-oidc | ^7.26.3 | OIDC/OAuth2 client library |
| react | ^19.2.0 | UI framework |
| react-dom | ^19.2.0 | React DOM renderer |
| react-router-dom | ^7.13.0 | Client-side routing |
| axios | ^1.13.5 | HTTP client |
| Package | Purpose |
|---|---|
| vite | Build tool and dev server |
| @vitejs/plugin-react | React support for Vite |
| eslint | Code linting |
| babel-plugin-react-compiler | React compiler optimization |
# Start development server npm run dev # Build for production npm run build # Preview production build npm run preview # Run ESLint npm run lint
- β Tokens are stored securely by the OIDC library
- β Automatic token refresh before expiration
- β Silent token renewal for seamless UX
- β Protected routes require valid authentication
- β CORS properly configured for your OIDC provider
- β PKCE (Proof Key for Code Exchange) support
Issue: Redirect loop
- Check that redirect URIs in your OIDC provider match exactly
- Verify Web Origins/Allowed Origins are configured in your provider
Issue: Token not attached to requests
- Ensure
useAxiosInterceptors()is called inApp.jsx - Verify Axios instance is properly configured
Issue: CORS errors
- Add your app URL to Allowed Origins in your OIDC provider settings
Issue: Authority URL not found
- Verify your authority URL is correct and accessible
- Check that your OIDC provider's discovery endpoint is available (
.well-known/openid-configuration)
This project is licensed under the MIT License.
Contributions are welcome! Feel free to:
- π Report bugs
- π‘ Suggest new features
- π§ Submit pull requests
Please ensure all PRs include appropriate tests and documentation.
Your Name
- π GitHub: @emronr
- βοΈ Medium: @emronr
- πΌ LinkedIn: @emre-onur
Made with β€οΈ using React and OIDC
Β© 2026 - Present