kubectl secrets not accessible in React app Pods

3/21/2021

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.

I acknowledge the AAD_TENANT_ID and AAD_CLIENT_ID aren't exactly "secret" or sensitive information and will be compiled in the JS, but I'm trying to do this for a few reasons:

  1. I can more easily manage dev and prod keys from a Key Vault...
  2. Having environment independent code (i.e., process.env.AAD_TENANT_ID will work whether it is dev or prod).

But it doesn't work.

The issue I'm running into is that the env vars are not accessible at process.env despite having the following:

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

When I do the following anywhere in the code, it comes back undefined:

console.log(process.env.AAD_CLIENT_ID);
console.log(process.env.AAD_TENANT_ID);

The values are definitely there when I check secrets in the namespace and in the Pod itself:

    Environment:
      AAD_CLIENT_ID:  <set to the key 'AAD_CLIENT_ID' in secret 'app-dev-secrets'>  Optional: false
      AAD_TENANT_ID:  <set to the key 'AAD_TENANT_ID' in secret 'app-dev-secrets'>  Optional: false

So how should one go about getting kubectl secrets into React Pods?

-- cjones
environment-variables
kubernetes
reactjs

1 Answer

3/22/2021

I am guessing you are using create-react-app app for React FE. You have to make sure that your environment variables starts with REACT_APP_ else it will be ignored inside app. According to create-react-app documentation

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. 

Source - https://create-react-app.dev/docs/adding-custom-environment-variables/

-- vishalsaugat
Source: StackOverflow