Forbidden 403

benslerlast year

2

// SWR example --> Client component

  const fetcher = async (url: string) => {
    try {
      const res = await fetch(url, {
        method: 'GET',
        headers: {
          Authorization: `users API-Key ${process.env.API_KEY}`,
        },
      });
      const data = await res.json();

      return data.docs;
    } catch (err) {
      console.error(err);
    }
  };

  const { data, error, isLoading } = useSWR(
    'https://myurl.com', // my 
    fetcher
  );
  console.log(data);

  if (error) return <div>failed to load</div>;
  if (isLoading) return <div>loading...</div>;
  return <div>hello {data}!</div>;

• 

  imcorfitzlast year

  Do note that

  process.env.API_KEY

  won't work client side. Next.js only allows for environment variables prefixed

  NEXT_PUBLIC_

  to be included client-side.

  
  
  

  E.g.

  ${process.env.NEXT_PUBLIC_API_KEY}

  - however the obvious question remains: Is this secure? - Answer: no.

  
  
  

  Client side, should NEVER fetch data from an API passing persistent secure credentials. If you initialise a session on the client and pass a temporary access token, it can be argued to be more secure as the token is temporary, but the API key is not.

  
  
  

  If the data you are trying to fetch is supposed to be publicly available, you could update your access control in Payload to allow public read of your records - but if they are supposed to be securely accessed only by your service, I would advice adding an API proxy on your Next.js site.

  
  
  

  I.e. Create an API route in Next.js which you can call from your client-side without any credentials, and then execute the secure API call passing API keys from your server-side code to your CMS and return the response back to the client.

• 

  benslerlast year

  Ah i see, makes sense and it works now. Thanks a lot for the detailed explanation.