Advise: How to move remix-auth to a package @core/auth and be able to use it in several remix apps?

[Jarrodsz]

Im looking for a way to have a package named @core/auth where I store several auth related codes like components, remix-auth and other code like encryption stuff. Goal is to re-use this package true all my applications.

It would hold for example also all the components for login reset password etc.

The problem is I have no good Idea how to approach this and have tried several things already.

Consider this image of the directory structure.

The main problem is I need to import prisma ( for example ) client models into my code like User, UserProfile, Admin.
BUT
Those prisma client definitions are inside the turbo repro applications ( where the prisma client is generated based on the database model for each application ) this makes it impossible to easily or cleanly import them.

For example consider this code inside the domains folder of the package:

import bcrypt from "bcryptjs";
import { z } from "zod";

import { client, e } from "~/db.server";

import { InputError, makeDomainFunction } from "domain-functions";

export const loginFormSchema = z.object({
  email: z.string().min(1, "Email is required.").email("Email is invalid."),
  password: z.string().min(1, "Password is required."),
});

export const loginUser = makeDomainFunction(loginFormSchema)(
  async ({ email, password }) => {
    console.log("user email: ", email);
    console.log("password: ", password);
    const user = await e
      .select(e.User, (user) => ({
        ...e.User["*"],
        password: {
          ...e.UserPassword["*"],
        },
        filter_single: e.op(user.email, "=", email),
      }))
      .run(client);

    console.log("Result of the query:", user);

    if (!user?.password) {
      console.log("No password found in the result of the query");
      throw new Error("No password.");
    } else {
      console.log("password found");
    }

    const isPasswordValid = bcrypt.compare(password, user.password.hash);
    if (!isPasswordValid) {
      console.log("invalid password");
      throw new InputError(
        'Incorrect password. Please try again or select "Forgot password" to change it.',
        "password"
      );
    } else {
      console.log("correct password");
    }

    const { password: _password, ...userWithoutPassword } = user;
    console.log("return userWithoutPassword", userWithoutPassword);
    return userWithoutPassword;
  }
);

export const loginAdmin = makeDomainFunction(loginFormSchema)(
  async ({ email, password }) => {
    console.log("Admin email: ", email);
    console.log("password: ", password);
    const Admin = await e
      .select(e.Admin, (Admin) => ({
        ...e.Admin["*"],
        password: {
          ...e.AdminPassword["*"],
        },
        filter_single: e.op(Admin.email, "=", email),
      }))
      .run(client);

    console.log("Result of the query:", Admin);

    if (!Admin?.password) {
      console.log("No password found in the result of the query");
      throw new Error("No password.");
    } else {
      console.log("password found");
    }

    const isPasswordValid = bcrypt.compare(password, Admin.password.hash);
    if (!isPasswordValid) {
      console.log("invalid password");
      throw new InputError(
        'Incorrect password. Please try again or select "Forgot password" to change it.',
        "password"
      );
    } else {
      console.log("correct password");
    }

    const { password: _password, ...AdminWithoutPassword } = Admin;
    console.log("return AdminWithoutPassword", AdminWithoutPassword);
    return AdminWithoutPassword;
  }
);

This code is from a regular application WIP that has not been modified to work with mono repro ( my goal )

I would:

import { client, e } from "~/db.server";

But this import assumes its from the application and not the package.

Is there a workaround / best practice on how to approach this? im really baffled by how I could make this work.

Basically my question boils down to:
How would one 'pass' the prisma/typeorm/whatever typescript client for the database to the package

OR

Perhaps I approach this wrong?

[PhilDL]

Hello, I think a better approach would be to make your package side-effect composable and pass the "verify" and "store" in database as callbacks.

In the @core/auth package

You could wrap your auth into an auth function that accept 2 callback verify and store, and also the Type of the user will be a generics like that:

import bcrypt from "bcryptjs";
import { InputError, makeDomainFunction } from "domain-functions";
import { z } from "zod";

export const loginFormSchema = z.object({
  email: z.string().min(1, "Email is required.").email("Email is invalid."),
  password: z.string().min(1, "Password is required."),
});

// User is a generics here with a shape that should extends at least the required field 
// But the actual typing of User can be anything when you use it.
export const auth = <User extends { id: string; password: string; email: string }>({
  verify,
  store,
}: {
  verify: (email: string, password: string) => Promise<User | undefined>;
  store?: (user: Pick<User, "password" | "email">) => Promise<void>;
}) => {
  return {
    login: makeDomainFunction(loginFormSchema)(async ({ email, password }) => {
      const user = await verify(email, password);
      if (!user) {
        throw new Error("Invalid credentials");
      }
      return user;
    }),
    register: makeDomainFunction(loginFormSchema)(async ({ email, password }) => {
      const user = await verify(email, password);
      if (user) {
        throw new Error("User already exists");
      }
      const hash = await bcrypt.hash(password, 10);
      await store({ email, password: hash });
    }),
  };
};

In your remix app

Then you import that auth from your app code:

import { auth } from "@core/auth";

type MyCustomUserType = {
    id: string;
    password: string;
    email: string;
    foo: string;
    bar: string;
}
export const adminAuth = auth<MyCustomUserType>({
    verify: async (email, password) => {
        const user = await prisma.user.findUnique({ where: { email } });
        if (!user) {
            return undefined;
        }
        return user;
    },
    store: async ({ email, password }) => {
        return await prisma.user.create({
            data: {
                email,
                password,
            },
        });
    }
});

// then use elsewhere in your app
adminAuth.login({"email": "[email protected]", password: "supersecret"})

That was a rough draft to give you an idea the content of these functions is probably not what you want but the overall passing of callback and generics typing is what you want I think?

[Jarrodsz]

really nice i would have never come up with this myself. I will investigate and see if I can build from this example @PhilDL
as always much thanks for your insightful answers.

I will post back the actual solution it might be of use to people want to do the same in the future.

[Jarrodsz]

Had some ofher issues before finally managed to look into this.

I hope i might ask you for a little more advice regarding this.

Im not using prisma but another database edgedb.

I would like to seek expert advice on passing a client object (e.g., database client) from my Remix application to a mono repository package called "@auth". The problem is that I need the client object to be accessible throughout the package code.

In the login route (app/routes/_auth/login.tsx), I import the loginUser method from the "@auth" package and pass the client object to it:

import { loginUser } from "@auth/auth";

export async function action({ request }: ActionArgs) {
    const result = await loginUser(client, request);
}

However, I also need the client object to be available in other parts of the package, such as auth.server.ts and session.server.ts. For example:

import { Authenticator } from "remix-auth";
import { sessionStorage } from "./session.server";

export const authenticator = new Authenticator<UserAuthSession>(sessionStorage);

export async function loginUser(client: any, request: any) {
    // Code here
}

In session.server.ts:

import { createCookieSessionStorage } from "@remix-run/node";
import type { User, UserProfile } from "app/core/db.server";
export interface UserAuthSession extends User {
    // userProfile: UserProfile;
}

I would greatly appreciate any expert advice on ensuring that the client object is accessible throughout the "@auth" package code.

Could you give me some pointers as how to approach this?

If we forget domain functions lib for simpliciry regular model methods like here:

https://github.com/edgedb/remix/blob/main/app/models/user.server.ts

Would be the preferred way,
Only i cannot import from db.server.ts in the model file since it would need to be "passed from the remix app"

[PhilDL]

Hi!

If I understand correctly session.server.ts and auth.server.ts are in your @auth/auth package?

If that's the case then I think my previous example still works because it seems that you are never importing the client directly: it is passed as an argument, so you could instead directly pass the necessary functions as callbacks.
Anyway, if you really prefer to give client as an argument you will have to re-create a client interface with a type that is compatible with the edge-db client.

This is a Type/Interface that is going to be very hard to make and may potentially lock you into only edge-db, I don't have an example for that, but would not recommend.

One solution would be to use a simplified repository pattern and create a UserRepository Interface:

export interface UserRepository {
    getUserById: (id: string) => Promise<User | null>;
    getUserByEmail: (email: string) => Promise<User | null>;
    createUser: (email: string, password: string) => Promise<User>;
    deleteUserByEmail: (email: string) => Promise<void>;
    verifyLogin: (email: string, password: string) => Promise<User | null>;
}

This is what's gonna be the argument in your auth function instead of client:

import { Authenticator } from "remix-auth";
import type { UserRepository } from "./types.ts";
import { sessionStorage } from "./session.server";

export const authenticator = new Authenticator<UserAuthSession>(sessionStorage);

export async function loginUser(userRepository: UserRepository, request: any) {
    // Code here
}

From where you have access to the concrete database client (Remix app, apparently) you will create a concrete EdgeDBUserRepository or something:

export class EdgeDBUserRepostiroy implements UserRepository {
    async getUserById(id: string) {
        return await e
            .select(e.User, (user) => ({
                ...e.User["*"],
                filter: e.op(user.id, "=", e.uuid(id)),
            }))
            .run(client);
    }

    async getUserByEmail(email: string) {
        return await e
            .select(e.User, (user) => ({
                ...e.User["*"],
                filter: e.op(user.email, "=", email),
            }))
            .run(client);
    }
    // ... etc

With this pattern, you could later switch edge-db for something else more easily if you are still unsure about your database provider.