BA
Better Auth•3mo ago
Sithu Khant

Hono and Better-Auth

Do you think if I create my own route for better-auth, would it be double api calling? If I want to keep only one api.
100 Replies
Sithu Khant
Sithu KhantOP•3mo ago
@lonelyplanet any tips? I see you created a new thread I think it is same concern as me 😄
lonelyplanet
lonelyplanet•3mo ago
https://github.com/lonelyplanetdev/better-auth-with-hono-handler-nextjs
GitHub
GitHub - lonelyplanetdev/better-auth-with-hono-handler-nextjs
Contribute to lonelyplanetdev/better-auth-with-hono-handler-nextjs development by creating an account on GitHub.
lonelyplanet
lonelyplanet•3mo ago
Thats an option to use the better-auth invokable functions without the using the auth handler in hono, Downside you would have to create your own routes for auth logic and couldnt use better-auth/client but you can use hono/client in that example @Sithu Khant That will allow you to manage one api but will make implementation more complex
Sithu Khant
Sithu KhantOP•3mo ago
it won't work the better-auth live in /api/auth/*, if we mess up with its pass, auth server code will fail You need different path like /api/authorize/sign-in for your own one that is what I am doing it.
lonelyplanet
lonelyplanet•3mo ago
You just dont add the handler
Sithu Khant
Sithu KhantOP•3mo ago
the downside is I need any single routes like better-auth has that handler?
lonelyplanet
lonelyplanet•3mo ago
Step 7
Sithu Khant
Sithu KhantOP•3mo ago
it will still work?
lonelyplanet
lonelyplanet•3mo ago
Have a look at that repo It works and uses hono+nextjs
Sithu Khant
Sithu KhantOP•3mo ago
if it is true, I am hype!
lonelyplanet
lonelyplanet•3mo ago
Specifically https://github.com/lonelyplanetdev/better-auth-with-hono-handler-nextjs/blob/main/src/app/api/%5B%5B...route%5D%5D/route.ts
GitHub
better-auth-with-hono-handler-nextjs/src/app/api/[[...route]]/route...
Contribute to lonelyplanetdev/better-auth-with-hono-handler-nextjs development by creating an account on GitHub.
Sithu Khant
Sithu KhantOP•3mo ago
let me try that...
lonelyplanet
lonelyplanet•3mo ago
There is a small type error on the headers but its still working, the type error was safe to ignore since its just reading the headers
Sithu Khant
Sithu KhantOP•3mo ago
what the f**k, it is working...!
lonelyplanet
lonelyplanet•3mo ago
Wait i think the signout wont work... its because i messed up the headers
Sithu Khant
Sithu KhantOP•3mo ago
I think the handler is only for frameworks
lonelyplanet
lonelyplanet•3mo ago
The handler is there for the client but also means you dont have to manually write out all your auth apis
Sithu Khant
Sithu KhantOP•3mo ago
I think if you have custom middleware, you might not need headers: c.req.header(), I have my own middleware
lonelyplanet
lonelyplanet•3mo ago
but the concept is there you dont need the handler to use betterAuth.api
Sithu Khant
Sithu KhantOP•3mo ago
Like this: 
import { createMiddleware } from "hono/factory";

import { auth } from "../auth";

type Env = {
  Variables: {
    user: typeof auth.$Infer.Session.user | null;
    session: typeof auth.$Infer.Session.session | null;
  };
};

export const middleware = createMiddleware<Env>(async (c, next) => {
  const session = await auth.api.getSession({ headers: c.req.raw.headers });

  if (!session) {
    return c.json({ message: "Unauthorized" });
  }

  c.set("user", session.user);
  c.set("session", session.session);
  return next();
});
import { createMiddleware } from "hono/factory";

import { auth } from "../auth";

type Env = {
  Variables: {
    user: typeof auth.$Infer.Session.user | null;
    session: typeof auth.$Infer.Session.session | null;
  };
};

export const middleware = createMiddleware<Env>(async (c, next) => {
  const session = await auth.api.getSession({ headers: c.req.raw.headers });

  if (!session) {
    return c.json({ message: "Unauthorized" });
  }

  c.set("user", session.user);
  c.set("session", session.session);
  return next();
});
lonelyplanet
lonelyplanet•3mo ago
That should work fine!, you still need to pass in headers to every betterAuth.api call 
.post("/auth/signin", async (c) => {
    const { email, password } = await c.req.json();
    await auth.api.signInEmail({
      headers: c.req.raw.headers,
      body: {
        email,
        password,
      },
    });
    return c.json({ success: true });
  })
.post("/auth/signin", async (c) => {
    const { email, password } = await c.req.json();
    await auth.api.signInEmail({
      headers: c.req.raw.headers,
      body: {
        email,
        password,
      },
    });
    return c.json({ success: true });
  })
Sithu Khant
Sithu KhantOP•3mo ago
thanks, I would try hey, how did you do for signout?
lonelyplanet
lonelyplanet•3mo ago
use this as an example
Sithu Khant
Sithu KhantOP•3mo ago
why I need raw headers?
lonelyplanet
lonelyplanet•3mo ago
The functions require headers to get the current session without headers how would the signout method know to delete users a session and not users b session
Sithu Khant
Sithu KhantOP•3mo ago
now, I can use like this on my client code: 
  async function onSubmit(data: typeof defaultValues) {
    const { name, email, password } = data;
    errorMessage = "";

    const signInResponse = await makeClient(fetch).api.auth.signUp.$post({
      json: { name, email, password }
    });
    const { message } = await signInResponse.json();

    if (signInResponse.ok) {
      successMessage = message;
      goto("/subscriptions");
    } else {
      errorMessage = message;
    }
  async function onSubmit(data: typeof defaultValues) {
    const { name, email, password } = data;
    errorMessage = "";

    const signInResponse = await makeClient(fetch).api.auth.signUp.$post({
      json: { name, email, password }
    });
    const { message } = await signInResponse.json();

    if (signInResponse.ok) {
      successMessage = message;
      goto("/subscriptions");
    } else {
      errorMessage = message;
    }
I don't need both auth client and hono client anymore, I only would need hono client! That is cool!
lonelyplanet
lonelyplanet•3mo ago
Auth client will not work this way anyway auth client needs the auth handler
Sithu Khant
Sithu KhantOP•3mo ago
I mean it is not a problem to use both auth client and hono client if client and server are in the same folder, but might not be an ideal way if you have api from different server
lonelyplanet
lonelyplanet•3mo ago
If you are deploying backend and frontend separately you can use a mono repo for type safety in development.
Sithu Khant
Sithu KhantOP•3mo ago
really, how can I do that? like graphql? but I don't like that one maybe openapi?
lonelyplanet
lonelyplanet•3mo ago
https://turbo.build/repo/docs
Turbo
Introduction | Turborepo
Welcome to the Turborepo documentation!
lonelyplanet
lonelyplanet•3mo ago
You could have hono backend export the AppType and it can be used inside of the front end to create the honoClient with that exported type Turbo repo would be the easiest way to start playing with monorepos.
Sithu Khant
Sithu KhantOP•3mo ago
thanks, I would try @lonelyplanet I think there is something wrong with my codes. the cookies didn't get store!!! this is my auth routes: 
import { Hono } from "hono";
import { zValidator } from "@hono/zod-validator";

import { middleware } from "$lib/server/api/middleware";
import { auth } from "$lib/server/auth";

import { loginSchema, registerSchema } from "./schemas";

const app = new Hono()
  .get("current", middleware, async (c) => {
    const user = c.get("user");
    const session = c.get("session");

    return c.json({ user, session }, 200);
  })
  .post("signIn", zValidator("json", loginSchema), async (c) => {
    const data = c.req.valid("json");
    const { email, password } = data;

    try {
      const res = await auth.api.signInEmail({
        header: c.req.raw.headers,
        body: { email, password },
        asResponse: true
      });

      console.log("signIn: ", await res.json());

      return c.json({ message: `Success!` });
    } catch (error) {
      const message = error instanceof Error ? error.message : "Something went wrong!";
      return c.json({ message }, 500);
    }
  })
  .post("signUp", zValidator("json", registerSchema), async (c) => {
    const data = c.req.valid("json");
    const { name, email, password } = data;

    try {
      await auth.api.signUpEmail({
        header: c.req.raw.headers,
        body: { name, email, password },
        asResponse: true
      });

      return c.json({ message: `Registration successful!` });
    } catch (error) {
      const message = error instanceof Error ? error.message : "Something went wrong!";
      return c.json({ message }, 500);
    }
  })
  .post("signOut", async (c) => {
    try {
      await auth.api.signOut({
        headers: c.req.raw.headers
      });

      return c.json({ message: `Success!` });
    } catch (error) {
      const message = error instanceof Error ? error.message : "Something went wrong!";
      return c.json({ message }, 500);
    }
  });

export default app;
import { Hono } from "hono";
import { zValidator } from "@hono/zod-validator";

import { middleware } from "$lib/server/api/middleware";
import { auth } from "$lib/server/auth";

import { loginSchema, registerSchema } from "./schemas";

const app = new Hono()
  .get("current", middleware, async (c) => {
    const user = c.get("user");
    const session = c.get("session");

    return c.json({ user, session }, 200);
  })
  .post("signIn", zValidator("json", loginSchema), async (c) => {
    const data = c.req.valid("json");
    const { email, password } = data;

    try {
      const res = await auth.api.signInEmail({
        header: c.req.raw.headers,
        body: { email, password },
        asResponse: true
      });

      console.log("signIn: ", await res.json());

      return c.json({ message: `Success!` });
    } catch (error) {
      const message = error instanceof Error ? error.message : "Something went wrong!";
      return c.json({ message }, 500);
    }
  })
  .post("signUp", zValidator("json", registerSchema), async (c) => {
    const data = c.req.valid("json");
    const { name, email, password } = data;

    try {
      await auth.api.signUpEmail({
        header: c.req.raw.headers,
        body: { name, email, password },
        asResponse: true
      });

      return c.json({ message: `Registration successful!` });
    } catch (error) {
      const message = error instanceof Error ? error.message : "Something went wrong!";
      return c.json({ message }, 500);
    }
  })
  .post("signOut", async (c) => {
    try {
      await auth.api.signOut({
        headers: c.req.raw.headers
      });

      return c.json({ message: `Success!` });
    } catch (error) {
      const message = error instanceof Error ? error.message : "Something went wrong!";
      return c.json({ message }, 500);
    }
  });

export default app;
lonelyplanet
lonelyplanet•3mo ago
The routes im doing since im in nextjs im using the nextjsCookies plugin in auth instance since your nolonger using the handler you need yo handle cookies yourself
Sithu Khant
Sithu KhantOP•3mo ago
yep
Sithu Khant
Sithu KhantOP•3mo ago
I think i need to follow this docs: https://www.better-auth.com/docs/concepts/cookies
Cookies | Better Auth
Learn how cookies are used in Better Auth.
Sithu Khant
Sithu KhantOP•3mo ago
this is just my current auth server: 
import { betterAuth } from "better-auth";
import { drizzleAdapter } from "better-auth/adapters/drizzle";

import { db } from "../db";
import { account, session, user, verification } from "../db/schemas/auth-schema";

export const auth = betterAuth({
  emailAndPassword: {
    enabled: true
  },
  database: drizzleAdapter(db, {
    provider: "sqlite",
    schema: { user, session, account, verification }
  })
});
import { betterAuth } from "better-auth";
import { drizzleAdapter } from "better-auth/adapters/drizzle";

import { db } from "../db";
import { account, session, user, verification } from "../db/schemas/auth-schema";

export const auth = betterAuth({
  emailAndPassword: {
    enabled: true
  },
  database: drizzleAdapter(db, {
    provider: "sqlite",
    schema: { user, session, account, verification }
  })
});
lonelyplanet
lonelyplanet•3mo ago
use import { getCookie, getSignedCookie, setCookie, setSignedCookie, deleteCookie, } from 'hono/cookie' for your cookies setting and getting your shouldn't need to get a cookie since your passing all headers in on every request
Sithu Khant
Sithu KhantOP•3mo ago
then? man!, I don't know too much about cookies!
lonelyplanet
lonelyplanet•3mo ago
but for signup you want to first check if the const res = await auth.api.signUpEmail(..rest of code); then do const sessionToken = res.token; // this will be string | undefined this token is the value you will set the cookie I think i have a solution for you give me a second
Sithu Khant
Sithu KhantOP•3mo ago
really...? thanks!
lonelyplanet
lonelyplanet•3mo ago
https://github.com/better-auth/better-auth/issues/1470 Seems like there might be a bug atm
GitHub
The setSignedCookie type and import causes not TS errors and appear...
Is this suited for github? Yes, this is suited for github To Reproduce Import setSignedCookie from better auth into a file Try use it. Current vs. Expected behavior Should be a valid function as th...
Sithu Khant
Sithu KhantOP•3mo ago
I got it working!!! I just need to set this: 
      const cookies = res.headers.get("set-cookie");
      if (cookies) {
        c.header("set-cookie", cookies);
      }
      const cookies = res.headers.get("set-cookie");
      if (cookies) {
        c.header("set-cookie", cookies);
      }
like this: 
  .post("signIn", zValidator("json", loginSchema), async (c) => {
    const data = c.req.valid("json");
    const { email, password } = data;

    try {
      const res = await auth.api.signInEmail({
        header: c.req.raw.headers,
        body: { email, password },
        asResponse: true
      });

      const cookies = res.headers.get("set-cookie");
      if (cookies) {
        c.header("set-cookie", cookies);
      }

      return c.json({ message: `Success!` });
    } catch (error) {
      const message = error instanceof Error ? error.message : "Something went wrong!";
      return c.json({ message }, 500);
    }
  })
  .post("signIn", zValidator("json", loginSchema), async (c) => {
    const data = c.req.valid("json");
    const { email, password } = data;

    try {
      const res = await auth.api.signInEmail({
        header: c.req.raw.headers,
        body: { email, password },
        asResponse: true
      });

      const cookies = res.headers.get("set-cookie");
      if (cookies) {
        c.header("set-cookie", cookies);
      }

      return c.json({ message: `Success!` });
    } catch (error) {
      const message = error instanceof Error ? error.message : "Something went wrong!";
      return c.json({ message }, 500);
    }
  })
chatgpt helped me.. xD!
lonelyplanet
lonelyplanet•3mo ago
Does it work?
Sithu Khant
Sithu KhantOP•3mo ago
yes... it is freaking working! The auth.ts file still the same
lonelyplanet
lonelyplanet•3mo ago
Im sureprised glad it works
Sithu Khant
Sithu KhantOP•3mo ago
thanks man
Tenuka
Tenuka•2mo ago
the problem I have is that when I get the headers the headers are 
Headers(7) {
  'accept' => '*/*',
  'accept-encoding' => 'br, gzip',
  'accept-language' => '*',
  'host' => '127.0.0.1:8787',
  'sec-fetch-mode' => 'cors',
  'user-agent' => 'Next.js Middleware',
  'x-middleware-subrequest' => 'app/(frontend)/(home)/page',
  [immutable]: false
}
Headers(7) {
  'accept' => '*/*',
  'accept-encoding' => 'br, gzip',
  'accept-language' => '*',
  'host' => '127.0.0.1:8787',
  'sec-fetch-mode' => 'cors',
  'user-agent' => 'Next.js Middleware',
  'x-middleware-subrequest' => 'app/(frontend)/(home)/page',
  [immutable]: false
}
( from the hono server ) 
but in the nextjs server the headers are
accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
accept-encoding: gzip, deflate, br, zstd
accept-language: en-US,en;q=0.5
connection: keep-alive
cookie: __next_hmr_refresh_hash__=eff7c8d1edf8c7cd0a8f684ab6e771b89b1ccb7f232d4f38        
dnt: 1
host: localhost:3000
priority: u=0, i
referer: http://localhost:3000/
sec-fetch-dest: document
sec-fetch-mode: navigate
sec-fetch-site: same-origin
sec-gpc: 1
upgrade-insecure-requests: 1
user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:136.0) Gecko/20100101 Firefox/136.0
x-forwarded-for: ::ffff:127.0.0.1
x-forwarded-host: localhost:3000
x-forwarded-port: 3000
x-forwarded-proto: http
but in the nextjs server the headers are
accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
accept-encoding: gzip, deflate, br, zstd
accept-language: en-US,en;q=0.5
connection: keep-alive
cookie: __next_hmr_refresh_hash__=eff7c8d1edf8c7cd0a8f684ab6e771b89b1ccb7f232d4f38        
dnt: 1
host: localhost:3000
priority: u=0, i
referer: http://localhost:3000/
sec-fetch-dest: document
sec-fetch-mode: navigate
sec-fetch-site: same-origin
sec-gpc: 1
upgrade-insecure-requests: 1
user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:136.0) Gecko/20100101 Firefox/136.0
x-forwarded-for: ::ffff:127.0.0.1
x-forwarded-host: localhost:3000
x-forwarded-port: 3000
x-forwarded-proto: http
there is the cookies in the nextjs header but not in req.raw.headers
lonelyplanet
lonelyplanet•2mo ago
Hmm?
Tenuka
Tenuka•2mo ago
what to do man, Im stuck for weeks
lonelyplanet
lonelyplanet•2mo ago
Are your hono app hosted seperate from nextjs app?
Tenuka
Tenuka•2mo ago
Yes
lonelyplanet
lonelyplanet•2mo ago
What does your nextjs middleware look like
Tenuka
Tenuka•2mo ago
Auth server config

message.txt

Tenuka
Tenuka•2mo ago
import { NextRequest, NextResponse } from "next/server";
import { client } from "./lib/client";

export const middleware = async (req: NextRequest) => {
  const { userSession } = await (
    await client.user.getUserSession.$get()
  ).json();
  const response = NextResponse.next();

  if (
    req.nextUrl.pathname.startsWith("/admin") &&
    userSession?.user?.role !== "admin"
  ) {
    return NextResponse.redirect(new URL("/auth/login", req.url));
  }

  if (
    req.nextUrl.pathname === "/auth/login" &&
    userSession?.user &&
    userSession?.session
  ) {
    return NextResponse.redirect(new URL("/", req.url));
  }

  return response;
};

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - api (API routes)
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico, sitemap.xml, robots.txt (metadata files)
     */
    "/((?!api|_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)",
  ],
};
import { NextRequest, NextResponse } from "next/server";
import { client } from "./lib/client";

export const middleware = async (req: NextRequest) => {
  const { userSession } = await (
    await client.user.getUserSession.$get()
  ).json();
  const response = NextResponse.next();

  if (
    req.nextUrl.pathname.startsWith("/admin") &&
    userSession?.user?.role !== "admin"
  ) {
    return NextResponse.redirect(new URL("/auth/login", req.url));
  }

  if (
    req.nextUrl.pathname === "/auth/login" &&
    userSession?.user &&
    userSession?.session
  ) {
    return NextResponse.redirect(new URL("/", req.url));
  }

  return response;
};

export const config = {
  matcher: [
    /*
     * Match all request paths except for the ones starting with:
     * - api (API routes)
     * - _next/static (static files)
     * - _next/image (image optimization files)
     * - favicon.ico, sitemap.xml, robots.txt (metadata files)
     */
    "/((?!api|_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)",
  ],
};
If I call the server URL/api/get session from here with the nextjs headers the the session returns but in the hono server I can't cus headers are missing
Tenuka
Tenuka•2mo ago
better auth config

message.txt

lonelyplanet
lonelyplanet•2mo ago
await client.user.getUserSession.$get()
await client.user.getUserSession.$get()
are the server and nextjs app hosted on the same domain? like api.example.com <- hone and example.com <- nextjs
Tenuka
Tenuka•2mo ago
nop but I've enabled cross origin cookies the server is on 127.0.0.1:8787 and nextjs on localhost:3000
lonelyplanet
lonelyplanet•2mo ago
have you tried checking cookies in your browser? that they are infact on both domains?
Tenuka
Tenuka•2mo ago
the browser has the cookie but not the server I need to set the cookies in the server 
import { createAuthClient } from "better-auth/react";
import { magicLinkClient, adminClient } from "better-auth/client/plugins";
import { nextCookies } from "better-auth/next-js";

export const authClient = createAuthClient({
  plugins: [adminClient(), magicLinkClient(), nextCookies()],
  baseURL: `${process.env.NEXT_PUBLIC_SERVER_URL ? process.env.NEXT_PUBLIC_SERVER_URL : "http://localhost:8787"}`,
});
import { createAuthClient } from "better-auth/react";
import { magicLinkClient, adminClient } from "better-auth/client/plugins";
import { nextCookies } from "better-auth/next-js";

export const authClient = createAuthClient({
  plugins: [adminClient(), magicLinkClient(), nextCookies()],
  baseURL: `${process.env.NEXT_PUBLIC_SERVER_URL ? process.env.NEXT_PUBLIC_SERVER_URL : "http://localhost:8787"}`,
});
I've tried everything but nothing worked, this is the client config
lonelyplanet
lonelyplanet•2mo ago
Using your browser the cookies are on the server domain?
No description
lonelyplanet
lonelyplanet•2mo ago
and the App domain
lonelyplanet
lonelyplanet•2mo ago
No description
lonelyplanet
lonelyplanet•2mo ago
are they on both?
Tenuka
Tenuka•2mo ago
there is the cookie in the browser but not in the header
No description
No description
lonelyplanet
lonelyplanet•2mo ago
Have you tried using localhost:8787 instead of 127.0.0.1
Tenuka
Tenuka•2mo ago
no I can't cus I'm on cloudflare worker Everything breaks on localhost:8787
lonelyplanet
lonelyplanet•2mo ago
127.0.0.1 doesnt share cookies with localhost
Tenuka
Tenuka•2mo ago
header Headers(7) {
  'accept' => '*/*',
  'accept-encoding' => 'br, gzip',
  'accept-language' => '*',
  'host' => '127.0.0.1:8787',
  'sec-fetch-mode' => 'cors',
  'user-agent' => 'Next.js Middleware',
  'x-middleware-subrequest' => 'app/(frontend)/(home)/page',
  [immutable]: false
}
header Headers(7) {
  'accept' => '*/*',
  'accept-encoding' => 'br, gzip',
  'accept-language' => '*',
  'host' => '127.0.0.1:8787',
  'sec-fetch-mode' => 'cors',
  'user-agent' => 'Next.js Middleware',
  'x-middleware-subrequest' => 'app/(frontend)/(home)/page',
  [immutable]: false
}
import { j, publicDefaultProcedure } from "../jstack";

export const userRouter = j.router({
  getUserSession: publicDefaultProcedure.query(async ({ c, ctx }) => {
    const userSession = { session: c.get("session"), user: c.get("user") };
    console.log("header", c.req.raw.headers);
    return c.superjson({
      userSession,
    });
  }),
});
import { j, publicDefaultProcedure } from "../jstack";

export const userRouter = j.router({
  getUserSession: publicDefaultProcedure.query(async ({ c, ctx }) => {
    const userSession = { session: c.get("session"), user: c.get("user") };
    console.log("header", c.req.raw.headers);
    return c.superjson({
      userSession,
    });
  }),
});
How can I change the wrangler to be lcoalhost insted of 127
lonelyplanet
lonelyplanet•2mo ago
try use 127.0.0.1:3000 for you nextjs app
Tenuka
Tenuka•2mo ago
okey let me see
lonelyplanet
lonelyplanet•2mo ago
and also in your client config change it from localhost to 127.0.0.1
Tenuka
Tenuka•2mo ago
alright but isnt cross domain thing working
lonelyplanet
lonelyplanet•2mo ago
you have localhost set here set to 127.0.0.1
Tenuka
Tenuka•2mo ago
but the env is the one loading ( thats a error of mine )
lonelyplanet
lonelyplanet•2mo ago
? Oh okay just make sure your using 127.0.0.1 across everything
Tenuka
Tenuka•2mo ago
.env.local has the 127.0.0.1:8787 as a variable so that localhost gets overwritten oeky
lonelyplanet
lonelyplanet•2mo ago
localhost doesnt appear to be the same as 127.0.0.1, doesn't count as same domain i believe after trying on my application changing localhost:3000 to 127.0.0.1:3000 does not have same cookies even thought localhost should be an alias of 127.0.0.1
Tenuka
Tenuka•2mo ago
even if I'm logged in ysing 127.0.0.1 it dosent work
No description
lonelyplanet
lonelyplanet•2mo ago
are the cookies shared? 127.0.0.1:3000 and 127.0.0.1:8787
Tenuka
Tenuka•2mo ago
Yes they are shared but still the heders gets nothing session { session: undefined, user: undefined } header Headers(7) { 'accept' => '/', 'accept-encoding' => 'br, gzip', 'accept-language' => '*', 'host' => '127.0.0.1:8787', 'sec-fetch-mode' => 'cors', 'user-agent' => 'Next.js Middleware', 'x-middleware-subrequest' => 'middleware', [immutable]: false }
No description
No description
lonelyplanet
lonelyplanet•2mo ago
You know what. Middleware is server side await client.user.getUserSession.$get() This would be your server asking the other server but its not a browser so cookies arent being passed manually pass the session token
Tenuka
Tenuka•2mo ago
How to do that
lonelyplanet
lonelyplanet•2mo ago
is this ./lib/client? The problem is when you run this on your browser await client.user.getUserSession.$get() -> the Browser is automatctially appending the cookies to the request However if called from the server cookies dont exist on the server so how is it supposed to send the cookies? you have to add the cookies header to the get request 
import { cookies } from 'next/headers';

// Get cookie string representation
const cookieString = (await cookies()).toString();

// Use in fetch request
const response = await fetch('/my-url', {
  headers: {
    Cookie: cookieString
  }
});
import { cookies } from 'next/headers';

// Get cookie string representation
const cookieString = (await cookies()).toString();

// Use in fetch request
const response = await fetch('/my-url', {
  headers: {
    Cookie: cookieString
  }
});
that was with a fetch you would have to add the cookie header to the call your making with your client 
await client.user.getUserSession.$get(); // pass in the cookie header into this request
await client.user.getUserSession.$get(); // pass in the cookie header into this request
Tenuka
Tenuka•2mo ago
yes I cant get cookies for next in the hono server cus process is undefined
lonelyplanet
lonelyplanet•2mo ago
what is
 import { client } from "./lib/client"
 import { client } from "./lib/client"
You need to get cookies in nextjs middleware
Tenuka
Tenuka•2mo ago
import { createClient } from "jstack"; import { AppRouter } from "~/server"; /** * Your type-safe API client * @see https://jstack.app/docs/backend/api-client */ export const client = createClient<AppRouter>({ baseUrl: ${process.env.NEXT_PUBLIC_SERVER_URL ? process.env.NEXT_PUBLIC_SERVER_URL : "http://127.0.0.1:8787"}/api, credentials: "include", fetch: (input: RequestInfo | URL, requestInit?: RequestInit) => { return fetch(input, { method: requestInit?.method ?? "GET", credentials: "include", headers: { ...requestInit?.headers, }, body: requestInit?.body ?? null, }); }, }); it is the hono client
JStack Docs - Full-Stack Next.js & TypeScript Toolkit
Build fast, reliable Next.js apps with the most modern web technologies.
lonelyplanet
lonelyplanet•2mo ago
and then pass them to your server
Tenuka
Tenuka•2mo ago
okey 
import { jstack } from "jstack";
import { env } from "hono/adapter";
import { HTTPException } from "hono/http-exception";

import { Resend } from "resend";
import { auth } from "./db/auth.server";
import { getDB } from "./db/drizzle";

export interface AppContext {
  Bindings: Env;
  Variables: {
    user: ReturnType<typeof auth>["$Infer"]["Session"]["user"] | null;
    session: ReturnType<typeof auth>["$Infer"]["Session"]["session"] | null;
    auth: ReturnType<typeof auth>;
  };
}

export const j = jstack.init<AppContext>();

const publicDBMiddleware = j.middleware(async ({ c, next }) => {
  const db = getDB({ ...c.env });
  return await next({ db });
});

const publicResendMiddleware = j.middleware(async ({ c, next }) => {
  const { AUTH_RESEND_KEY } = env(c);
  const resend = new Resend(AUTH_RESEND_KEY);

  return await next({ resend });
});

const publicAuthMiddleware = j.middleware(async ({ c, next }) => {
  const authInstance = c.get("auth");

  return await next({ auth: authInstance });
});

const adminDBMiddleware = j.middleware(async ({ c, next }) => {
  const user = c.get("user");

  if (!user) {
    throw new HTTPException(401, {
      message: "Unauthorized access. Please sign in to continue.",
    });
  }

  if (user?.role !== "admin") {
    throw new HTTPException(403, {
      message:
        "Access denied. You do not have the necessary permissions to perform this action. Please contact the administration for assistance.",
    });
  }
  const db = getDB({ ...c.env });

  return await next({ db });
});

export const publicDefaultProcedure = j.procedure;
export const publicAuthProcedure = j.procedure.use(publicAuthMiddleware);
export const publicDBProcedure = j.procedure.use(publicDBMiddleware);
export const publicResendProcedure = j.procedure.use(publicResendMiddleware);
export const adminDBProcedure = j.procedure.use(adminDBMiddleware);
import { jstack } from "jstack";
import { env } from "hono/adapter";
import { HTTPException } from "hono/http-exception";

import { Resend } from "resend";
import { auth } from "./db/auth.server";
import { getDB } from "./db/drizzle";

export interface AppContext {
  Bindings: Env;
  Variables: {
    user: ReturnType<typeof auth>["$Infer"]["Session"]["user"] | null;
    session: ReturnType<typeof auth>["$Infer"]["Session"]["session"] | null;
    auth: ReturnType<typeof auth>;
  };
}

export const j = jstack.init<AppContext>();

const publicDBMiddleware = j.middleware(async ({ c, next }) => {
  const db = getDB({ ...c.env });
  return await next({ db });
});

const publicResendMiddleware = j.middleware(async ({ c, next }) => {
  const { AUTH_RESEND_KEY } = env(c);
  const resend = new Resend(AUTH_RESEND_KEY);

  return await next({ resend });
});

const publicAuthMiddleware = j.middleware(async ({ c, next }) => {
  const authInstance = c.get("auth");

  return await next({ auth: authInstance });
});

const adminDBMiddleware = j.middleware(async ({ c, next }) => {
  const user = c.get("user");

  if (!user) {
    throw new HTTPException(401, {
      message: "Unauthorized access. Please sign in to continue.",
    });
  }

  if (user?.role !== "admin") {
    throw new HTTPException(403, {
      message:
        "Access denied. You do not have the necessary permissions to perform this action. Please contact the administration for assistance.",
    });
  }
  const db = getDB({ ...c.env });

  return await next({ db });
});

export const publicDefaultProcedure = j.procedure;
export const publicAuthProcedure = j.procedure.use(publicAuthMiddleware);
export const publicDBProcedure = j.procedure.use(publicDBMiddleware);
export const publicResendProcedure = j.procedure.use(publicResendMiddleware);
export const adminDBProcedure = j.procedure.use(adminDBMiddleware);
evn If I didi that I cant run the admin procedures cus I don't have a session in the server
lonelyplanet
lonelyplanet•2mo ago
Your not listening. You need to PASS the cookies to your server
Tenuka
Tenuka•2mo ago
yes I understand You don't get what i'm telling you , I cant pass the cookie to the hono server
lonelyplanet
lonelyplanet•2mo ago
Why? 
import { NextRequest, NextResponse } from "next/server";
import { client } from "./lib/client";
import { cookies } from 'next/headers'; // import nextjs cookies here

export const middleware = async (req: NextRequest) => {
  const cookieString = (await cookies()).toString(); // get cookie string
  const { userSession } = await (
    await client.user.getUserSession.$get(undefined, {
      headers: {
        Cookie: cookieString,
      },
    })
  ).json();

//existing code...
}
import { NextRequest, NextResponse } from "next/server";
import { client } from "./lib/client";
import { cookies } from 'next/headers'; // import nextjs cookies here

export const middleware = async (req: NextRequest) => {
  const cookieString = (await cookies()).toString(); // get cookie string
  const { userSession } = await (
    await client.user.getUserSession.$get(undefined, {
      headers: {
        Cookie: cookieString,
      },
    })
  ).json();

//existing code...
}
why can you not do that
Tenuka
Tenuka•2mo ago
I can do that just in the middleware , you can't get the next cookies in the hono server because its hosted on different platforms
lonelyplanet
lonelyplanet•2mo ago
thats your nextjs middleware ?
Tenuka
Tenuka•2mo ago
export const authMiddleware = (): MiddlewareHandler => {
  return async (c: Context<AppContext>, next) => {
    const authContext = auth({ ...c.env });
    const userSession = await authContext.api.getSession({
      headers: c.req.raw.headers,
    });

    c.set("session", userSession?.session ?? null);
    c.set("user", userSession?.user ?? null);
    c.set("auth", authContext);

    await next();
  };
};
export const authMiddleware = (): MiddlewareHandler => {
  return async (c: Context<AppContext>, next) => {
    const authContext = auth({ ...c.env });
    const userSession = await authContext.api.getSession({
      headers: c.req.raw.headers,
    });

    c.set("session", userSession?.session ?? null);
    c.set("user", userSession?.user ?? null);
    c.set("auth", authContext);

    await next();
  };
};
I need to pass the cookies to here
lonelyplanet
lonelyplanet•2mo ago
Your hono server is fine, its the nextjs application. Edit you NEXTJS middleware
Tenuka
Tenuka•2mo ago
I don't need to edit the middleware , the problem is in better auth not getting the server
lonelyplanet
lonelyplanet•2mo ago
Can you try it maybe?
RaikuGG
RaikuGG•2mo ago
Hi @Tenuka could you solve the issue? I'm facing same problem!
RaikuGG
RaikuGG•2mo ago
I was able to get cookie header in hono. But better-auth returns null
No description

Did you find this page helpful?