saM69420 Comments - Answer Overflow

saM69420

Explore posts from servers

•Created by saM69420 on 1/16/2024 in #💻┃support

Kinde + Bun + Hono + React

Thanks @leo_kinde I've updated the cookie options. It doesn't work with Strict, so I set it to Lax. I guess that's because of the way the callback redirect works upon successful sign in.

export const sessionManager = (c: Context): SessionManager => ({
  async setSessionItem(key: string, value: unknown) {
    const cookieOptions = {
      httpOnly: true,
      secure: true,
      sameSite: "Lax",
    } as const;
    if (typeof value === "string") {
      setCookie(c, key, value, cookieOptions);
    } else {
      setCookie(c, key, JSON.stringify(value), cookieOptions);
    }
  },
  // ...
});

export const sessionManager = (c: Context): SessionManager => ({
  async setSessionItem(key: string, value: unknown) {
    const cookieOptions = {
      httpOnly: true,
      secure: true,
      sameSite: "Lax",
    } as const;
    if (typeof value === "string") {
      setCookie(c, key, value, cookieOptions);
    } else {
      setCookie(c, key, JSON.stringify(value), cookieOptions);
    }
  },
  // ...
});

Then client side, my react app is using react query to grab the user details from the server and keeps them i'm memory for Infinity which works since logout and login require complete redirects anyway.

import api from "@/lib/api";
import { queryOptions } from "@tanstack/react-query";

async function authenticatedUser() {
  const res = await api.me.$get();
  if (!res.ok) {
    throw new Error("Network response was not ok");
  }
  const data = await res.json();
  return data.user;
}

export const userQueryOptions = queryOptions({
  queryKey: ["user-me"],
  queryFn: () => authenticatedUser(),
  staleTime: Infinity,
});

import api from "@/lib/api";
import { queryOptions } from "@tanstack/react-query";

async function authenticatedUser() {
  const res = await api.me.$get();
  if (!res.ok) {
    throw new Error("Network response was not ok");
  }
  const data = await res.json();
  return data.user;
}

export const userQueryOptions = queryOptions({
  queryKey: ["user-me"],
  queryFn: () => authenticatedUser(),
  staleTime: Infinity,
});

Then any component can get the user's details by performing the query that's already been cached.

import { Button } from "@/components/ui/button";

import { userQueryOptions } from "@/lib/user-query";
import { useQuery } from "@tanstack/react-query";

export default function ProfilePage() {

  const {data: user} = useQuery(userQueryOptions);

  return (
    <div className="flex flex-col gap-y-4 items-center">
      <h1 className="text-4xl font-bold">Hi {user?.given_name}</h1>
      <div className="text-2xl font-bold">{user?.email}</div>
      <Button asChild>
        <a href="/logout">Logout</a>
      </Button>
    </div>
  );
}

import { Button } from "@/components/ui/button";

import { userQueryOptions } from "@/lib/user-query";
import { useQuery } from "@tanstack/react-query";

export default function ProfilePage() {

  const {data: user} = useQuery(userQueryOptions);

  return (
    <div className="flex flex-col gap-y-4 items-center">
      <h1 className="text-4xl font-bold">Hi {user?.given_name}</h1>
      <div className="text-2xl font-bold">{user?.email}</div>
      <Button asChild>
        <a href="/logout">Logout</a>
      </Button>
    </div>
  );
}

So no extra context providers and no client side processing of the tokens. I would love any suggestions if there's room for improvement with any of this. Im trying to keep it as simple and robust as possible while only using the Kinde typescript SDK on the backend.

10 replies

Gaming

Programming