Remix Auth

Simple Authentication for Remix and React Router apps.

Support the Project

If you find Remix Auth useful, please consider sponsoring the project. Your support helps maintain this stable, production-ready library!

Features

• Full Server-Side Authentication
• Complete TypeScript Support
• Strategy-based Authentication
• Implement custom strategies

Overview

Remix Auth is a complete open-source authentication solution for Remix and React Router applications.

Heavily inspired by Passport.js, but completely rewrote it from scratch to work on top of the Web Fetch API. Remix Auth can be dropped in to any Remix or React Router based application with minimal setup.

As with Passport.js, it uses the strategy pattern to support the different authentication flows. Form and OAuth 2.0 strategies ship with Remix Auth; other strategies are published individually as separate npm packages.

Installation

npm install remix-auth

Supported Authentication Methods

Remix Auth includes built-in strategies and supports community ones:

• Form Strategy (remix-auth/form) - Username/password form-based authentication
• OAuth 2.0 (remix-auth/oauth2) - Generic OAuth 2.0 / OIDC authentication
• GitHub - GitHub authentication

For a complete list of community-maintained strategies, check the Community Strategies discussion.

[!TIP] Check in the strategies what versions of Remix Auth they support, as they may not be updated to the latest version.

Usage

Import the Authenticator class and instantiate it with your authentication strategies.

// app/services/auth.server.ts
import { Authenticator } from "remix-auth";
import { FormStrategy } from "remix-auth/form";
import { createCookieSessionStorage } from "react-router";

// Create a session storage
export const sessionStorage = createCookieSessionStorage({
	cookie: {
		name: "__session",
		httpOnly: true,
		path: "/",
		sameSite: "lax",
		secrets: ["s3cr3t"], // replace this with an actual secret
		secure: process.env.NODE_ENV === "production",
	},
});

// Your authentication logic (replace with your actual DB/API calls)
async function login(email: string, password: string) {
	// Verify credentials and return user data or throw an error
	const user = await db.user.findUnique({ where: { email } });
	if (!user || !(await bcrypt.compare(password, user.password))) {
		throw new Error("Invalid email or password");
	}

	return {
		id: user.id,
		email: user.email,
		name: user.name,
		// ... other user properties
	};
}

// Create an instance of the authenticator with your strategies
export const authenticator = new Authenticator({
	strategies: {
		// Form strategy for username/password authentication
		"user-pass": new FormStrategy(async ({ form }) => {
			const email = form.get("email") as string;
			const password = form.get("password") as string;

			if (!email || !password) {
				throw new Error("Email and password are required");
			}

			// The return type will be automatically inferred from your login function
			return await login(email, password);
		}),

		// You can add multiple strategies with different names
		// This is useful for having different authentication flows
	},
});

// Infer the session data type from the authenticator
export type SessionData = Authenticator.infer<typeof authenticator>;

The SessionData type is automatically inferred from your strategies using Authenticator.infer<typeof authenticator>. This ensures type safety and eliminates the need to manually define the session data type. The type will be whatever your strategies return after identifying the authenticated user - it can be the complete user data, a string with a token, or any other data structure you need.

Each strategy is registered with a name (the key in the strategies object), which is used to identify it during the authentication process. You can use the same strategy multiple times with different names, which is especially useful for OAuth2 strategies.

Once we have at least one strategy registered, it is time to set up the routes.

First, create a /login page. Here we will render a form to get the email and password of the user and use Remix Auth to authenticate the user.

This is the beginning of the README. Read the rest at the original. Read the full README ↗