How to PUT fetch Authorization on .env.local With NEXT.js

Question

`export default function reservations() {
  let [reservationStock, setReservationStock] = useState([]);

  useEffect(() => {
    fetch(url, {
      headers: new Headers({
        Authorization:
          "MyBasic Credentials",
          "Content-Type": "application/json",
      }),
    })
      .then((response) => response.json())
      .then((result) => setReservationStock(result));
  }, []);

My .env.local

LE_AUTH=MyBasic Credentials

I try different ways but none works.

Does anyone know how the right way?

Do not expose credentials

thanhyou00 · Accepted Answer · 2022-11-03T06:15:09.443

0

You can use .env with prefix NEXT_PUBLIC as below :

  fetch(url, {
  headers: new Headers({
    Authorization:
      process.env.NEXT_PUBLIC_LE_AUTH,
      "Content-Type": "application/json",
  }),
  })

edited Nov 03 '22 at 06:15

answered Nov 03 '22 at 04:50

thanhyou00

31
4

1

This won't work. OP is trying to access the `env` variable client-side so it needs to be exposed to the browser with `NEXT_PUBLIC` prefix. – ivanatias Nov 03 '22 at 05:09
thanks man! works! – jonas zeferino Nov 03 '22 at 12:26

How to PUT fetch Authorization on .env.local With NEXT.js

1 Answers1