Как использовать секретные переменные окружения на GitHub в приложении React?

Question

[Vlad999777]

В ветке main rent-car/.github/workflows
/deploy.yml я прописал переменную REACT_APP_PASSWORD, вот файл
name: Build and deploy to GitHub Pages

on:
  push:
    branches: [main]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout ️
        uses: actions/checkout@v2.3.1
        env:
          REACT_APP_PASSWORD: ${{ secrets.REACT_APP_PASSWORD }}
      - name: Install, lint, build 
        run: |
          npm install
          npm run lint:js
          npm run build
       
      - name: Deploy 
        uses: JamesIves/github-pages-deploy-action@4.1.0
        with:
          branch: gh-pages
          folder: build

Переменную определил в секреты репозитория ..на гитхабе
Вот часть файла где испоьзуется переменная

const PASSWORD = process.env.REACT_APP_PASSWORD;

const HeroSection = () => {
  const [result, setResult] = useState("");
  const { t } = useTranslation();
  const handleSubmit = async (e) => {
    e.preventDefault();
    setResult("Sending....");

    const formData = new FormData(e.target);
    formData.append("access_key", PASSWORD);

Локально все ок, а на гитхабе не видит этой переменной и все ...причина?

Answer 1

[Алексей Уколов]

У вас этот файл явно исполняется на клиенте (есть состояние и обработчик события), а на клиенте никакого process.env нет (при этом я не понимаю как может быть "локально всё ок"). А даже если бы и был, все эти телодвижения лишены смысла - вы свой секретный токен передаёте на клиент и там вставляете в данные формы, то есть он уже совсем никакой не секретный.
Что либо секретное не должно покидать сервер и, соответственно, без сервера не реализовать ничего секретного.