sergiodxa/remix-auth

Summary

Remix Auth is a server-side authentication library for Remix and React Router applications, written in TypeScript. It uses a strategy pattern inspired by Passport.js, so engineers can plug different authentication flows — such as email/password forms, generic OAuth 2.0, or GitHub — into a single Authenticator instance. The library is built on the Web Fetch API rather than Node-specific APIs, so it can be dropped into any Remix or React Router project with minimal setup.

What it is useful for

Remix Auth is useful when a Remix or React Router app needs a structured way to authenticate users server-side without reimplementing session handling in every route. Engineers register one or more strategies, then call authenticator.authenticate("strategy-name", request) from a route action or loader. The README documents several concrete flows:

• Email/password login via the remix-auth-form package, where the verify function receives form fields and returns a user object.
• OAuth 2.0 / OIDC flows via remix-auth-oauth2, where the strategy throws redirect responses to send the user to the identity provider and back to the app.
• GitHub login via remix-auth-github.

Beyond login, the README shows how to redirect users to different routes based on session data (for example, /onboarding versus /dashboard), protect routes with a loader-based check, and build entirely custom strategies by extending the Strategy abstract class and implementing an authenticate method. Custom strategies can also use the AsyncLocalStorage API to pass extra data, or use the @mjackson/headers package to store intermediate state via cookies during multi-step OAuth flows.

How engineers can use it

The README documents the following setup steps:

1. Install the core library with npm install remix-auth, plus any strategy packages you need.
2. Define a User type representing what each strategy will return.
3. Create session storage using createCookieSessionStorage from react-router.
4. Instantiate new Authenticator<User>() and register a strategy: authenticator.use(new FormStrategy(verifyFn), "user-pass").
5. In a /login route, call await authenticator.authenticate("user-pass", request), store the returned user in the session, and return a redirect with the committed Set-Cookie header.
6. For logout, call sessionStorage.destroySession(session); for protected routes, read the session in the loader and throw redirect("/login") if the user is missing.

A documented limitation is that strategies are published as separate npm packages and may lag behind the core library, so engineers should verify which Remix Auth version each strategy supports before upgrading. The project is released under the MIT license.