How do we configure a Cognito domain in Amplify Gen2 within the auth/resources.ts file?

Currently, Amplify Gen 2 does not provide direct support for configuring a Cognito domain within the auth/resources.ts file. The error you're encountering is because the 'identityProviders' property is not recognized in the current configuration options for Amplify Gen 2 auth.

In Amplify Gen 2, the auth configuration is more streamlined and focuses on core authentication features. The ability to configure a custom Cognito domain is not yet available as a built-in option in the auth/resources.ts file.

As an alternative approach, you have a couple of options:

1. Use AWS CDK: Since Amplify Gen 2 is built on top of the AWS CDK, you can extend your Amplify configuration by adding custom CDK constructs. You could potentially add the Cognito domain configuration using CDK in your amplify/backend.ts file.

Sample:

import { defineBackend } from '@aws-amplify/backend';
import { auth } from './auth/resource';
import { data } from './data/resource';


/**
 * @see https://docs.amplify.aws/react/build-a-backend/ to add storage, functions, and more
 */

const backend = defineBackend({
  auth,
  data,
})

const cfnDomain = backend.auth.resources.userPool

cfnDomain.addDomain('envtest', {
  cognitoDomain: {
    domainPrefix: `envtest-dev`
  }
})

2. Configure manually: After deploying your Amplify Gen 2 backend, you can manually configure the Cognito domain through the AWS Console or using the AWS CLI.

3. Wait for feature support: The Amplify team is continuously working on improving Gen 2, and support for more advanced Cognito configurations may be added in future updates.

For now, if you need the custom Cognito domain functionality, you might need to stick with Amplify Gen 1 where this feature is supported through the CLI. Alternatively, you can deploy your Gen 2 backend and then manually configure the Cognito domain as needed.

Remember to keep an eye on the Amplify documentation and release notes for any updates regarding this feature in Gen 2.
Sources
How can I add all three alias attributes in AWS Cognito while setting up Amplify Gen2 Auth? | AWS re:Post
Fullstack TypeScript: Reintroducing AWS Amplify | Front-End Web & Mobile

Hi,

You are trying to solve this server-side, but it can easily be solved on the client. To tell your client how to talk to the aws backend you already do:

import outputs from "<path>/amplify_outputs.json"
Amplify.configure(outputs)

This outputs object contains all configuration your client needs use the backend. At outputs.auth.oauth.domain you will find the cognito domain. This is the default domain provided by cognito, it is not the custom domain you have setup. Unfortunately Amplify Gen 2 does not change this for you if you create a custom domain. Meaning the social login forms will contain the not-so-friendly cognito url instead of the url you setup in the custom domain. But you can replace outputs.auth.oauth.domain to the custom-domain url before you do Amplify.configure()

This is how I solved it:

import outputs from "<path>/amplify_outputs.json"

  // set custom cognito domain based on app client id in the cognito user pool 
  let cognitoDomain = outputs.auth.oauth.domain  // default domain from amplify outputs, so a sandbox backend will show the cognito domain (with not-so-friendly url but still working)
  if (outputs.auth.user_pool_client_id === '<app-client-id-test-user-pool>') { cognitoDomain = 'auth-test.your-app.com' } 
  if (outputs.auth.user_pool_client_id === '<app-client-id-prod-user-pool>') { cognitoDomain = 'auth.your-app.com' } 
  // initialize amplify and overwrite the cognito domain with the custom domain that was set up in aws cognito console 
  // with this you see the your-app urls instead of the aws cognito urls in the login screens (google, facebook, etc)
  Amplify.configure({
    ...outputs,
    auth: {
      ...outputs.auth,
      oauth: {
        ...outputs.auth.oauth,
        domain: cognitoDomain
      }
    }
  })

Now the cognito custom domain will be used on your client.

Note : This is the solution for a webapp, that is javascript/typescript. I assume a similar solution will be possible with other client languages