<p>I've tried to avoid, but really haven't had the need, to set specific env vars for a React FE. But I'm working on social authentication, with Azure AD specifically, and now I do have a use case for it.</p>
<p>I acknowledge the <code>AAD_TENANT_ID</code> and <code>AAD_CLIENT_ID</code> aren't exactly &quot;secret&quot; or sensitive information and will be compiled in the JS, but I'm trying to do this for a few reasons:</p>
<ol>
<li>I can more easily manage dev and prod keys from a Key Vault...</li>
<li>Having environment independent code (i.e., <code>process.env.AAD_TENANT_ID</code> will work whether it is dev or prod).</li>
</ol>
<p>But it doesn't work.</p>
<p>The issue I'm running into is that the env vars are not accessible at <code>process.env</code> despite having the following:</p>
<pre><code>apiVersion: apps/v1
kind: Deployment
metadata:
  name: admin-v2-deployment-dev
  namespace: dev
spec:
  replicas: 1
  revisionHistoryLimit: 5
  selector:
    matchLabels:
      component: admin-v2
  template:
    metadata:
      labels:
        component: admin-v2
    spec:
      containers:
        - name: admin-v2
          image: admin-v2
          ports:
            - containerPort: 4001
          env:
            - name: AAD_CLIENT_ID
              valueFrom:
                secretKeyRef:
                  name: app-dev-secrets
                  key: AAD_CLIENT_ID
            - name: AAD_TENANT_ID
              valueFrom:
                secretKeyRef:
                  name: app-dev-secrets
                  key: AAD_TENANT_ID
---
apiVersion: v1
kind: Service
metadata:
  name: admin-v2-cluster-ip-service-dev
  namespace: dev
spec:
  type: ClusterIP
  selector:
    component: admin-v2
  ports:
    - port: 4001
      targetPort: 4001
</code></pre>
<p>When I do the following anywhere in the code, it comes back <code>undefined</code>:</p>
<pre><code>console.log(process.env.AAD_CLIENT_ID);
console.log(process.env.AAD_TENANT_ID);
</code></pre>
<p>The values are definitely there when I check secrets in the namespace and in the Pod itself:</p>
<pre><code>    Environment:
      AAD_CLIENT_ID:  &lt;set to the key 'AAD_CLIENT_ID' in secret 'app-dev-secrets'&gt;  Optional: false
      AAD_TENANT_ID:  &lt;set to the key 'AAD_TENANT_ID' in secret 'app-dev-secrets'&gt;  Optional: false
</code></pre>
<p>So how should one go about getting kubectl secrets into React Pods?</p>

<p>I am guessing you are using <strong>create-react-app</strong> app for React FE. You have to make sure that your environment variables starts with <code>REACT_APP_</code> else it will be ignored inside app.
According to create-react-app documentation</p>
<pre><code>Note: You must create custom environment variables beginning with REACT_APP_.
Any other variables except NODE_ENV will be ignored to avoid accidentally 
exposing a private key on the machine that could have the same name. 
</code></pre>
<p>Source - <a href="https://create-react-app.dev/docs/adding-custom-environment-variables/" rel="nofollow noreferrer">https://create-react-app.dev/docs/adding-custom-environment-variables/</a></p>
