skylerdj Comments

skylerdj

•Created by Sica / Ben on 3/24/2025 in #❓-help

Auth Headers in Singleton Pattern

// use this to access the auth token outside of your react app
let authToken = undefined;
const getAuthToken = () => authToken;

// CALL THIS ONCE IN YOUR APP SOMEWHERE
export const useSyncAuthTokenAtom = () => {
  // get the user from your auth provider
  const user = useAuth();
  
  useEffect(() => {
    authToken = user.access_token
  },[user.access_to])
}

// use this to access the auth token outside of your react app
let authToken = undefined;
const getAuthToken = () => authToken;

// CALL THIS ONCE IN YOUR APP SOMEWHERE
export const useSyncAuthTokenAtom = () => {
  // get the user from your auth provider
  const user = useAuth();
  
  useEffect(() => {
    authToken = user.access_token
  },[user.access_to])
}

then in the trpc singleton you can just the authToken directly

import { getAuthToken } from "@src/utils/token"

headers: () => {
  return {
    "Authorization": `Bearer ${getAuthToken}`
  }
}

import { getAuthToken } from "@src/utils/token"

headers: () => {
  return {
    "Authorization": `Bearer ${getAuthToken}`
  }
}

10 replies

TtRPC

•Created by Sica / Ben on 3/24/2025 in #❓-help

Auth Headers in Singleton Pattern

There's also a simplified version of this if you don't care about using a single source of truth and don't already have jotai in your app and don't want to add it, using regular js, but i recommend the first approach

10 replies

TtRPC

•Created by Sica / Ben on 3/24/2025 in #❓-help

Auth Headers in Singleton Pattern

Since you're using a SPA with something like vite, you can use something like jotai so you can access the token from both inside and outside of react doing something like this: 1. first create the token atom

import { getDefaultStore } from "jotai";

// if you're using a JotaiProvider in your app, you need to pass the store to the provider using createStore instead, otherwise this is fine
const jotaiStore = getDefaultStore();

const authTokenAtom = atom<string|undefined>(undefined);

/** Used to get and set the auth token outside of the react tree */
export const getAuthToken = () => jotaiStore.get(authTokenAtom);
export const setAuthToken = (token:string) => jotaiStore.set(authTokenAtom, token);

// optional since you already have a hook to use from your own auth provider, but it helps having a single source of truth in your app
/** Used to get the auth token inside of the react tree to listen to changes and trigger re-renders */
export const useAuthToken = () => useAtom(authTokenAtom);
export const useSetAuthToken = () => useSetAtom(authTokenAtom);

import { getDefaultStore } from "jotai";

// if you're using a JotaiProvider in your app, you need to pass the store to the provider using createStore instead, otherwise this is fine
const jotaiStore = getDefaultStore();

const authTokenAtom = atom<string|undefined>(undefined);

/** Used to get and set the auth token outside of the react tree */
export const getAuthToken = () => jotaiStore.get(authTokenAtom);
export const setAuthToken = (token:string) => jotaiStore.set(authTokenAtom, token);

// optional since you already have a hook to use from your own auth provider, but it helps having a single source of truth in your app
/** Used to get the auth token inside of the react tree to listen to changes and trigger re-renders */
export const useAuthToken = () => useAtom(authTokenAtom);
export const useSetAuthToken = () => useSetAtom(authTokenAtom);

2. then sync the token atom with your hook

// CALL THIS ONCE IN YOUR APP SOMEWHERE
export const useSyncAuthTokenAtom = () => {
  // get the user from your auth provider
  const user = useAuth();
  const setAuthToken = useSetAuthToken();
  
  useEffect(() => {
    setAuthToken(user.access_token)
  },[setAuthTokem, user.access_to])
}

// CALL THIS ONCE IN YOUR APP SOMEWHERE
export const useSyncAuthTokenAtom = () => {
  // get the user from your auth provider
  const user = useAuth();
  const setAuthToken = useSetAuthToken();
  
  useEffect(() => {
    setAuthToken(user.access_token)
  },[setAuthTokem, user.access_to])
}

3. Then in your react app you can use either the useAuthToken to use the atom as a single source of truth or just keep using your provider hook 4. For outside of react like trpc or api calls, you can just call the getAuthToken function which will retreive the value from the atom

import {getAuthToken} from "@src/utils/token"

headers: () => {
  return {
    "Authorization": `Bearer ${getAuthToken}`
  }
}

import {getAuthToken} from "@src/utils/token"

headers: () => {
  return {
    "Authorization": `Bearer ${getAuthToken}`
  }
}

10 replies

TtRPC

•Created by skylerdj on 3/3/2025 in #❓-help

Can i use a single trpc proxy client in NextJS 12?

I checked your code and yeah we create a query client once in _app.page.tsx. Thank you for your reply 🙏

3 replies

TtRPC

•Created by skylerdj on 11/4/2024 in #❓-help

Calling Express `request.send` inside tRPC middleware/procedures

@Alex / KATT 🐱: You can pass a fake res-object to await runJWTValidations(req, res) Example that probably needs some modification:

const mockRes = {
  // replace the method here
  status: () => mockRes,
  write: () => mockRes,
  send: () => mockRes,
  end: () => { },
} satisfies Partial<trpcExpress.CreateExpressContextOptions['res']>

await runJWTValidations(req, mockRes as trpcExpress.CreateExpressContextOptions['res']);

const mockRes = {
  // replace the method here
  status: () => mockRes,
  write: () => mockRes,
  send: () => mockRes,
  end: () => { },
} satisfies Partial<trpcExpress.CreateExpressContextOptions['res']>

await runJWTValidations(req, mockRes as trpcExpress.CreateExpressContextOptions['res']);

3 replies