Make requests with session data

[justsharan]

Hey! I'm not sure how to do this:

I have a custom session() callback in my server-side code where I initialize NextAuth that passes in the access token, as shown here. I'm trying to use that access token in my client-side code to make a request:

import { useSession } from "next-auth/react";
import { useState } from "react";

export default () => {
  const { data } = useSession();
  const [list, setList] = useState();
  
  const updateList = async () => {
    const res = await fetch("URL", {
      headers: { Authorization: `Bearer ${data.accessToken}` }
    });
    setList(await res.json());
  }
  
  useEffect(() => updateList(), []);
  
  return <ul>{list.forEach(l => <li>{l}</li>)}</ul>;
}

Sometimes, data is undefined, so the request returns a 401 unauthorized response. So, if I check that data exists by adding a line like if (!data) return <>Loading</>;, I get an error stating: Error: Rendered more hooks than during the previous render. at the useEffect line.

How would I do this? Also, Is it possible to make this request when the user signs in and store it alongside the other session info?

[ThangHuuVu]

Hi, the error you're getting indicates that you need to handle your side effect differently. You cannot return <Loading/> early and call useEffect after; that would be a violation of The Rule of Hooks
Besides, you probably need to include data in the hook dependency array. Otherwise, the callback would only run once.

Is it possible to make this request when the user signs in and store it alongside the other session info?

You can try to use the JWT & session callbacks.