I can't fetch the data from getServerSideProps?

[alexandredev3]

Your question

I created a route in the api /api/challenge in this route I use getSession to get the user id logged in, everything works on the client-side, but when I fetch the data of the route /api/challenge in getServerSideProps it returns an error. Can I not fetch the data from getServerSideProps?

Reproduction

// /api/challenge

export default async function challenge(req: NowRequest, res: NowResponse) {
  const session = await getSession({ req });

  if (!session) {
    return res.status(401).json({
      error: "You must signin to access this route",
    });
  }

 return res.status(200).json({ ok: true });
}

export const api = axios.create({
  baseURL: `http://localhost:3000/api/`,
});

export const getServerSideProps: GetServerSideProps = async (context) => {
    const response = await api.get('/challenge');

    console.log(response);
    // Error: 401 You must signin to access this route. But the user is logged in

    return {
      props: {
        level: Number(level ?? 1),
        currentExperience: Number(currentExperience ?? 0),
        challengesCompleted: Number(challengesCompleted ?? 0),
        session: session,
      }
    }
  }

export default function Home() {
  const { data } = useSWR('/api/challenge');

  // it works
  console.log(data)

  return <h1>Hello World</h1>
}

Feedback
Documentation refers to searching through online documentation, code comments and issue history. The example project refers to next-auth-example.

• Found the documentation helpful
• Found documentation but was incomplete
• Could not find relevant documentation
• Found the example project helpful
• Did not find the example project helpful

[balazsorban44]

So there are several problems here.

You wrote /challenge, but you probably meant /api/challenge instead.

Also, you shouldn't call a Next.js API route from inside getServerSideProps, just use the logic directly! (meaning, you can use getSession directly inside getServerSideProps).

To access the session client-side, you can use the built-in useSession() hook.

Use the Provider React Context provider to share (cache) the session between useSession() calls. You can control how often you want to fetch the session from the API. Check out the options: https://next-auth.js.org/getting-started/client#options