can I use convex auth with hono?

There is no such example convex auth and hono.

13 Replies

What happens when you use this? https://labs.convex.dev/auth/authz#authenticate-http-actions

Authentication library for your Convex backend

kstulgysOP•9mo ago

have not tried this yet but I want to create some http endpoints that do not care about the auth and I want to use hono as it has nice interface to parsing urls etc, but I could not manage to make it work when I have auth setup in my http.ts file.

Michal Srb•9mo ago

Hmm, the hono router doesn't layer very well with the built-in router. Some form of this should get you to a working setup, we'll need more time to think about how to ideally combine these:

import { httpRouter } from "convex/server";
import { HonoWithConvex, HttpRouterWithHono } from "convex-helpers/server/hono";
import { Hono } from "hono";
import { auth } from "./auth";
import { ActionCtx } from "./_generated/server";

const http = httpRouter();

auth.addHttpRoutes(http);


const app: HonoWithConvex<ActionCtx> = new Hono();

app.get("/.well-known/openid-configuration", async (c) => {
  const [httpAction] = http.lookup("/.well-known/openid-configuration", "GET")
  return httpAction(c.env, c.req);
});

app.get("/.well-known/jwks.json", async (c) => {
  const [httpAction] = http.lookup("/.well-known/jwks.json", "GET")
  return httpAction(c.env, c.req);
});


app.get("/api/auth/signin/*", async (c) => {
  const [httpAction] = http.lookup("/api/auth/signin/foo", "GET")
  return httpAction(c.env, c.req);
});

app.on(['GET', 'POST'], "/api/auth/callback/*", async (c) => {
  const [httpAction] = http.lookup("/api/auth/callback/foo", c.req.method);
  return httpAction(c.env, c.req);
});

export default new HttpRouterWithHono(app);

import { httpRouter } from "convex/server";
import { HonoWithConvex, HttpRouterWithHono } from "convex-helpers/server/hono";
import { Hono } from "hono";
import { auth } from "./auth";
import { ActionCtx } from "./_generated/server";

const http = httpRouter();

auth.addHttpRoutes(http);


const app: HonoWithConvex<ActionCtx> = new Hono();

app.get("/.well-known/openid-configuration", async (c) => {
  const [httpAction] = http.lookup("/.well-known/openid-configuration", "GET")
  return httpAction(c.env, c.req);
});

app.get("/.well-known/jwks.json", async (c) => {
  const [httpAction] = http.lookup("/.well-known/jwks.json", "GET")
  return httpAction(c.env, c.req);
});


app.get("/api/auth/signin/*", async (c) => {
  const [httpAction] = http.lookup("/api/auth/signin/foo", "GET")
  return httpAction(c.env, c.req);
});

app.on(['GET', 'POST'], "/api/auth/callback/*", async (c) => {
  const [httpAction] = http.lookup("/api/auth/callback/foo", c.req.method);
  return httpAction(c.env, c.req);
});

export default new HttpRouterWithHono(app);

I didn't test this, or even typechecked it, but maybe you can make it work?

cameronm•8mo ago

@Michal Srb Any more thoughts on this? I can get everything with hono working great, but the /.well-known/openid-configuration and /.well-known/jwks.json paths from convex auth routes don't play well and always return null for the user I did a test of the above as well and there is a type error on c.req when calling httpAction Argument of type 'HonoRequest<"/.well-known/jwks.json", unknown>' is not assignable to parameter of type 'Request'. Type 'HonoRequest<"/.well-known/jwks.json", unknown>' is missing the following properties from type 'Request': cache, credentials, destination, headers, and 10 more.ts(2345)

Michal Srb•8mo ago

@cameronm try to typecast c.req as any

Michal Srb•8mo ago

There's also a different method for mounting the hono router inside the normal convex router: https://stack.convex.dev/hono-with-convex#extending-routes-using-the--prefix

Advanced HTTP Endpoints: Convex ❤️ Hono

Adding advanced HTTP Endpoint functionality by extending Convex with Hono.

cameronm•8mo ago

@Michal Srb Actually the above code you shared works to ensure the auth routes resolve correctly with the hono router 😀 . RE that article. So if I am understanding the second method in that article correctly, we are basically passing any incoming http requests to the hono router with the action context?

Michal Srb•8mo ago

Yeah. It's a flipped approach. In the code I shared, we ask the hono router to route the specific routes to the built-in router. In the article, we ask the built-in router to route the other routes to the hono router. (ofc you'd need to add the logic for not routing the auth routes to hono)

cameronm•8mo ago

Ah cool, ok. I'll play around with both approaches to see which mental model works better for me lol. Thanks for your help!

David Alonso•3w ago

The guide referenced above is really useful for the client piece of HTTP actions but I'm wondering why there isn't anything there on the recommended way of parsing that header and checking for the authenticated state. Wondering if something like a customHttpAction would be useful to define a helper like authenticatedAction but for http actions. Since Michal is not active afaik, I think maybe @sshader or @Ian can help? 🙏

Authorization - Convex Auth

Authentication library for your Convex backend

ian•3w ago

Could you add hono middleware, if you're already using hono?

David Alonso•3w ago

Not actually using hono, so was looking more for something like a customHttpAction, but i can easily switch to hono I guess as well!

ian•3w ago

One thing that's a little different / easier about http action handlers is that they aren't generic, so they're much easier to wrap. e.g.

route: "/api/foo",
handler: withAuth(async (ctx, auth, request) => {...})

route: "/api/foo",
handler: withAuth(async (ctx, auth, request) => {...})

Where withAuth is like:

type MyHandler = (ctx: HttpActionCtx, auth: Auth, requeset: Request) => Response;
function withAuth(handler: MyHandler) {
  return (ctx: HttpActionCtx, requeset: Request) => {
    const auth = //...
    return handler(ctx, auth, request);
  }
}

type MyHandler = (ctx: HttpActionCtx, auth: Auth, requeset: Request) => Response;
function withAuth(handler: MyHandler) {
  return (ctx: HttpActionCtx, requeset: Request) => {
    const auth = //...
    return handler(ctx, auth, request);
  }
}

can I use convex auth with hono?

Did you find this page helpful?