Better Auth•4mo ago

Hono + Nextjs

How do I handle my backend running on a separate app? What do I host on the backend, and what do I host on the frontend? Does the entire betterAuth object run on both the frontend and backend? Is there an example of this?

28 Replies

DawsonOP•4mo ago

im basically confused on where to have the better-auth object

Laktos•4mo ago

The docs have an example of this in the "installation" section. And as stated: "If you're using a separate client and server setup, make sure to install Better Auth in both parts of your project." The final step of the installation is "create client instance", which would be your FE.

DawsonOP•4mo ago

ah, didn't scroll that far down. Was trying to look under the hono section thank you!

Laktos•4mo ago

Alright, npnp! How's Hono? Used it for bigger projects or experimenting with it?

DawsonOP•4mo ago

Nothing too big quite yet, haven't shipped my big product. The biggest thing under hono gets about 130k requests a month and I've never had any issues with it I've tried to load it with fake traffic and it never had any issues. It's super fast when paired with bun The user experience is pretty good. I don't exactly love making websockets with it but it's great for its portability of deploying basically anywhere

Laktos•4mo ago

Cool! Another question then, what have you been using to load-test it/do the fake traffic? I kinda need something like that as well. Ah, alright. Oo just learned that NestJS supports bun. Getting kinda intrigued

DawsonOP•4mo ago

I found a custom script on github, not too sure which as it was a long time ago. I just analyzed the ram/cpu usage with btop and got the response time info from the script That's good to know. I currently use nextjs and I hate that it doesn't support bun Bun is releasing a nice S3 API which I would love to use, but I can't use that if my backend is made in hono hence my migration to multiple apps

Laktos•4mo ago

Ahh alright. That's a good start tbh. But then it might be pr good to get some service that can do distributed load testing. Oh, how come you can't use it if you're using hono?

DawsonOP•4mo ago

I was using hono inside of nextjs which is janky, but I just wanted to get the MVP up asap basically, it was a catch-all route which then rerouted to hono

Laktos•4mo ago

Sounds a lil jank yes! But if it works it works y'know. Seems like you'd lose quite a bit of the speed-benefits of hono no?

DawsonOP•4mo ago

Yea most likely, I don't really need THAT much speed though it's not like im hanging 100k active users at all times

Laktos•4mo ago

Haha nah it's probably quite rare to have those kinds of issues

DawsonOP•4mo ago

Yea probably, I've never had scaling issues even with apps that get millions of requests a month the only performance issues I get are the ones on my own machine 😭 why is typescript SO slow with this mono repo it takes multiple minutes to do certain intellisense tasks

Laktos•4mo ago

Man what do you use for IDE? That’s bonkers. And what kind of intellisense tasks? Doing LSP-based replacements repo-wide or something? Kinda makes sense that it could be a little slow though, depending on your language server config and the size of the repo

DawsonOP•4mo ago

uhhh, auto imports 😅 It's windsurf, I'm going to switch back to cursor in a few hours though It's not a large repo by any means, I started this project two days ago and have barely any time to code due to the holidays

DawsonOP•4mo ago

apparently I can't even import using the aliases inside my api app! Works fine in web

DawsonOP•4mo ago

intellisense recommended it too

Laktos•4mo ago

Lmaoo 😢 Damn windsurf looks cool! I've tried Cursor but I just became mad at it. I just can't switch because I love my nvim too much. I guess I might be missing out on some stuff though. You feel like it's overall net-positive with the AI IDE:s? To me it usually feels like I still have to put as much time in total as I would just writing it myself. Perhaps getting a few prompts into GPT o1 or Claude 3.5 for some thing which I just can't be bothered to write myself.

DawsonOP•4mo ago

I 100% feel like it's a net positive, you just need to learn how to use it the right way. You can use a .cursorrules file to specify an initial prompt which is a great start. I don't use it to make actual projects, I only use it to assist me. It's much better at adding onto projects rather than creating them imo If you did want to switch, you could always use the vim keybinds extension?

DawsonOP•4mo ago

https://dotcursorrules.com/

.CursorRules

Cursor Rules to customize Al behavior, streamline the development process and tailor code generation, suggestions and queries to your framework and language.

DawsonOP•4mo ago

Here's the one I used (slightly modifed version from above) https://paste.learnspigot.com/ivosaqojif.diff

LearnSpigot: Send and save code snippets on our pastebin

LearnSpigot provides a free web-based pastebin service for storing and sharing code snippets with anyone. Powered by hastebin.

DawsonOP•4mo ago

You may not get all the benefits of nvim from the extension, but at least you can get close

Laktos•4mo ago

I did use the vim extension. But it just was so bad for keyboard-first overall tbh. Or at least in terms of customizing it for navigation between different panes and moving around outside of the actual text editing. I guess the biggest issue was really the lack of deep mode-recognizion. Like in nvim the mode is respected everywhere, if you're in insert mode, then you only get the keybindings for insert mode. I didn't quite get that to work properly in Cursor, or VSCode. And the thing is that I'm not into nvim purely for the bindings. It's that I've built the perfect little editor with only what I want and around 50ms startup time. Going to VSCode / Cursor feels very bloated now. It's just too much stuff that I'll never use and all the repo-navigation is just so much better with telescope.nvim and mini.files than any other IDE that I've used. I've got an AI plugin using OpenAI too that can be workspace-aware, but my repo is too big for that (>400k LOC). And the same applies to Cursor. Kinda wish I could switch, but also very happy with my current setup. We'll see, maybe I'll try windsurf, the whole agentic thing seems cool.

DawsonOP•4mo ago

Ah, yea that’s one massive project. I’m simply so used to embracing the bloat (I’ve used Intellij based IDEs all my life), i’m simply used to it Could you make the AI only work for parts of the project? I believe windsurfs agent is better, though they’re the same models so can’t be too different

Laktos•4mo ago

Sure is! Damn, makes sense though. I mean I was too with VSCode, used the vim plugin for a year. Those plugins are a great start, the motions are essential. I mean now I use it so that I can chat or edit the current file. But yknow that’s a pr good idea, because since it’s a monorepo I should be able to limit it to the ”current service”. Will be a bit handicapped, no access to shared types/utils but maybe better than nothing. A lil worried about token spending when doing that though. I think it can be vast differences using the same model. Like better chunking strategies in RAG will yield much better results. So maybe windsurf is onto something. What made you go back? Tried using windsurf to setup a nuxt repo with better-auth and it's horrible at it tbh. I would have imagined it would have the LSP info to be able to know which methods etc are available from the package but it hallucinates a ton and just creates a mess. But perhaps it's better as you say after initial implementation, to do additions etc

Unknown User•3mo ago

Message Not Public

DawsonOP•3mo ago

yea, kinda hold on so you want to call a hono api route from the nextjs site?

export function useProjects() {
  return useQuery<Project[]>({
    queryKey: ["projects"],
    // @ts-ignore - It's the same type
    queryFn: async () => {
      const res = await authClient.$fetch(`${env.NEXT_PUBLIC_API_URL}/v1/projects`, {
        credentials: "include",
      });

      return res.data as Project[];
    }
  });

}

export function useProjects() {
  return useQuery<Project[]>({
    queryKey: ["projects"],
    // @ts-ignore - It's the same type
    queryFn: async () => {
      const res = await authClient.$fetch(`${env.NEXT_PUBLIC_API_URL}/v1/projects`, {
        credentials: "include",
      });

      return res.data as Project[];
    }
  });

}

That's what I ended up doing then authClient is:

import env from "@/env";
import {
  magicLinkClient,
  organizationClient,
} from "better-auth/client/plugins";
import { createAuthClient } from "better-auth/react";

export const authClient = createAuthClient({
  baseURL: env.NEXT_PUBLIC_API_URL,
  plugins: [magicLinkClient()],
});

export const {
  signIn,
  signOut,
  signUp,
  revokeSession,
  updateUser,
  getSession,
  magicLink,
  changePassword,
  resetPassword,
  sendVerificationEmail,
  changeEmail,
  deleteUser,
  linkSocial,
  forgetPassword,
  verifyEmail,
  listAccounts,
  listSessions,
  revokeOtherSessions,
  revokeSessions,
  $fetch
} = authClient;

import env from "@/env";
import {
  magicLinkClient,
  organizationClient,
} from "better-auth/client/plugins";
import { createAuthClient } from "better-auth/react";

export const authClient = createAuthClient({
  baseURL: env.NEXT_PUBLIC_API_URL,
  plugins: [magicLinkClient()],
});

export const {
  signIn,
  signOut,
  signUp,
  revokeSession,
  updateUser,
  getSession,
  magicLink,
  changePassword,
  resetPassword,
  sendVerificationEmail,
  changeEmail,
  deleteUser,
  linkSocial,
  forgetPassword,
  verifyEmail,
  listAccounts,
  listSessions,
  revokeOtherSessions,
  revokeSessions,
  $fetch
} = authClient;

Slightly jank but it seemed to work

Unknown User•3mo ago

Message Not Public

Gaming

Programming

Hono + Nextjs

Did you find this page helpful?