如何在AWS Amplify Authenticator中配置Google OAuth并解决类型错误

错误核心原因 #

从报错信息能看出两个关键问题：

• oauthConfig里的responseType: 'code'被TypeScript推断为普通string类型，但Amplify的类型定义要求它必须是"code" | "token"的字面量联合类型
• 环境变量VITE_COGNITO_POOL_CLIENT_ID和VITE_USER_POOL_ID被推断为any类型，导致userPoolConfig的属性类型不匹配

具体修复方案 #

1. 固定responseType的字面量类型 #

有两种方式可以让TypeScript识别responseType的合法字面量值：

方法一：使用const断言

直接给responseType的值添加as const断言，强制TypeScript将其识别为字面量类型：

const oauthConfig = {
  domain: 'https://demo-amplify-app.auth.us-east-1.amazoncognito.com',
  scopes: ['email', 'profile', 'openid'],
  responseType: 'code' as const, // 添加const断言锁定字面量类型
  redirectSignIn: [
    'http://localhost:3000/',
  ],
  redirectSignOut: [
    'http://localhost:3000/',
  ],
};

方法二：显式导入并使用Amplify的OAuth类型

导入Amplify官方定义的OAuthConfig类型，直接给oauthConfig做类型标注：

import type { OAuthConfig } from 'aws-amplify/auth';

const oauthConfig: OAuthConfig = {
  domain: 'https://demo-amplify-app.auth.us-east-1.amazoncognito.com',
  scopes: ['email', 'profile', 'openid'],
  responseType: 'code', // 此时TypeScript会自动校验为合法的字面量值
  redirectSignIn: [
    'http://localhost:3000/',
  ],
  redirectSignOut: [
    'http://localhost:3000/',
  ],
};

2. 修复环境变量的any类型问题 #

给环境变量添加string类型断言，避免被推断为any：

const userPoolConfig = {
  userPoolClientId: (import.meta.env.VITE_COGNITO_POOL_CLIENT_ID || '') as string,
  userPoolId: (import.meta.env.VITE_USER_POOL_ID || '') as string,
};

3. 完整修复后的代码 #

import { Amplify } from 'aws-amplify';
import { Authenticator } from '@aws-amplify/ui-react';
import type { OAuthConfig } from 'aws-amplify/auth';

// 配置OAuth，使用显式类型标注
const oauthConfig: OAuthConfig = {
  domain: 'https://demo-amplify-app.auth.us-east-1.amazoncognito.com',
  scopes: ['email', 'profile', 'openid'],
  responseType: 'code',
  redirectSignIn: ['http://localhost:3000/'],
  redirectSignOut: ['http://localhost:3000/'],
};

// 修复环境变量类型
const userPoolConfig = {
  userPoolClientId: (import.meta.env.VITE_COGNITO_POOL_CLIENT_ID || '') as string,
  userPoolId: (import.meta.env.VITE_USER_POOL_ID || '') as string,
};

const awsconfig = {
  Auth: {
    Cognito: {
      ...userPoolConfig,
      loginWith: {
        oauth: oauthConfig,
      },
    },
  },
};

Amplify.configure(awsconfig);

// 组件使用
<Authenticator loginMechanisms={['email']} socialProviders={['google']}>
  {/* 应用代码 */}
</Authenticator>

额外说明 #

Amplify的TypeScript类型约束比较严格，即使配置值本身合法，只要TypeScript推断的类型不符合定义就会报错。通过显式类型标注或const断言，可以让TypeScript正确识别配置项的类型，解决类型不匹配问题。

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