remix-auth-oidc

import { OIDCExtraParams, OIDCProfile, OpenIDConnectStrategy } from 'remix-auth-oidc'; import { Authenticator } from 'remix-auth'; import { createCookieSessionStorage } from '@remix-run/node'; // Mock user function for quickstart; replace with your actual user retrieval logic async function getUser(accessToken: string, refreshToken: string, extraParams: OIDCExtraParams, profile: OIDCProfile, context: unknown) { console.log('User profile:', profile); // In a real app, you'd fetch/create a user from your DB here return { id: profile.id, name: profile.displayName || profile.emails?.[0]?.value || 'User', email: profile.emails?.[0]?.value || 'unknown@example.com', accessToken, refreshToken }; } type KeycloakUserInfo = { sub: string, email: string, preferred_username?: string, name?: string, given_name?: string, family_name?: string, picture?: string } export type KeycloakUser = { id: string name?: string email: string accessToken: string refreshToken: string } export class KeycloakStrategy extends OpenIDConnectStrategy<KeycloakUser, OIDCProfile, OIDCExtraParams> { name = 'keycloak'; constructor() { super( { authorizationURL: process.env.KEYCLOAK_TRUST_ISSUER + '/protocol/openid-connect/auth' ?? 'http://localhost:8080/realms/master/protocol/openid-connect/auth', tokenURL: process.env.KEYCLOAK_TRUST_ISSUER + '/protocol/openid-connect/token' ?? 'http://localhost:8080/realms/master/protocol/openid-connect/token', clientID: process.env.KEYCLOAK_CLIENT_ID ?? 'remix-app', clientSecret: process.env.KEYCLOAK_CLIENT_SECRET ?? 'your-client-secret', callbackURL: process.env.CALLBACK_URL ?? 'http://localhost:3000/auth/keycloak/callback' }, async ({ accessToken, refreshToken, extraParams, profile, context }) => { return await getUser( accessToken, refreshToken, extraParams, profile, context ); } ) } protected async userProfile(accessToken: string, params: OIDCExtraParams): Promise<OIDCProfile> { const response = await fetch( `${process.env.KEYCLOAK_TRUST_ISSUER ?? 'http://localhost:8080/realms/master'}/protocol/openid-connect/userinfo`, { headers: { authorization: `Bearer ${accessToken}`, } } ); if (!response.ok) { let body = await response.text(); throw new Response(body, { status: 401 }); } const data: KeycloakUserInfo = await response.json(); return { provider: 'keycloak', id: data.sub, emails: [{ value: data.email }], displayName: data.name, name: { familyName: data.family_name, givenName: data.given_name, }, } } } // Setup Authenticator and session storage const sessionStorage = createCookieSessionStorage({ cookie: { name: '__session', httpOnly: true, path: '/', sameSite: 'lax', secrets: [process.env.SESSION_SECRET ?? 's3cr3t'], secure: process.env.NODE_ENV === 'production', }, }); export const authenticator = new Authenticator<KeycloakUser>(sessionStorage); authenticator.use(new KeycloakStrategy(), 'keycloak'); // Example of how you would initiate the authentication flow in a Remix action/loader // (This part would be in a Remix route file, e.g., app/routes/auth.keycloak.tsx) /* import type { ActionFunctionArgs } from '@remix-run/node'; import { redirect } from '@remix-run/node'; import { authenticator } from '~/services/auth.server'; // Adjust path export async function action({ request }: ActionFunctionArgs) { return authenticator.authenticate('keycloak', request, { successRedirect: '/dashboard', failureRedirect: '/login', }); } // Example of callback route (e.g., app/routes/auth.keycloak.callback.tsx) export async function loader({ request }: ActionFunctionArgs) { return authenticator.authenticate('keycloak', request, { successRedirect: '/dashboard', failureRedirect: '/login', }); } */