Minimal, modern Keycloak authentication and token management for browser apps.
NPM Package: @usace/keycloak
Version: 2.0.1
npm install @usace/keycloakOr with yarn:
yarn add @usace/keycloakimport Keycloak, { tokenToObject } from "@usace/keycloak";import Keycloak from "@usace/keycloak";
const kc = new Keycloak({
client: "my-client",
keycloakUrl: "https://identity.sec.usace.army.mil/auth",
realm: "cwbi",
redirectUrl: window.location.origin + "/callback",
onAuthenticate: (token, keycloakResponse) => {
// User is authenticated, do something with token!
console.log("Access Token:", token);
},
onSessionEnding: (secondsLeft) => {
alert(`Your session will expire in ${secondsLeft} seconds.`);
},
onError: (err) => {
alert("Keycloak error: " + err);
},
});
// To start login:
kc.authenticate();
// On callback route, handle token exchange:
kc.checkForSession();Pass these as an object to the Keycloak constructor:
| Option | Type | Default | Description |
|---|---|---|---|
client |
string | — | Keycloak client ID (required) |
keycloakUrl |
string | — | Base URL to Keycloak instance (required) |
realm |
string | — | Realm name (required) |
redirectUrl |
string | — | URL to redirect after login (required) |
logoutUrl |
string | keycloakUrl |
Base Keycloak URL for logout (defaults to keycloakUrl if not set) |
directGrantUrl |
string | keycloakUrl |
URL for direct grant/token endpoint |
browserFlowUrl |
string | keycloakUrl |
URL for browser login flow |
refreshUrl |
string | keycloakUrl |
URL for refresh endpoint |
kc_idp_hint |
string | "login.gov" | Identity provider hint |
scope |
string | "openid profile" | OAuth scopes |
refreshInterval |
number | (from token) | Override refresh interval (seconds) |
refreshBuffer |
number | 60 | Buffer (seconds) before token expiry to refresh |
sessionEndWarning |
number | 60 | Warn user (seconds) before session expiry |
accessToken |
string | — | Initial access token, if known |
identityToken |
string | — | Initial identity token, if known |
refreshToken |
string | — | Initial refresh token, if known |
| Callbacks: | |||
onAuthenticate |
function | — | Called after authentication/refresh with access token and the full keycloak response |
onSessionEnding |
function | — | Called before session expiry (seconds left) |
onError |
function | throws Error | Called on authentication error |
onLogout |
function | — | Called after programmatic logout (non-redirect) |
const kc = new Keycloak(options);Redirects the browser to the Keycloak login page to initiate the browser authentication flow.
Parameters:
overrides(optional): Object to override configuration at runtimerealm- Override the realm for this authenticationkc_idp_hint- Override the identity provider hint (e.g., "login.gov", "federation-eams")redirectUrl- Override the redirect URL after authentication
// Standard authentication using configured values
kc.authenticate();
// Override realm and IDP for this login
kc.authenticate({
realm: "different-realm",
kc_idp_hint: "federation-eams",
redirectUrl: "https://myapp.com/custom-callback"
});Use Cases:
- Switch between different identity providers (login.gov vs federation-eams) based on user choice
- Use different redirect URLs depending on where the user initiated login
- Authenticate to different realms dynamically
Checks the current URL for an authorization code, exchanges it for tokens, and triggers onAuthenticate.
kc.checkForSession();Call this on your redirect/callback page after login!
Refreshes the access token using the refresh token, if available.
kc.refresh();Logs in using the OAuth2 "Resource Owner Password" grant. Not recommended for browser use unless strictly required.
kc.directGrantAuthenticate("username", "password");Attempts to authenticate using X.509 client certificate to implement AJAX based CAC auth.
Parameters:
overrides(optional): Object to override configuration at runtimerealm- Override the realm for this authenticationscope- Override the OAuth scopes for this authentication
// Standard X.509 authentication using configured values
kc.directGrantX509Authenticate();
// Override realm and scope
kc.directGrantX509Authenticate({
realm: "cwbi-cac",
scope: "openid profile email"
});Note when using CWBI Keycloak,
https://identity...does not parse the CAC certificate,https://identityc...will parse the CAC certificate. For the best user experience, use thecendpoint as thedirectGrantUrland the non-c endpoint as thekeycloakUrlso the user is not prompted for CAC pin when refreshing tokens.
Get the most recently stored tokens:
const accessToken = kc.getAccessToken();
const idToken = kc.getIdentityToken();Log out of Keycloak.
- redirect (default
true): redirect the browser to Keycloak’s logout endpoint (recommended for browser SSO). - If
redirectis false, uses a back-channel (POST) logout.
// Redirect to logout page (user logged out everywhere):
kc.logout(); // or kc.logout({redirect: true})
// Programmatic logout (no redirect, just token revocation):
kc.logout({ redirect: false });import { tokenToObject } from "@usace/keycloak";
// Decode JWT access or ID token to a JS object:
const payload = tokenToObject(accessToken);
console.log(payload.sub); // user idProvide these as options to the constructor for more control:
-
onAuthenticate(token | { accessToken, identityToken, refreshToken }) Called after successful authentication or token refresh.
-
onSessionEnding(secondsLeft) Warn the user when their session is about to expire.
-
onError(error) Handles any error from authentication or token refresh.
-
onLogout() Called after a non-redirecting logout completes.
const kc = new Keycloak({...});
kc.authenticate();
// ... user logs in, Keycloak redirects to your redirectUrl ...
kc.checkForSession();// Let users choose their login method
function loginWithLoginGov() {
kc.authenticate({ kc_idp_hint: "login.gov" });
}
function loginWithEAMS() {
kc.authenticate({ kc_idp_hint: "federation-eams" });
}// Redirect back to the current page after login
function loginHere() {
kc.authenticate({
redirectUrl: window.location.href
});
}setInterval(() => {
kc.refresh();
}, 10 * 60 * 1000); // every 10 minutes (optional, as refresh is handled automatically)const info = tokenToObject(kc.getAccessToken());
console.log(info.email, info.preferred_username);- Always call
kc.checkForSession()on your redirect URI after login when using browser flow. - The library automatically schedules token refreshes before expiry.
- Configure valid redirect URIs for your Keycloak client.
- Never expose client secrets in client-side code.
- Do not use the username/password direct grant flow unless necessary.
- Handle errors in the
onErrorcallback.
Version 2.1.0
- Added runtime overrides support to
authenticate()method- Override
realm,kc_idp_hint, andredirectUrlat runtime - Enables dynamic identity provider selection
- Supports context-aware redirect URLs
- Override
- Added runtime overrides support to
directGrantX509Authenticate()method- Override
realmandscopeat runtime
- Override
- Improved
logoutUrlconfiguration with fallback tokeycloakUrlfor consistency
Version 2.0.0
- Complete refactor for clarity and modern browser flows
- Cleaner API and callback pattern
- Improved error handling
- Should be backwards compatible with 1.x releases, but not guaranteed.
MIT (or your organization’s standard license)
Let me know if you want to tweak any section or add badges, CI, or advanced troubleshooting!