How to use a custom domain of Cognito hosted UI with Amplify

Cannot support custom domain of Cognito hosted UI with Amplify

My app redirected to default URL of Cognito hosted UI when I specified custom domain in Cognito, deactivated default URL of Cognito hosted UI and call Auth.federatedSignIn() in my react app with Amplify.

Redirected to the default URL of the Cognito hosted UI

The bare minimum code to reproduce is below:

import awsconfig from "./aws-exports";
Amplify.configure(awsconfig);
Auth.federatedSignIn();

Which is a known issue

Apparently, this is a known issue that Amplify does not support custom domain for Cognito hosted UI yet.

Custom domain support with Cognito · Issue #1880 · aws-amplify/amplify-cli

Amplify seems to directly takeconfig.oauth.domain from aws-exports.js which is generated based on parameters in CloudFormation according to the current implementation in the below so that people in the above thread recommend to overwrite the property by yourself.

Source: https://github.com/aws-amplify/amplify-js/blob/00d5e1773766dad5a1c04b70e2d6d72a42268796/packages/auth/src/Auth.ts#L1821

The actual URL builder is here:

Source: https://github.com/aws-amplify/amplify-js/blob/eb9719467f7c143a26bfd2d598b3903ff0815731/packages/auth/src/OAuth/OAuth.ts#L108

A quick fix to support custom domain

As people in the issue recommended that it’s easy to overwrite the domain that redirects to the custom domain you put.

import Amplify from "aws-amplify";
import awsconfig from "./aws-exports";
// Refs: https://github.com/aws-amplify/amplify-cli/issues/1880
awsconfig.oauth.domain = "auth.example.com";
Amplify.configure(awsconfig);

Updating CloudFormation template as a proper fix?

I also tried to update amplify/auth/<id>/parameters.json and amplify/auth/<id>/<id>-cloudformation-template.yml but it failed at amplify push process. This is probably because the variable hostedUIDomainName is just a part of the domain <hostedUIDomainName>-ap-<region>.amazoncognito.com and it won’t fix the issue.