I have setup AWS Authenticator and got it to work as shown in the code below. This setup is working for our frontend built in React.

const awsconfig = {
  Auth: {
    Cognito: {
      userPoolClientId: import.meta.env.VITE_COGNITO_POOL_CLIENT_ID,
      userPoolId: import.meta.env.VITE_USER_POOL_ID,
    },
  },
};

Amplify.configure(awsconfig);
<Authenticator loginMechanisms={['email']}>
  // Code for the app
</Authenticator>

I would now like to add Google OAuth to this and have consulted the official documentation to do so (https://docs.amplify.aws/gen1/javascript/build-a-backend/auth/add-social-provider/). So far my setup is as follows:

// Define oauthConfig with required properties
const 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/',
  ],
};

// Define userPoolConfig with user pool details
const userPoolConfig = {
  userPoolClientId: import.meta.env.VITE_COGNITO_POOL_CLIENT_ID || '',
  userPoolId: import.meta.env.VITE_USER_POOL_ID || '',
};

// Construct the awsconfig object with correct structure
const awsconfig = {
  Auth: {
    Cognito: {
      ...userPoolConfig,
      loginWith: {
        oauth: oauthConfig,
      },
    },
  },
};

Amplify.configure(awsconfig);
    <Authenticator loginMechanisms={['email']} socialProviders={['google']}>
      // Code for the app
    </Authenticator>

This seems to be the exact setup that the official docs state however I’m running into the error:

Argument of type '{ Auth: { Cognito: { loginWith: { oauth: { domain: string; scopes: string[]; responseType: string; redirectSignIn: string[]; redirectSignOut: string[]; }; }; userPoolClientId: any; userPoolId: any; }; }; }' is not assignable to parameter of type 'ResourcesConfig | LegacyConfig | AmplifyOutputs'.
  Type '{ Auth: { Cognito: { loginWith: { oauth: { domain: string; scopes: string[]; responseType: string; redirectSignIn: string[]; redirectSignOut: string[]; }; }; userPoolClientId: any; userPoolId: any; }; }; }' is not assignable to type 'ResourcesConfig'.
    Types of property 'Auth' are incompatible.
      Type '{ Cognito: { loginWith: { oauth: { domain: string; scopes: string[]; responseType: string; redirectSignIn: string[]; redirectSignOut: string[]; }; }; userPoolClientId: any; userPoolId: any; }; }' is not assignable to type 'AuthConfig | undefined'.
        Type '{ Cognito: { loginWith: { oauth: { domain: string; scopes: string[]; responseType: string; redirectSignIn: string[]; redirectSignOut: string[]; }; }; userPoolClientId: any; userPoolId: any; }; }' is not assignable to type 'Partial<AuthUserPoolAndIdentityPoolConfig & Partial<Record<never, never>>> & Pick<AuthUserPoolAndIdentityPoolConfig & Partial<...>, "Cognito">'. Type '{ Cognito: { loginWith: { oauth: { domain: string; scopes: string[]; responseType: string; redirectSignIn: string[]; redirectSignOut: string[]; }; }; userPoolClientId: any; userPoolId: any; }; }' is not assignable to type 'Partial<AuthUserPoolAndIdentityPoolConfig & Partial<Record<never, never>>>'.
            Types of property 'Cognito' are incompatible.
              Type '{ loginWith: { oauth: { domain: string; scopes: string[]; responseType: string; redirectSignIn: string[]; redirectSignOut: string[]; }; }; userPoolClientId: any; userPoolId: any; }' is not assignable to type 'CognitoUserPoolAndIdentityPoolConfig'.
                Type '{ loginWith: { oauth: { domain: string; scopes: string[]; responseType: string; redirectSignIn: string[]; redirectSignOut: string[]; }; }; userPoolClientId: any; userPoolId: any; }' is not assignable to type 'CognitoUserPoolConfig'.
                  The types of 'loginWith.oauth.responseType' are incompatible between these types.
                    Type 'string' is not assignable to type '"code" | "token"'.ts(2345)

I’m unsure how I can resolve this error. It seems according to the docs I’m using the correct type but perhaps I’m missing something. I’ve tried some other attempts and similarly get type errors when I try to run it. With that said, any assistance on this would be extremely appreciated! I’m not sure what the correct type should be to allow for the Google OAuth.