One of the common issues when deploying a React project with firebase-admin is that a secret environment variable with a newline (\n) character will cause a build error.

Assume that the text below is a simplified version of your firebase-admin private key.

-----BEGIN PRIVATE KEY-----
abcde
fghij
klmno
pqrs=
-----END PRIVATE KEY-----

In a .env file, this would be represented as:

MY_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\nabcde\nfghij\nklmno\npqrs=\n-----END PRIVATE KEY-----\n"

What happens when you add a secret environment variable containing your private key value - "-----BEGIN PRIVATE KEY-----\nabcde\nfghij\nklmno\npqrs=\n-----END PRIVATE KEY-----\n" and redeploy?

image

Unfortunately, setting an environment variable containing newline characters (\n) in Vercel will throw an error while building.

FirebaseAppError: Failed to parse private key: Error: Invalid PEM formatted message.

build-error

Easy fix

Replace the newline characters with line breaks. Although you can do this manually, using find & replace in a code editor will be much easier.

  • Paste your private key value to a new tab in VS Code.
  • Then, run a find & replace.
  • Enable regular expressions.
  • Replace \\n with \n.

Before replace: image

After replace: image

Copy & paste the replaced version to Vercel.

image

Vercel should now successfully build your project.