Remix Auth

Simple Authentication for Remix

RemixAuthentication / Authorization
sergiodxa/remix-authremix-auth

README

Remix Auth


Simple Authentication for Remix


Features


- Full Server-Side Authentication
- Complete TypeScript Support
- Strategy-based Authentication
- Easily handle success and failure
- Implement custom strategies
- Supports persistent sessions

Overview


Remix Auth is a complete open-source authentication solution for Remix.run 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-based application with minimal setup.

As with Passport.js, it uses the strategy pattern to support the different authentication flows. Each strategy is published individually as a separate npm package.

Installation


To use it, install it from npm (or yarn):

  1. ```bash
  2. npm install remix-auth
  3. ```

Also, install one of the strategies. A list of strategies is available in the Community Strategies discussion.

Usage


Remix Auth needs a session storage object to store the user session. It can be any object that implements the SessionStorage interface from Remix.

In this example I'm using the createCookieSessionStorage function.

  1. ```ts
  2. // app/services/session.server.ts
  3. import { createCookieSessionStorage } from "@remix-run/node";

  5. // export the whole sessionStorage object
  6. export let sessionStorage = createCookieSessionStorage({
  7.   cookie: {
  8.     name: "_session", // use any name you want here
  9.     sameSite: "lax", // this helps with CSRF
  10.     path: "/", // remember to add this so the cookie will work in all routes
  11.     httpOnly: true, // for security reasons, make this cookie http only
  12.     secrets: ["s3cr3t"], // replace this with an actual secret
  13.     secure: process.env.NODE_ENV === "production", // enable this in prod only
  14.   },
  15. });

  17. // you can also export the methods individually for your own usage
  18. export let { getSession, commitSession, destroySession } = sessionStorage;
  19. ```

Now, create a file for the Remix Auth configuration. Here import the Authenticator class and your sessionStorage object.

  1. ```ts
  2. // app/services/auth.server.ts
  3. import { Authenticator } from "remix-auth";
  4. import { sessionStorage } from "~/services/session.server";

  6. // Create an instance of the authenticator, pass a generic with what
  7. // strategies will return and will store in the session
  8. export let authenticator = new Authenticator<User>(sessionStorage);
  9. ```

The User type is whatever you will store in the session storage to identify the authenticated user. It can be the complete user data or a string with a token. It is completely configurable.

After that, register the strategies. In this example, we will use the FormStrategy to check the documentation of the strategy you want to use to see any configuration you may need.

  1. ```ts
  2. import { FormStrategy } from "remix-auth-form";

  4. // Tell the Authenticator to use the form strategy
  5. authenticator.use(
  6.   new FormStrategy(async ({ form }) => {
  7.     let email = form.get("email");
  8.     let password = form.get("password");
  9.     let user = await login(email, password);
  10.     // the type of this user must match the type you pass to the Authenticator
  11.     // the strategy will automatically inherit the type if you instantiate
  12.     // directly inside the `use` method
  13.     return user;
  14.   }),
  15.   // each strategy has a name and can be changed to use another one
  16.   // same strategy multiple times, especially useful for the OAuth2 strategy.
  17.   "user-pass"
  18. );
  19. ```

Now that at least one strategy is 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.