Amplify-js: Auth.federatedIdentitySignIn({provider: 'Google'}) not working

[colehendo]

Describe the bug
When I try to use Auth.federatedIdentitySignIn({provider: 'Google'}); in my code it throws the error:
"Argument of type '{ provider: string; }' is not assignable to parameter of type 'FederatedSignInOptionsCustom'. Object literal may only specify known properties, and 'provider' does not exist in type 'FederatedSignInOptionsCustom'.`

When I use Auth.federatedIdentitySignIn(); by itself it works fine, but I would like to skip the step of clicking the button.

To Reproduce
run npm i aws-angular
run following code in a typescript/angular file:
import Amplify, { Auth } from 'aws-amplify';
const oauth = { domain: 'XXXXXX.auth.us-east-1.amazoncognito.com/', scope: ['email', 'profile', 'openid'], redirectSignIn: 'http://localhost:4200/', redirectSignOut: 'http://localhost:4200/', responseType: 'token' };

Amplify.configure({ Auth: { oauth: oauth, region: environment.AWS_REGION, userPoolId: environment.AWS_USER_POOL_ID, userPoolWebClientId: environment.CLIENT_ID, } });

ngOnInit() { Auth.federatedSignIn({provider: 'Google'}); }

Expected behavior
It should redirect to an option to sign in with a google email listing all the user's google accounts.

Desktop (please complete the following information):

• OS: iOS
• Browser: chrome

Running in visual studio code if that helps at all

aws-amplify version: 1.1.29
@aws-amplify/auth version: 1.2.25
@aws-amplify/core version: 1.0.28

[manueliglesias]

Hi @colehendo

This seems to me as a TypeScript compiler thrown error, is that correct?

Which version of typescript are you using?

The federatedSignIn function has Overloads like so:

https://github.com/aws-amplify/amplify-js/blob/d384e5dd01b2719111c5121538259571730b1218/packages/auth/src/Auth.ts#L1438-L1451

where

https://github.com/aws-amplify/amplify-js/blob/d384e5dd01b2719111c5121538259571730b1218/packages/auth/src/types/Auth.ts#L58-L64

[colehendo]

I am using 3.4.5, the version required by the Angular compiler. If I change my code to Auth.federatedSignIn({customProvider: 'Google'}); it gives no error, and if I comment out the customProvider sections in the node_module files it kinda works, but those both seem very hacky and I would like to figure out a legitimate way of doing it.

[manueliglesias]

@colehendo

Can you try like this?

import { CognitoHostedUIIdentityProvider } from "@aws-amplify/auth/lib/types";

Auth.federatedSignIn({
  provider: CognitoHostedUIIdentityProvider.Google
});

[colehendo]

That worked perfectly. Thank you so much!

[elsenhuc]

Hey...I am running in the same issue.
Unfortunately I cannot use the proposed solution as I have a customer federation provider (neither cognito, google, etc.
I followed the example (Full React Example) here:
https://aws-amplify.github.io/docs/js/authentication
and updated the OAuthButton like this:
class OAuthButton extends Component {

render() {
    return (
      <button className="ui button" onClick={this.props.OAuthSignIn({customProvider: 'myFederate'})}>
        Sign in with Custom
      </button>
    );
}

}

[leondroidgeeks]

I would like to request to open this issue again. The solution by @manueliglesias worked in a dev environment with ng serve but as soon as I build with ng build --prod and host the project, I get the following error in the browser when calling the code:
TypeError: undefined is not an object (evaluating 'hw.CognitoHostedUIIdentityProvider.Google')

[martinjuhasz]

CognitoHostedUIIdentityProvider is now exported by @aws-amplify/auth directly. You can use

import Amplify from '@aws-amplify/core'
import Auth, { CognitoHostedUIIdentityProvider } from '@aws-amplify/auth'