Page updated Mar 26, 2024

Secrets and environment vars

Amplify Gen 2 offers centralized management of secrets and environment variables for all fullstack branches. Secrets allow you to securely configure environment-specific values like social sign-in keys, function environment variables, function secrets, and other sensitive data needed by your application across environments.

FAQ
How is this different from Amplify Gen 1?

In Amplify Gen 1, you need to define environment variables and secrets using the CLI and store keys in both AWS Parameter Store and a local team-provider.json file. We have streamlined this workflow in Amplify Gen 2 by centralizing the management of secrets and environment variables in the Amplify console.

Set secrets

You can set secrets for your fullstack branch deployments or your local dev server.

Branch environment

You can add secrets for branch deployments in the Amplify console. From the App home page, navigate to Hosting > Secrets, and then choose the Manage secrets button. You can add a secret key or value that applies to all deployed branches or just specific branches.

Secrets are stored in AWS Systems Manager Parameter Store under the following naming conventions:

  • Secrets that apply to all branches: /amplify/shared/<app-id>/<secret-key>
  • Secrets that apply to a specific branch: /amplify/<app-id>/<branchname>/<secret-key>

Local environment

Secrets set in a sandbox do not show up in the Amplify console. You can view them in the AWS Parameter Store console.

When testing features locally, you might want to test with real secrets. You can add secrets while running the cloud sandbox with the following command:

1npx amplify sandbox secret set foo
2? Enter secret value: ###
3Done!
4
5> npx amplify sandbox secret set bar
6? Enter secret value: ###
7Done!

Access secrets

Once you have set a secret, you can access the values in code by calling the secret() function. The following example shows how to set up social sign-in with authentication in your app. Depending on your environment, Amplify will automatically load the correct secret value with no extra configuration.

1import { defineAuth, secret } from '@aws-amplify/backend';
2
3export const auth = defineAuth({
4 loginWith: {
5 email: true,
6 externalProviders: {
7 facebook: {
8 clientId: secret('foo'),
9 clientSecret: secret('bar')
10 }
11 }
12 }
13});

Remove secrets

When deleting branch environments or sandbox environments, you need to manually delete the secrets as well.

Branch environment

Secrets that are used in branch deployments can be managed directly in the Amplify console. You can remove them under Secret management by choosing Remove.

Removing application secrets in Secret management section of Amplify console.

Local environment

To remove a secret in your local environment, run the following command in your terminal:

1npx amplify sandbox secret remove foo

Set environment variables

Environment variables work like key-value pairs to help manage configurable settings across different deployment environments, including development, staging, and production. Unlike secrets, which store sensitive data, environment variables are typically nonconfidential and are used for controlling application behavior in different environments. Another key difference is that environment variables are stored and managed by the Amplify managed service. You can set environment variables in the Amplify console (view the AWS Amplify Hosting User Guide for detailed instructions).

Variable, value, and branch fields in the Environment Variables section of the Amplify console.

Access environment variables

You can enable access to environment variables for your fullstack branch deployments or your local dev server.

Branch environment

You can manage your branch environment access through the Amplify console.

  1. First, create an environment variable in the Amplify console and name it REACT_APP_TEST_VARIABLE.

  2. Next, navigate to the build settings (amplify.yml) and update the build settings to pipe the environment variable into an .env file. For example:

amplify.yml
1build:
2 commands:
3 - echo "REACT_APP_TEST_VARIABLE=$REACT_APP_TEST_VARIABLE" >> .env
4 - npm run build

Now the .env can access the environment variable through process.env in your client code:

1console.log('REACT_APP_TEST_VARIABLE', process.env.REACT_APP_TEST_VARIABLE);

Local environment

The same workflow applies when you're working on your local machine. First, add the environment variable in your .env.local file, and then reference the environment variable with process.env.