Where to store the auth_config.json file in Netlify

Hello,

When I try to deploy my site on Netlify, do I just store the variables from the Auth0 Config JSON file to the environmental variables in Netlify or is there another way to store a JSON file in Netlify?

1 Like

Welcome to our community site, @mja. :slightly_smiling_face:

I’m assuming here these are authorization/login secrets and, therefore, shouldn’t be publicly available.

The answer also depends on what the Auth0 config is being used for.

Are you using these credentials during the build process? If so, then we recommend adding these as environment variables in the Netlify UI for the site. This will keep them out of the repo and allow them to be used during the site build.

If these are needed for API calls the site will be making, with JAMStack sites, the API calls must happen from the end users browser (not from the web server hosting the website).

If this is the case, there is no way to keep them secret in the end user’s browser. However, there is a workaround using Netlify Functions and we have a different topic which covers this case here.

If there are other questions, please let us know.

I have this exact problem right now.

I can easily store env variables on Netlify but it seems like the file is being used for some other purpose in the setup here:

setupAuth( callbackRedirect).then((auth) => {
  app.use(auth).mount('#app')
})

My app doesn’t build properly without the file…

@mja were you able to solve the issue?

Hi, @veganprogrammerguy. One possible solution is to build the file before running the build command (or add those actions to the build command itself).

For example, let’s says the file needs to contain this:

{
  "domain": "YOUR_DOMAIN",
  "clientId": "YOUR_CLIENT_ID",
  "audience": "YOUR_API_IDENTIFIER"
}

However, let’s also assume don’t want to put those values into your Git repo (and no one should).

If so, you can add a bash script (which I have called make_auth_config.sh) to your repo similar to the following:

#!/bin/bash

##
## script name: make_auth_config.sh
## author: Luke F. Lawson
## license: MIT
## 
## This script creates a auth_config.json file
## at build time using environment variables.
##

## first delete any existing file

if [[ -f auth_config.json ]] ; then rm auth_config.json ; fi

## then build the file one line at a time:

echo "{" >> auth_config.json
echo "  \"domain\": \"${YOUR_DOMAIN}\"," >> auth_config.json
echo "  \"clientId\": \"${YOUR_CLIENT_ID}\"," >> auth_config.json
echo "  \"audience\": \"${YOUR_API_IDENTIFIER}\"" >> auth_config.json
echo "}" >> auth_config.json

This assumes you have set the following environment variable in the Netlify web UI:

YOUR_DOMAIN="my.domain"
YOUR_CLIENT_ID="my.client.id"
YOUR_API_IDENTIFIER="my.api.id"

If so, you could then append this to your build command like so. Assuming the original build command npm run build, the new build command would be:

./make_auth_config.sh && npm run build

If you run the command with the environment variables set as shown above, the following will be the result in the file named auth_config.json:

{
  "domain": "my.domain",
  "clientId": "my.client.id",
  "audience": "my.api.id"
}

Now, that script above could use some improvements. For example, additional validations to make sure the environment variables are actually set and exiting with an error if they are not would be a great idea. It isn’t particularly beautiful or maintainable code but it works. Please feel free to use and modify it or to write your own solution.

As far as other ways to do this, you can also add calling the script to the node build script. By this I mean, that you could instead be calling make_auth_config.sh from within node and not running it as a separate command before hand.

You could also just do this in node entirely and not use bash at all.

The generalized solution is “make the file programmatically before the build using environment variables”. There are any number of different ways to do this so whatever way makes the most sense to you will be best (as you are the one maintaining the code).

If there are other questions about this, please let us know.

1 Like

This is awesome, thank you so much, I’ll work on this!!

1 Like