如何在React应用代码中访问AWS Amplify密钥？

先澄清你遇到的误解 #

你找到的那段import { defineAuth, secret } from '@aws-amplify/backend'代码，是用于Amplify后端服务定义的（比如通过Amplify CLI构建Auth等后端资源），属于后端开发范畴，和前端的aws-amplify包完全是两回事，所以你安装前端包后找不到这个路径是正常的，不需要纠结这段代码。

两种在React前端访问密钥的方式 #

方式1：用环境变量（和process.env一致）

这是最符合你需求的方式，步骤如下：

• 打开Amplify控制台，进入你的应用 → 应用设置 → 环境变量
• 添加密钥时，变量名必须以REACT_APP_开头（React项目的强制约定，否则Create React App不会注入），比如REACT_APP_MY_API_KEY
• 本地开发时，在项目根目录创建.env.local文件，写入同样的变量：

  REACT_APP_MY_API_KEY=你的密钥内容
  

• React代码里直接调用：

  const mySecret = process.env.REACT_APP_MY_API_KEY;
  

• 推送代码后，Amplify会自动把控制台配置的环境变量注入到构建后的应用中，无需额外操作。

方式2：如果是Amplify服务自带的配置密钥

如果你配置的是Amplify内置服务（比如Auth第三方登录、Storage）的密钥，Amplify会自动生成配置文件供前端使用：

• 在控制台完成服务配置后，本地执行amplify pull拉取最新配置
• 项目根目录会生成aws-exports.js，里面包含所有服务的配置参数
• 前端代码中导入并使用：

  import awsExports from './aws-exports';
  // 比如获取Auth的第三方登录Client ID
  const googleClientId = awsExports.oauth.social.google.clientId;
  

关于Secrets Manager的说明 #

你在Amplify控制台配置的前端环境变量不会存储到Secrets Manager，只有Amplify后端服务（比如Lambda函数）配置的密钥才会存在Secrets Manager中，所以你找不到是正常的。

内容的提问来源于stack exchange，提问作者Rachel