Fetch secured API routes from outside of my app

[gielcobben]

Question 💬

Hi 👋 , I configured NextAuth and use the Google Provider to sign in. Everything works perfectly I was just wondering if it is possible to call an API route externally with Authorization through a Bearer Token or something like it. I would love to make secure calls from outside of the app (with fetch). Below is an example of a secured API route:

How to reproduce ☕️

/api/properties:

export default async function handle(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const {
    query: { published },
    method,
    body,
  } = req;
  const session = await getSession({ req });

  if (!session) {
    res.status(403).json({ message: "Access Denied" });
  }

  switch (method) {
    case "GET":
      const properties = await getAllProperties({
        published: published === "true",
      });
      res.status(200).json(properties);
      break;

    case "POST":
      const property = await createProperty({
        ...JSON.parse(body),
        user: session.user.email,
      });
      res.status(200).json(property);
      break;

    default:
      res.setHeader("Allow", ["GET", "POST"]);
      res.status(405).end(`Method ${method} Not Allowed`);
  }
}

External fetch:

  const response = await fetch(`/api/properties`, {
    method: "GET",
    headers: { Authorization: "bearer " + getToken() }
  });
  const data = await response.json();

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[ThangHuuVu]

Does the outside of your app mean a different origin? Doing so would be a violation of the same-origin policy, which is kind of outside the scope for NextAuth.js.

[sumansid]

One possible solution around that is to fetch the domain/api/auth/session endpoint.

Replace :
const session = await getSession({ req });

With :

const session = await fetch("<domain>/api/auth/session", {mode: 'cors'})