Remix Auth for Keycloak

This repository is based on existing repository by @mlcsthor

I took it on myself to maintain it because original maintainer decided to archive existing repository on December 2nd 2023.

Some tweaks were introduced for easier maintenance and easier readibility.

Reason behind is that we are using it for our project over at Cybernite Intelligence

This package supports both Remix v1 and Remix v2.

Supported runtimes

Runtime	Has Support
Node.js	✅
Cloudflare	✅
Netlify	✅

Table of Contents

• Remix Auth for Keycloak
  • Supported runtimes
  • Table of Contents
  • KeycloakStrategy
  • Getting Started
  • Usage
    • Create strategy instance
    • Setting up your routes

KeycloakStrategy

The Keycloak strategy is used to authenticate users against an Keycloak account. It extends the OAuth2Strategy.

Getting Started

All you have to do to add package to your existing Remix V1 or Remix v2 project is run:

npm i remix-keycloak

Usage

Create strategy instance

// app/utils/auth.server.ts
import { Authenticator } from "remix-auth";
import { Keycloak } from "remix-keycloak";

// Create an instance of the authenticator, pass a generic with what your
// strategies will return and will be stored in the session
export const authenticator = new Authenticator<User>(sessionStorage);

let keycloakStrategy = new KeycloakStrategy(
  {
    useSSL: true,
    domain: "example.app",
    realm: "example",
    clientID: "YOUR_CLIENT_ID",
    clientSecret: "YOUR_CLIENT_SECRET",
    callbackURL: "your.app/callback",
  },
  async ({ accessToken, refreshToken, extraParams, profile }) => {
    // Get the user data from your DB or API using the tokens and profile
    return User.findOrCreate({ email: profile.emails[0].value });
  }
);

authenticator.use(keycloakStrategy);

Setting up your routes

// app/routes/login.tsx
export default function Login() {
  return (
    <Form action="/auth/keycloak" method="post">
      <button>Login with Keycloak</button>
    </Form>
  );
}

// app/routes/auth/keycloak.tsx
import type { ActionFunction, LoaderFunction } from "remix";

import { authenticator } from "~/utils/auth.server";

export let loader: LoaderFunction = () => redirect("/login");

export let action: ActionFunction = ({ request }) => {
  return authenticator.authenticate("keycloak", request);
};

// app/routes/auth/keycloak/callback.tsx
import type { ActionFunction, LoaderFunction } from "remix";

import { authenticator } from "~/utils/auth.server";

export let loader: LoaderFunction = ({ request }) => {
  return authenticator.authenticate("keycloak", request, {
    successRedirect: "/dashboard",
    failureRedirect: "/login",
  });
};