Keycloak integration for React applications
npm install keycloak-reactA simple Keycloak integration for React applications.
``bash`
npm install keycloak-react
`jsx
// App.jsx
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { AuthProvider, ProtectedRoute } from 'keycloak-react';
import Home from './pages/Home';
import Dashboard from './pages/Dashboard';
import Callback from './pages/Callback';
const App = () => {
const authConfig = {
keycloakUrl: 'https://auth.example.com/realms/my-realm',
clientId: 'my-client',
apiUrl: '/api' // Optional, defaults to '/api'
};
return (
element={
}
/>
);
};
export default App;
`
`jsx
// pages/Home.jsx
import React from 'react';
import { useAuth } from 'keycloak-react';
import { useNavigate } from 'react-router-dom';
function Home() {
const { user, login, loading } = useAuth();
const navigate = useNavigate();
if (loading) {
return
if (user) {
navigate('/dashboard');
return null;
}
return (
export default Home;
`
`jsx
// pages/Callback.jsx
import React, { useEffect, useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { useAuth } from 'keycloak-react';
function Callback() {
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const { handleCallback } = useAuth();
const [error, setError] = useState(null);
const [isProcessing, setIsProcessing] = useState(false);
useEffect(() => {
const processCallback = async () => {
setIsProcessing(true);
// Check for error in URL
const errorParam = searchParams.get('error');
const errorDescription = searchParams.get('error_description');
if (errorParam) {
setError(${errorParam}: ${errorDescription || 'Unknown error'});
setIsProcessing(false);
return;
}
const code = searchParams.get('code');
if (!code) {
setError('No authorization code found in the URL');
setIsProcessing(false);
return;
}
try {
// Exchange code for token
await handleCallback(code);
navigate('/dashboard');
} catch (error) {
setError(Authentication failed: ${error.message});
} finally {
setIsProcessing(false);
}
};
processCallback();
}, [searchParams, handleCallback, navigate]);
if (isProcessing) {
return
if (error) {
return (
{error}
return
export default Callback;
`
`jsx
// pages/Dashboard.jsx
import React from 'react';
import { useAuth } from 'keycloak-react';
function Dashboard() {
const { user, logout } = useAuth();
return (
Welcome, {user.name || user.preferred_username}!
export default Dashboard;
`
Context provider that manages authentication state.
Props:
- config: Configuration objectkeycloakUrl
- : Keycloak server URL with realm (required)clientId
- : Client ID (required)apiUrl
- : API base URL (optional, defaults to '/api')redirectUri
- : Redirect URI for OAuth flow (optional, defaults to ${window.location.origin}/callback)
Hook to access authentication context.
Returns:
- user: Current user object or null if not authenticatedloading
- : Boolean indicating if auth state is being loadedlogin()
- : Function to initiate loginlogout()
- : Function to log outhandleCallback(code, redirectUri)
- : Function to handle OAuth callback
Component to protect routes from unauthenticated access.
Props:
- children: Components to render when authenticatedredirectTo`: Path to redirect to when not authenticated (optional, defaults to '/')
-
MIT