How to work with Auth0 (React)?

Support
, ,
1

my site: gemsim.net

I have set up a tenant in Auth0 dashboard, installed Netlify Auth0 extension and created environment variables (AUTH0_CLIENT_ID, GEM_SIM_AUTH0_DOMAIN) in Netlify console. I also added these env var to .env for local dev.

I wrapped my app (main.tsx) with Auth0Provider as described in this doc:

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <Auth0Provider
      clientId={import.meta.env.AUTH0_CLIENT_ID}
      domain={import.meta.env.GEM_SIM_AUTH0_DOMAIN}
      authorizationParams={{
          redirect_uri: window.location.origin
      }}
    >
      <BrowserRouter>
        <Routes>
        <Route path="/" element={<App />} />
        <Route path="/playground" element={<Playground />} />
        </Routes>
      </BrowserRouter>
    </Auth0Provider>
  </StrictMode>,
)

When run netlify dev, I see those env var were injected:

◈ Injected site settings env var: AUTH0_AUDIENCE
◈ Ignored site settings env var: AUTH0_CLIENT_ID (defined in .env file)
◈ Injected .env file env var: AUTH0_CLIENT_ID
◈ Injected site settings env var: AUTH0_ISSUER_BASE_URL
◈ Injected site settings env var: GEM_SIM_AUTH0_CLIENT_ID
◈ Ignored site settings env var: GEM_SIM_AUTH0_DOMAIN (defined in .env file)
◈ Injected .env file env var: GEM_SIM_AUTH0_DOMAIN
...

However, user login failed, and the env vars were not defined when used in the code, e.g., request URL:
https://undefined/authorize?scope=openid+profile+email&redirect_uri=…

Adding REACT_APP_ prefix to the env var name didn’t help.

If I define the Auth0 client ID and domain directly in my code without using env var, it works. However, it failed to build in deploy:

12:38:33 PM: Secret env var "AUTH0_CLIENT_ID"'s value detected:
  found value at line 24236 in dist/assets/index-BUI79PF1.js
12:38:33 PM:   found value at line 10 in src/main.tsx
12:38:33 PM: Secret env var "GEM_SIM_AUTH0_DOMAIN"'s value detected:
  found value at line 24236 in dist/assets/index-BUI79PF1.js
12:38:33 PM:   found value at line 9 in src/main.tsx
12:38:33 PM: ​
12:38:33 PM: To prevent exposing secrets, the build will fail until these secret values are not found in build output or repo files.

How to use the env var for Auto0 secrets so it works in local dev and also for deploy?

2

ok, for local dev, I found that I need to prefix with VITE_ as I used vite to create the project. I’ve updated my frontend code as:

const AUTH0_CLIENT_ID = import.meta.env.DEV ? import.meta.env.VITE_AUTH0_CLIENT_ID : process.env.REACT_APP_AUTH0_CLIENT_ID;
const AUTH0_DOMAIN = import.meta.env.DEV ? import.meta.env.VITE_GEM_SIM_AUTH0_DOMAIN : process.env.REACT_APP_GEM_SIM_AUTH0_DOMAIN;

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <Auth0Provider
      clientId={AUTH0_CLIENT_ID}
      domain={AUTH0_DOMAIN}
      authorizationParams={{
          redirect_uri: window.location.origin
      }}
    >
...

it works in dev now, but failed in deploy preview, due to the env var is undefined.

I’ve tried prefix VITE_ and REACT_APP_ for prod, neither works