Nondeterministic Polynomial Munchies

    TypeScript icon, indicating that this package has built-in type declarations

    2.5.0-0 • Public • Published

    Remix Auth

    Simple Authentication for Remix


    • Server-Side Authentication.
    • TypeScript Support.
    • OAuth2 Support
    • User+Password Auth Support


    Remix Auth is a complete open source authentication solution for applications.

    It was heavily inspired by Passport.js, but completely rewrote it from scratch to work on top of the Web Fetch API.

    Getting Started

    npm install --save remix-auth

    Example with the Local Strategy

    Create your session storage

    // app/session.server.ts
    import { createCookieSessionStorage } from "remix";
    export let sessionStorage = createCookieSessionStorage({
      cookie: {
        name: "_session",
        sameSite: "lax",
        path: "/",
        httpOnly: true,
        secrets: ["s3cr3t"],
        secure: process.env.NODE_ENV === "production",
    export let { getSession, commitSession, destroySession } = sessionStorage;

    Setup Remix Auth

    // app/auth.server.ts
    import { Authenticator, LocalStrategy } from "remix-auth";
    import { sessionStorage } from "~/session.server";
    import { User, findOrCreateUser } from "~/models/user";
    // Create an instance of the authenticator, pass a generic with what your
    // strategies will return and will be stored in the session
    export let authenticator = new Authenticator<User>(sessionStorage);
    // Add the local strategy
      new LocalStrategy(
        // The strategy will use this URL to redirect the user in case it's logged-in
        // And to know if it should grab the username and password from the request
        // body in case of a POST request
        { loginURL: "/login" },
        async (username, password) => {
          // Find your user data in your database or external service
          let user = await findOrCreateUser({ username });
          await user.validatePassword(password);
          return user;
      // The name of the strategy, every strategy has a default name, only add one
      // if you want to override it (e.g. setup more than one strategy)

    Setup your routes

    // app/routes/login.tsx
    import { ActionFunction, LoaderFunction, redirect } from "remix";
    import { authenticator } from "~/auth.server";
    import { getSession, commitSession } from "~/session.server";
    export let action: ActionFunction = async ({ request }) => {
      // Authenticate the request, after that it will redirect to the defined URLs
      // and set the user in the session if it's a success
      await authenticator.authenticate("local", request, {
        successRedirect: "/dashboard",
        failureRedirect: "/login",
    export let loader: LoaderFunction = async ({ request }) => {
      // If the user is already authenticated redirect to /dashboard directly
      await authenticator.isAuthenticated(request, {
        successRedirect: "/dashboard",
    export default function Login() {
      return (
        <form action="/login" method="post">
          <input type="text" name="username" required />
          <input type="password" name="password" required />
          <button>Log In</button>


    npm i @lgastler/remix-auth

    DownloadsWeekly Downloads






    Unpacked Size

    95.2 kB

    Total Files


    Last publish


    • lgastler