keycloak-react

A simple Keycloak integration for React applications.

Installation

``bash
npm install keycloak-react
`

Usage

$3

`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 (



} />
} />
path="/dashboard"
element={



}
/>



);
};

export default App;
`

$3

`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

export default Home;
`

$3

`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

export default Callback;
`

$3

`jsx
// pages/Dashboard.jsx
import React from 'react';
import { useAuth } from 'keycloak-react';

function Dashboard() {
const { user, logout } = useAuth();

return (


export default Dashboard;
`

API

$3

Context provider that manages authentication state.

Props:
- config: Configuration object
- keycloakUrl: 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)

$3

Hook to access authentication context.

Returns:
- user: Current user object or null if not authenticated
- loading: Boolean indicating if auth state is being loaded
- login(): Function to initiate login
- logout(): Function to log out
- handleCallback(code, redirectUri): Function to handle OAuth callback

$3

Component to protect routes from unauthenticated access.

Props:
- children: Components to render when authenticated
- redirectTo`: Path to redirect to when not authenticated (optional, defaults to '/')

License

MIT