like-gold•2w ago

Secure API KEY at server in Next JS with Refine

How to I secure API KEY's at Next JS server when using Refine simple-rest DataProvider with an API_URL from client? I am thinking the only way this can be achieved is using the API Routes in Next JS, but not sure how to put everything together

3 Replies

kapa.ai•2w ago

Hi @livestoriz. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To secure API keys at the server in a Next.js application when using Refine's simple-rest DataProvider, you can indeed use Next.js API Routes. This approach ensures that your API keys are not exposed to the client side. Here’s how you can put everything together: 1. Create an API Route in Next.js: - First, create an API route in the pages/api directory of your Next.js project. This route will handle the requests from your Refine application and add the necessary API key before forwarding the request to the actual API.

   // pages/api/proxy.js
   export default async function handler(req, res) {
     const { method, body } = req;

     const response = await fetch('<https://api.finefoods.refine.dev',> {
       method: method,
       headers: {
         'Content-Type': 'application/json',
         'Authorization': `Bearer ${process.env.API_KEY}`, // Use your API key from environment variables
       },
       body: JSON.stringify(body),
     });

     const data = await response.json();
     res.status(response.status).json(data);
   }

   // pages/api/proxy.js
   export default async function handler(req, res) {
     const { method, body } = req;

     const response = await fetch('<https://api.finefoods.refine.dev',> {
       method: method,
       headers: {
         'Content-Type': 'application/json',
         'Authorization': `Bearer ${process.env.API_KEY}`, // Use your API key from environment variables
       },
       body: JSON.stringify(body),
     });

     const data = await response.json();
     res.status(response.status).json(data);
   }

2. Set Up Environment Variables: - Store your API key in an environment variable to keep it secure. Create a .env.local file in the root of your project and add your API key:

   API_KEY=your_api_key_here

   API_KEY=your_api_key_here

3. Use the API Route in Refine's DataProvider: - Update your Refine application to use the API route you created instead of directly calling the external API. This way, the API key is only used server-side and never exposed to the client.

   // src/App.tsx
   import { Refine } from "@pankod/refine";
   import dataProvider from "@refinedev/simple-rest";
   import routerProvider from "@refinedev/nextjs-router";

   const API_URL = "/api/proxy"; // Use the API route
function MyApp({ Component, pageProps }) {
     return (
       <Refine
         routerProvider={routerProvider}
         dataProvider={dataProvider(API_URL)}
       >
         <Component {...pageProps} />
       </Refine>
     );
   }

   export default MyApp;

   // src/App.tsx
   import { Refine } from "@pankod/refine";
   import dataProvider from "@refinedev/simple-rest";
   import routerProvider from "@refinedev/nextjs-router";

   const API_URL = "/api/proxy"; // Use the API route
function MyApp({ Component, pageProps }) {
     return (
       <Refine
         routerProvider={routerProvider}
         dataProvider={dataProvider(API_URL)}
       >
         <Component {...pageProps} />
       </Refine>
     );
   }

   export default MyApp;

By following these steps, you ensure that your API keys are securely stored on the server and not exposed to the client. The client will make requests to your Next.js API route, which will then forward the requests to the actual API with the necessary authentication headers. For more information on how to create API routes in Next.js, you can refer to the Next.js API Routes documentation (https://refine.dev/blog/next-js-api-routes/#how-to-create-api-routes-in-nextjs). For more details on using Refine with Next.js, you can check out the Refine documentation on SSR with Next.js (https://refine.dev/docs/guides-and-concepts/ssr/nextjs/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@1089040071656755280> kapa.ai is still learning and improving, please let us know how it did by reacting below

like-gold•2w ago

Based on the above solution, how do I implement a proxy API route for serving CRUD on /companies (as an example resource)? Reason is because the proxy will contain subpath for PUT /api/proxy/companies/:id where “id” is a subpath and the code above does not work with this yet