1 reply

NextAuth Session Typescript checks

My project uses : tRPC, NextJS page router, NextAuth (T3 stack), RecoilJS (state management)
In my components there is this logic that I have to write everytime to satisfy typescript, whenever I am using useSession from NextAuth

const ChatDialogs = ({ chatId }: { chatId: string }) => {
  const [allChatMessages, setAllChatMessages] =
    useRecoilState(chatRoomMessages);
  let chatMessages: TChatMessage[] = [];

  const router = useRouter();
  const { data: currentUserSession } = useSession();   //<---

  if (!currentUserSession) { // <----
    router.push("/");
    return <></>;
  }
...rest of the code

const ChatDialogs = ({ chatId }: { chatId: string }) => {
  const [allChatMessages, setAllChatMessages] =
    useRecoilState(chatRoomMessages);
  let chatMessages: TChatMessage[] = [];

  const router = useRouter();
  const { data: currentUserSession } = useSession();   //<---

  if (!currentUserSession) { // <----
    router.push("/");
    return <></>;
  }
...rest of the code

I was wondering if there was something I could do so that I dont have to do this without forcing the type in.
An idea I had was using a getServerSideProp on my home page and there I can check for user session and then passing the component session data where it will be of type Session only, and then passing it to the required prop. But then it will lead to prop drilling and I dont want that. Though I am using a state management library RecoilJS. I cant think of the best way.

Can I get some recommendations of what you guys like to do in cases like this?

TTC

Theo's Typesafe Cult•2y ago•

1 reply

Hampterultimate

NextAuth Session Typescript checks

const ChatDialogs = ({ chatId }: { chatId: string }) => {
  const [allChatMessages, setAllChatMessages] =
    useRecoilState(chatRoomMessages);
  let chatMessages: TChatMessage[] = [];

  const router = useRouter();
  const { data: currentUserSession } = useSession();   //<---

  if (!currentUserSession) { // <----
    router.push("/");
    return <></>;
  }
...rest of the code

const ChatDialogs = ({ chatId }: { chatId: string }) => {
  const [allChatMessages, setAllChatMessages] =
    useRecoilState(chatRoomMessages);
  let chatMessages: TChatMessage[] = [];

  const router = useRouter();
  const { data: currentUserSession } = useSession();   //<---

  if (!currentUserSession) { // <----
    router.push("/");
    return <></>;
  }
...rest of the code

NextAuth Session Typescript checks

Similar Threads

NextAuth Session Typescript checks

Similar Threads

Similar Threads

Similar Threads