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.

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

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:

npx ampx sandbox secret set foo
? Enter secret value: ###
Done!

> npx ampx sandbox secret set bar
? Enter secret value: ###
Done!

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

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.

Local environment

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

npx ampx 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).

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 (in this example, you will name it REACT_APP_TEST_VARIABLE)

2. Next, navigate to the Build Settings in console (or to the amplify.yml file) and update the build settings to pipe the environment variable into a file. Here is an example of writing it into an .env file:

1build:
2  commands:
3    - echo "REACT_APP_TEST_VARIABLE=$REACT_APP_TEST_VARIABLE" >> .env
Copy  highlighted code example
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.