0

Tengo el archivo .env.local en la raíz del proyecto. Con la dirección a google sheets y el numero de celular para checkout a whatsapp.

API_URL=https://docs.google.com/spreadsheets/asdfadfasdf
NUMBER=1231234

Para la api de google sheets process.env funciona perfecto

export default {
  list: (): Promise<Product[]> => {
    return axios
      .get(`${process.env.API_URL}`, {
        responseType: "blob",
      })
      .then(
        (response) =>
          new Promise<Product[]>((resolve, reject) => {
            Papa.parse(response.data, {
              header: true,
              complete: (results) => {
                const products = results.data as Product[];
                return resolve(
                  products.map((product) => ({
                    ...product,
                    price: Number(product.price),
                  }))
                );
              },
              error: (error) => reject(error.message),
            });
          })
      );
  },
};

Sin embargo, al querer pasar el numero de whatsapp, no me estaría funcionando. Si hardcodeo el numero si funciona, pero no con variables de entorno.

const SendButton: React.FC<Props> = ({ text, totalPrice, totalItems }) => {
  return (
    <Flex
      alignItems="center"
      justifyContent="center"
      position="sticky"
      as={motion.div}
    >
      <Button
        isExternal
        as={Link}
        colorScheme="whatsapp"
        width="fit-content"
        href={`https://wa.me/${process.env.NUMBER}?text=${encodeURIComponent(text)}`}
        leftIcon={
          <Image src="https://icongr.am/fontawesome/whatsapp.svg?size=32&color=ffffff" alt='' />
        }
      >
        {totalItems} items ({totalPrice})
      </Button>
    </Flex>
  )
}

Sabrían por qué sucede esto? Soy nuevo y quizás me estoy pasando por alto algo

Actualización: Entiendo que necesito usar NEXT_PUBLIC para que me aparezca del lado del cliente, en este caso sí me dejaría usar el numero. Pero esto no traería problemas de seguridad? Al dejarla publica se podría exponer mi número en el código?

2
  • Creaste con el proyecto con npx create-react-app miAplicationReact ?
    – codebear22
    Commented el 17 mar. 2023 a las 19:55
  • Un problema de seguridad en este contexto seria si dejas key's en tu código base o algún dato que abra una puerta hacia tu base de datos. Ese nro de celular se supone que tiene que estar expuesto para whatsapp/
    – codebear22
    Commented el 21 mar. 2023 a las 1:39

1 respuesta 1

0

Cuando creas el proyecto con create-react-app necesitas agregar el prefijo REACT_APP sino react no lo leerá

Usalo de esta manera:

REACT_APP_API_URL=https://docs.google.com/spreadsheets/asdfadfasdf
REACT_APP_NUMBER=1231234
1
  • En realidad estoy usando Next
    – Spamm3r
    Commented el 17 mar. 2023 a las 20:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.