Installation

Package Setup

Install the package

npm install remix-auth

Create Session Storage

app/services/session.server.ts

import { createCookieSessionStorage } from "@remix-run/node";
 
// export the whole sessionStorage object
export let sessionStorage = createCookieSessionStorage({
  cookie: {
    name: "_session", // use any name you want here
    sameSite: "lax", // this helps with CSRF
    path: "/", // remember to add this so the cookie will work in all routes
    httpOnly: true, // for security reasons, make this cookie http only
    secrets: ["s3cr3t"], // replace this with an actual secret
    secure: process.env.NODE_ENV === "production", // enable this in prod only
  },
});
 
// you can also export the methods individually for your own usage
export let { getSession, commitSession, destroySession } = sessionStorage;

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 the createCookieSessionStorage function is being used.

Auth configuration

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

app/services/auth.server.ts

import { Authenticator } from "remix-auth";
import { sessionStorage } from "~/services/session.server";
 
// Create an instance of the authenticator, pass a generic with what
// strategies will return and will store in the session
export let authenticator = new Authenticator<User>(sessionStorage);

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.

Choose a Strategy

You have now created the baselayer for the Remix-Auth package and you will now have to chose one or multiple Auth Strategies

Introduction Quickstart