harsh-harlequin

How do I stop server code getting leaked to the client?

Hi, I have an util that should only be used by server code in orpc that leverages the crypto module, but based on my browser logs I am getting errors such as:

Uncaught (in promise) Error: Module "crypto" has been externalized for browser compatibility. Cannot access "crypto.createCipheriv" in client code
---
Uncaught (in promise) ReferenceError: Buffer is not defined

Uncaught (in promise) Error: Module "crypto" has been externalized for browser compatibility. Cannot access "crypto.createCipheriv" in client code
---
Uncaught (in promise) ReferenceError: Buffer is not defined

My router is currently set up this way:

import { os } from "@orpc/server";
import { portalRouter } from "./routes/portal";

const createRpcRouter = {
    healthCheck: os.handler(() => {
        return "OK";
    }),
    portal: portalRouter,
};

export const rpcRouter = createRpcRouter;

export type RpcRouter = typeof rpcRouter;

import { os } from "@orpc/server";
import { portalRouter } from "./routes/portal";

const createRpcRouter = {
    healthCheck: os.handler(() => {
        return "OK";
    }),
    portal: portalRouter,
};

export const rpcRouter = createRpcRouter;

export type RpcRouter = typeof rpcRouter;

and my client:

const getORPCClient = createIsomorphicFn()
    .server(() =>
        createRouterClient(rpcRouter, {
            context: () => {
                const { headers } = getWebRequest();
                return {
                    headers,
                };
            },
        }),
    )
    .client((): RouterClient<RpcRouter> => {
        const link = new RPCLink({
            url: `${window.location.origin}/api/rpc`,
        });
        return createORPCClient(link);
    });

export const client: RouterClient<RpcRouter> = getORPCClient();

export const orpc = createTanstackQueryUtils(client);

const getORPCClient = createIsomorphicFn()
    .server(() =>
        createRouterClient(rpcRouter, {
            context: () => {
                const { headers } = getWebRequest();
                return {
                    headers,
                };
            },
        }),
    )
    .client((): RouterClient<RpcRouter> => {
        const link = new RPCLink({
            url: `${window.location.origin}/api/rpc`,
        });
        return createORPCClient(link);
    });

export const client: RouterClient<RpcRouter> = getORPCClient();

export const orpc = createTanstackQueryUtils(client);

I saw online that you could use the serverOnly() function to wrap the router to solve this but it provides an error:

import { serverOnly } from "@tanstack/react-start";
const createRpcRouter = serverOnly(() => ({
    healthCheck: os.handler(() => {
        return "OK";
    }),
    portal: portalRouter,
}));

import { serverOnly } from "@tanstack/react-start";
const createRpcRouter = serverOnly(() => ({
    healthCheck: os.handler(() => {
        return "OK";
    }),
    portal: portalRouter,
}));

Error: serverOnly() functions can only be called on the server!

5 Replies

harsh-harlequinOP•4mo ago

code minimal example here: https://github.com/kevmok/tanstackstart-server-orpc https://codesandbox.io/p/github/kevmok/tanstackstart-server-orpc/main?import=true cc: @Manuel Schiller

GitHub

GitHub - kevmok/tanstackstart-server-orpc

Contribute to kevmok/tanstackstart-server-orpc development by creating an account on GitHub.

wise-white•4mo ago

if that function is called on the client as well you should use createIsomorphicFn as well and don't supply a client impl so it will be a noop on the client

stormy-gold•4mo ago

If you want to use this code ONLY in server side you should call these utils inside server functions or else, transform them in server functions.

wise-white•4mo ago

yep

harsh-harlequinOP•4mo ago

Got it, that makes sense That could work, but moving all the orpc routes as server functions doesn't seem right in my head Or should the orpc handler just call the server fn Ok I found the root cause of everything. So the crypto utils were not really that big of a deal, but I have an orpc middleware in this context file and main issue is that it's importing db and auth (also imports db) so it was producing errors in my portalRoute since it uses the protectedProcedure... I would assume the createIsomorphicFn would handle this no? since the server part is what's using the rpcRouter and the client is just using an RPCLink? /src/server/api/utils/context.ts

import { ORPCError, os } from "@orpc/server";
import { auth } from "@/lib/auth";

import { db } from "@/lib/db";

const authMiddleware = os
    .$context<{ headers: Headers }>()
    .middleware(async ({ context, next }) => {
        const session = await auth.api.getSession({
            headers: context.headers,
        });

        if (!session) {
            throw new ORPCError("UNAUTHORIZED", {
                message: "Authentication required",
            });
        }

        return next({ context: { ...context, session } });
    });

const dbProvider = os
    .$context<{ headers: Headers }>()
    .middleware(async ({ context, next }) => {
        return next({ context: { ...context, db } });
    });

export const publicProcedure = os
    .$context<{ headers: Headers }>()
    .use(dbProvider);

export const protectedProcedure = os
    .$context<{ headers: Headers }>()
    .use(authMiddleware)
    .use(dbProvider);

import { ORPCError, os } from "@orpc/server";
import { auth } from "@/lib/auth";

import { db } from "@/lib/db";

const authMiddleware = os
    .$context<{ headers: Headers }>()
    .middleware(async ({ context, next }) => {
        const session = await auth.api.getSession({
            headers: context.headers,
        });

        if (!session) {
            throw new ORPCError("UNAUTHORIZED", {
                message: "Authentication required",
            });
        }

        return next({ context: { ...context, session } });
    });

const dbProvider = os
    .$context<{ headers: Headers }>()
    .middleware(async ({ context, next }) => {
        return next({ context: { ...context, db } });
    });

export const publicProcedure = os
    .$context<{ headers: Headers }>()
    .use(dbProvider);

export const protectedProcedure = os
    .$context<{ headers: Headers }>()
    .use(authMiddleware)
    .use(dbProvider);

i think just separating the imports in the orpc file worked 😭

import type { RpcRouter } from "@/server/api/router";
import { rpcRouter } from "@/server/api/router";

import type { RpcRouter } from "@/server/api/router";
import { rpcRouter } from "@/server/api/router";

Gaming

Programming

How do I stop server code getting leaked to the client?

Did you find this page helpful?