React provider exposes client id?

Help
1

I would like to hide my client id and client domain in my react application. From the quick start I see something like:

ReactDOM.render(
  <Auth0Provider
    domain="-- MY DOMAIN --"
    clientId="-- MY CLIENT ID --"
    redirectUri={window.location.origin}
  >
    <App />
  </Auth0Provider>,
  document.getElementById("root")
);

But it seems that using this code the client id and domain are exposed in the code. For example if I were to check this code into GitHub my client id and domain would be in public view. What are common strategies for hiding these types of secrets?
Thank you.
Kevin

3

Hi @rkevinburton,

You can see how we handle it in our react example:

We use a seperate file to store these variables, called auth_config.json.

Keep in mind, these variables will inevitably make it into the frontend and be exposed to anyone who attempts to log in to your app. They aren’t technically secret, but keeping them out of repos is something I typically do regardless.

Hope this helps!
Dan

1 Like
4

Thank you for your help. When/Where is he ‘config’ variable’ initialized? In a TypeScript environment the config variable gets a red squiggly indicating an error.

Regards,
Kevin

5

Did you import config from "./auth_config.json";? (Or whatever relative path you are using)

1 Like
6

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.