Secure fetch data from api doubt
Unanswered
Ocicat posted this in #help-forum
OcicatOP
Hi, I am starting to develop in nextjs 13 (with app router) and I have a doubt:
I have an internal api that accesses the database to read and write data. And a "use client" page.
How can I protect the api to only accept internal requests? It occurred to me to use a process.env.API_KEY and send it when fetching and checking the api for the data.API_KEY === process.env.API_KEY.
My doubt is, is it the best alternative or is there a better one?
Is it safe to send an environment variable from a client component?
Or should you have the following structure:
CLIENT COMPONENT > SERVER COMPONENT (fetch data) > API
Or the previous one is still not safe and should I have this one:
SERVER COMPONENT (Server component (access the api and return the data to the parent server) and client component inside (receive the data from the parent component server))?
Thank you very much 😉
I have an internal api that accesses the database to read and write data. And a "use client" page.
How can I protect the api to only accept internal requests? It occurred to me to use a process.env.API_KEY and send it when fetching and checking the api for the data.API_KEY === process.env.API_KEY.
My doubt is, is it the best alternative or is there a better one?
Is it safe to send an environment variable from a client component?
Or should you have the following structure:
CLIENT COMPONENT > SERVER COMPONENT (fetch data) > API
Or the previous one is still not safe and should I have this one:
SERVER COMPONENT (Server component (access the api and return the data to the parent server) and client component inside (receive the data from the parent component server))?
Thank you very much 😉