Custom domain support with Cognito

[venkatesh-kadiyala]

Describe the bug
We configured custom domain for cognito hosted UI and when user tries to login it calls both cognito domain (ending up with invalid_grant error) and to custom domain (success response) and sometimes it fails for both of them. When I run "amplify status" it gives Hosted UI endpoints with cognito domain. I tried to update the domain name using "amplify update auth" and it doesn't allow me to update custom domain name. I tried to override auth configurations in my App.js file with custom domain but somehow it still calls both cognito domain and custom domain.

**Screenshots

**

You can turn on the debug mode to provide more info for us by setting window.LOG_LEVEL = 'DEBUG'; in your app.

[kaustavghosh06]

@venkatesh-kadiyala CLI doesn't have custom domain support as of yet. How did you update your user-pool with your custom domain?

[venkatesh-kadiyala]

@kaustavghosh06 Updated through console.

https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-add-custom-domain.html#cognito-user-pools-add-custom-domain-adding

[kaustavghosh06]

@venkatesh-kadiyala How have you modified your aws_exports.js file? Could we get a snippet of it which would help us debug this issue better?

[venkatesh-kadiyala]

@kaustavghosh06
Please see below aws_exports.js file. Somehow I solved it by removing cognito domain directly from console. This solved my problem but still the cognito domain is referencing in aws-exports.js. It doesn't allow me to update through amplify CLI. I did update the callback URL's using amplify update auth.

// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
"aws_project_region": "us-east-1",
"aws_cognito_identity_pool_id": "us-east-1:xxxxxxxxxxxx",
"aws_cognito_region": "us-east-1",
"aws_user_pools_id": "us-east-1_xxxxxxxxx",
"aws_user_pools_web_client_id": "xxxxxxxxxxxxxxxx",
"oauth": {
"domain": "clips-xxxx-dev.auth.us-east-1.amazoncognito.com",
"scope": [
"phone",
"email",
"openid",
"profile",
"aws.cognito.signin.user.admin"
],
"redirectSignIn": "https://dev.clips.xxxxx.com/",
"redirectSignOut": "https://auth.dev.clips.xxxxx.com/login?response_type=code&client_id=4lexxxxxxxxxxxxx&redirect_uri=https://dev.clips.xxxxxx.com/",
"responseType": "code"
},
"federationTarget": "COGNITO_USER_POOLS",
"aws_appsync_graphqlEndpoint": "https://ohpssu4ybjbgtgyxxxxxxxxxxx.appsync-api.us-east-1.amazonaws.com/graphql",
"aws_appsync_region": "us-east-1",
"aws_appsync_authenticationType": "AMAZON_COGNITO_USER_POOLS",
"aws_user_files_s3_bucket": "xxxx-xxxxx-dev",
"aws_user_files_s3_bucket_region": "us-east-1",
"aws_mobile_analytics_app_id": "4cxxxxxxxxxx",
"aws_mobile_analytics_app_region": "us-east-1"
};

export default awsmobile;

[sandeepsdixit]

Vote +1 for feature implementation

[xitanggg]

Vote +1, critical feature for any production app, otherwise would be frown upon by customers if they see Amazon Cognito as domain when clicking google/facebook login

[yashutanna]

+1 am currently facing the same issue - overwriting the domain in aws-exports when running Amplify.configure() on my react-app based on the environment thats deployed

[kylekirkby]

Any update on this one? What is the best work around for this at the moment?

BR,
Kyle

[kylekirkby]

I worked around this by adding something like this:

import config from "./aws-exports";
// Update Cognito Settings
config.oauth.domain = "staging.auth.xxxxx.app";
Amplify.configure(config);

[devth]

Is there a way to convince amplify of an updated auth domain? It reverts to my old domain any time I amplify push.

[ianmartorell]

I use @kylekirkby's workaround setting the domain from an environment variable and it's working great.

[blkc]

As @devth said it seems to revert even with amplify pull / push, so the best for now is to override.

[zackurben]

I ran into this issue by accidentally updating the domain settings in the Cognito UI - unaware it wasn't supported. My aws-exports.js file reverted to this content, and I was unable to continue with development.

{
    ...,
    "oauth: {},
    ...
}

The env override method didn't work for me, but the following did (Note: this method does not support fully custom domains either).

$ amplify update auth
Please note that certain attributes may not be overwritten if you choose to use defaults settings.

You have configured resources that might depend on this Cognito resource.  Updating this Cognito resource could have unintended side effects.

Using service: Cognito, provided by: awscloudformation
 What do you want to do? Apply default configuration with Social Provider (Federation)
 What domain name prefix do you want to use? my-custom-cognito-domain
 Enter your redirect signin URI: <redirect uri>
? Do you want to add another redirect signin URI No
 Enter your redirect signout URI: <redirect signout uri>
? Do you want to add another redirect signout URI No


...

$ amplify push

You will now get aws-exports oauth settings that look like:

{
    ...,
    "oauth": {
        "domain": "my-custom-cognito-domain-<Amplify ENV>.auth.<Amplify Region>.amazoncognito.com",
        "scope": [
            "phone",
            "email",
            "openid",
            "profile",
            "aws.cognito.signin.user.admin"
        ],
        "redirectSignIn": ...,
        "redirectSignOut": ...,
        "responseType": "code"
    },
    ...
}

This was able to unblock my development, but its a bandaid solution for sure. Hopefully we can get custom domain support soon.

[mdlavin]

While Amplify doesn't have support for this yet, the customization that Amplify provides is enough to automate the configuration of the backend resources. I wrote an article about how the configuration can be done to hopefully saves some others time: https://medium.com/@matt.lavin/automating-cognito-custom-auth-domains-with-amplify-33e7b8f13266

[vic-blt]

I also use @kylekirkby's workaround.

These are the lines which set oauth.domain

amplify-cli/packages/amplify-frontend-javascript/lib/frontend-config-creator.js

Lines 250 to 252 in 525deb6

	if (cognitoResource.output.HostedUIDomain) {
	domain = `${cognitoResource.output.HostedUIDomain}.auth.${projectRegion}.amazoncognito.com`;
	}

At this stage, we can't tell if HostedUIDomain is a custom domain or not.
So we need to add HostedUICustomDomain: userPool.CustomDomain in amplify-category-auth.

[biblip]

I worked around this by adding something like this:

import config from "./aws-exports";
// Update Cognito Settings
config.oauth.domain = "staging.auth.xxxxx.app";
Amplify.configure(config);

Building upon kylekirkby answer: I did this:

import awsConfig from './aws-exports';
const updatedAwsConfig = {
    ...awsConfig,
    oauth: {
        ...awsConfig.oauth,
        domain: "auth.mycustomdomain.com",
        redirectSignIn: "https://" + location.hostname + "/singin/redirect/path/",
        redirectSignOut: "https://" + location.hostname + "/signout/redirect/path/"
    }
}
Amplify.configure(updatedAwsConfig);

Every redirect route must be configured with Amplify. The custom domain must be authorized in Route 53.

This works even if you have multiple websites (dev1, dev2, dev3 ) to redirect to: and amazon only redirects to the correct server. (answering the original question of venkatesh-kadiyala (OP).

[thiskevinwang]

It looks like adding a custom domain to the Cognito user pool causes amplify push (let's say with some arbitrary API changes, like adding 1 schema type) to fail with

UPDATE_FAILED 
HostedUIProvidersCustomResourceInputs Custom::LambdaCallout
Sat Jun 26 2021 18:24:24 GMT-0400 (Eastern Daylight Time) Received response status [FAILED] from custom resource. Message returned: See the details in CloudWatch Log Stream: 2021/06/26/[$LATEST]<REDACTED> (RequestId: <REDACTED>)

UPDATE_FAILED
authmytestappc96db3cc
AWS::CloudFormation::Stack Sat Jun 26 2021 18:24:34 GMT-0400 (Eastern Daylight Time) Embedded stack <REDACTED ARN> was not successfully updated. Currently in UPDATE_ROLLBACK_IN_PROGRESS with reason: The following resource(s) failed to update: [HostedUIProvidersCustomResourceInputs]. 

Anyone else experiencing this?

[yanislavtankov]

@UnicornAccount this is simple and clear. Just wandering why Amplify docs have not included it?

[joekiller]

I'm guessing this isn't supported yet because authorizing SES from sandbox isn't straightforward.

[amonradev]

Any updates on this? It's been 3 years

[maziarzamani]

+1!

[keilaiendraicak]

+1!

[leonardohenriquedev]

Updates??

[maziarzamani]

Our users are confused by the generic cognito endpoint being prompted when SSO is utilized, would be ideal to white label these, while it is is possible to do manually from the Cognito console, it is not really compatible with the CLI.

[amonkomlog]

Hi @maziarzamani , u can explain how to do it in Cognito console? I don't find anything about how to configure it

[maziarzamani]

👀

[ngochoangdev-bunbu]

I'm facing this issue. There is no way to update my custom domain in aws-export.js file.

[osehmathias]

There's a very simple workaround solution ....

import config from './aws-exports';

const updatedAwsConfig = {
  ...config,
  oauth: {
    ...config.oauth,
    domain: process.env.REACT_APP_AWS_COGNITO_URL,
    redirectSignIn: process.env.REACT_APP_BASE_URL,
    redirectSignOut: process.env.REACT_APP_BASE_URL
  }
};

Amplify.configure(updatedAwsConfig);

[amonkomlog]

Sorry, but, i don't understand your workaround. This piece of code is required to work the feat. The problem is on the custom provider login screen, because it says "continue to cognito..." where it should say "continue to my application name..."

[osehmathias]

Can you show a screenshot

[amonkomlog]

Sure man, this example is on google signIn screen.

[osehmathias]

Not an amplify issue (or related to this issue). Update your Google Console domains.

Edit - once your custom domains are verified, delete any cognito domains from Google Console. Remember you need to update it for the callback as well

[amonkomlog]

Ohh, thank you so much!

[fkeegan]

Is there an ETA for this? Any updates?

[k2-tek]

This simple solution worked for me in my vue 3 application. The key is updating the value of awsExports.oauth.domain prior to passing that to Amplify.configure.

import { Authenticator } from "@aws-amplify/ui-vue";
import "@aws-amplify/ui-vue/styles.css";
import { Amplify } from "aws-amplify";
import awsExports from "./src/aws-exports"
awsExports.oauth.domain = "{{ YOUR CUSTOM DOMAIN - auth.example.com}}"
Amplify.configure(awsExports);

<template>
  <div>
    <Authenticator :social-providers="['google','amazon']">
      <template v-slot="{ user, signOut }">
        <h1>Hello {{ user }}!</h1>
        <button @click="signOut">Sign Out</button>
      </template>
    </Authenticator>
  </div>
</template>```

[amonkomlog]

Hi @k2-tek, I'm having trouble understanding the solution provided. Since my custom domain doesn't consist of a user-friendly string, I would prefer using something like "My App" instead of the current format "my-app-example-cognito." Can you please clarify or suggest an alternative approach?

[k2-tek]

If you setup your own custom domain in AWS Cognito then this should solve your issue. You can follow the AWS documentation below.

https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-add-custom-domain.html

[amonkomlog]

This worked for me!

[ewarrenG]

Not an amplify issue (or related to this issue). Update your Google Console domains.

Edit - once your custom domains are verified, delete any cognito domains from Google Console. Remember you need to update it for the callback as well

@osehmathias can you clarify what you mean by updating the callbacks as well? I have it working as specified in the docs with https://<your-user-pool-domain>/oauth2/idpresponse. Am I expected to implement a route within my application for /oauth2/idpresponse?

Thanks!