{"library":"remix-keycloak","title":"Remix Auth Keycloak Strategy","description":"remix-keycloak is an authentication strategy for Remix applications, specifically designed to integrate with Keycloak identity and access management. It extends the `remix-auth` library's `OAuth2Strategy` to provide a robust solution for authenticating users via a Keycloak instance. Maintained by Cybernite Intelligence, this package serves as a direct successor and active continuation of the now-archived `remix-auth-keycloak`. The current stable version is 2.0.4. While there isn't a fixed release cadence, updates are made as needed to ensure compatibility with Remix v1 and v2, and to address Keycloak-related changes. A key differentiator is its commitment to supporting multiple runtimes, including Node.js, Cloudflare Workers, and Netlify functions, making it versatile for various deployment environments. It simplifies the setup of Keycloak-based authentication flows, including client ID/secret handling, callback URLs, and token management within a Remix context.","language":"javascript","status":"active","last_verified":"Wed Apr 22","install":{"commands":["npm install remix-keycloak"],"cli":null},"imports":["import { KeycloakStrategy } from 'remix-keycloak'","import { Authenticator } from 'remix-auth'","export let loader: LoaderFunction = ({ request }) => { /* ... */ }","export let action: ActionFunction = ({ request }) => { /* ... */ }"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { Authenticator } from \"remix-auth\";\nimport { KeycloakStrategy } from \"remix-keycloak\";\nimport { createCookieSessionStorage } from \"@remix-run/node\";\n\ninterface User {\n  id: string;\n  email: string;\n  name: string;\n}\n\n// Create a session storage for the authenticator\nconst sessionStorage = createCookieSessionStorage({\n  cookie: {\n    name: \"_session\",\n    sameSite: \"lax\",\n    path: \"/\",\n    httpOnly: true,\n    secrets: [process.env.SESSION_SECRET ?? 'super-secret-key'],\n    secure: process.env.NODE_ENV === \"production\",\n  },\n});\n\nexport const authenticator = new Authenticator<User>(sessionStorage);\n\nconst keycloakStrategy = new KeycloakStrategy(\n  {\n    useSSL: process.env.KEYCLOAK_USE_SSL === 'true',\n    domain: process.env.KEYCLOAK_DOMAIN ?? 'your-keycloak-domain.com',\n    realm: process.env.KEYCLOAK_REALM ?? 'your-realm',\n    clientID: process.env.KEYCLOAK_CLIENT_ID ?? 'your-client-id',\n    clientSecret: process.env.KEYCLOAK_CLIENT_SECRET ?? 'your-client-secret',\n    callbackURL: process.env.KEYCLOAK_CALLBACK_URL ?? 'http://localhost:3000/auth/keycloak/callback',\n  },\n  async ({ accessToken, refreshToken, extraParams, profile }) => {\n    // In a real application, you would typically find or create a user in your DB\n    // based on the profile data from Keycloak.\n    console.log(\"Keycloak Profile:\", profile);\n    console.log(\"Access Token:\", accessToken);\n    // For this example, we'll return a mock user\n    return {\n      id: profile.id || profile.emails?.[0]?.value || 'anonymous',\n      email: profile.emails?.[0]?.value || 'user@example.com',\n      name: profile.displayName || 'Keycloak User'\n    };\n  }\n);\n\nauthenticator.use(keycloakStrategy, \"keycloak\");\n\n// Example route: app/routes/login.tsx\n// export default function Login() {\n//   return (\n//     <form action=\"/auth/keycloak\" method=\"post\">\n//       <button>Login with Keycloak</button>\n//     </form>\n//   );\n// }\n\n// Example route: app/routes/auth/keycloak.tsx\n// import type { ActionFunction } from \"@remix-run/node\";\n// import { authenticator } from \"~/utils/auth.server\"; // Adjust path as needed\n\n// export let action: ActionFunction = ({ request }) => {\n//   return authenticator.authenticate(\"keycloak\", request);\n// };\n\n// Example route: app/routes/auth/keycloak/callback.tsx\n// import type { LoaderFunction } from \"@remix-run/node\";\n// import { redirect } from \"@remix-run/node\";\n// import { authenticator } from \"~/utils/auth.server\"; // Adjust path as needed\n\n// export let loader: LoaderFunction = ({ request }) => {\n//   return authenticator.authenticate(\"keycloak\", request, {\n//     successRedirect: \"/dashboard\",\n//     failureRedirect: \"/login\",\n//   });\n// };","lang":"typescript","description":"This quickstart demonstrates how to set up `KeycloakStrategy` with `remix-auth`, configure environment variables, and define the authentication and callback routes required for a complete Keycloak login flow in a Remix application. It also shows a basic `User` interface and session storage setup.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}