Hi, I am Charu from Classmethod.In this short blog, we will talk about how to solve Cannot find name 'CognitoHostedUIIdentityProvider'. error.
I was working with Google SSO in AWS Cognito when I got this error.
In my frontend code, I configured Amplify with the region, user pool ID, and user pool web client ID. However, in order to enable Google login, an extra configuration was needed. I am not sure if this setting is correct as of now, but will share how I solved this error in the process of enabling Google SSO.
My Previous Code Snippet:
import { Authenticator } from "@aws-amplify/ui-react";
import { Amplify, Auth } from "aws-amplify";
const CLOUDFRONT_REGION = process.env.REACT_APP_CLOUDFRONT_REGION || "";
const COGNITO_USER_POOL_ID = process.env.REACT_APP_COGNITO_USER_POOL_ID || "";
const COGNITO_USER_POOL_APP_CLIENT_ID =
process.env.REACT_APP_COGNITO_USER_POOL_APP_CLIENT_ID || "";
Amplify.configure({
Auth: {
region: CLOUDFRONT_REGION,
userPoolId: COGNITO_USER_POOL_ID,
userPoolWebClientId: COGNITO_USER_POOL_APP_CLIENT_ID,
},
});
What I tried?
import { Authenticator } from "@aws-amplify/ui-react";
import { Amplify, Auth, CognitoHostedUIIdentityProvider } from "aws-amplify";
const CLOUDFRONT_REGION = process.env.REACT_APP_CLOUDFRONT_REGION || "";
const COGNITO_USER_POOL_ID = process.env.REACT_APP_COGNITO_USER_POOL_ID || "";
const COGNITO_USER_POOL_APP_CLIENT_ID =
process.env.REACT_APP_COGNITO_USER_POOL_APP_CLIENT_ID || "";
Amplify.configure({
Auth: {
region: CLOUDFRONT_REGION,
userPoolId: COGNITO_USER_POOL_ID,
userPoolWebClientId: COGNITO_USER_POOL_APP_CLIENT_ID,
},
});
Auth.federatedSignIn({ provider: CognitoHostedUIIdentityProvider.Google });
But I got this error:
Cannot find name 'CognitoHostedUIIdentityProvider'.
How I change my code-
Then I change my code to this:
import { CognitoHostedUIIdentityProvider } from "@aws-amplify/auth/lib/types";
import { Authenticator } from "@aws-amplify/ui-react";
import { Amplify, Auth } from "aws-amplify";
const CLOUDFRONT_REGION = process.env.REACT_APP_CLOUDFRONT_REGION || "";
const COGNITO_USER_POOL_ID = process.env.REACT_APP_COGNITO_USER_POOL_ID || "";
const COGNITO_USER_POOL_APP_CLIENT_ID =
process.env.REACT_APP_COGNITO_USER_POOL_APP_CLIENT_ID || "";
Amplify.configure({
Auth: {
region: CLOUDFRONT_REGION,
userPoolId: COGNITO_USER_POOL_ID,
userPoolWebClientId: COGNITO_USER_POOL_APP_CLIENT_ID,
},
});
Auth.federatedSignIn({
provider: CognitoHostedUIIdentityProvider.Google,
});
Make sure to import CognitoHostedUIIdentityProvider above @aws-amplify/ui-react or else it will throw another error saying-
`@aws-amplify/auth/lib/types` import should occur before import of `@aws-amplify/ui-react`
Thank for reading!
Happy Learning:)