'How to use Amplify for implicit federated oauth w/ cognito *without* hosted UI

(Due to the confusion with what is amplify I'm borrowing the below from another post)

  • I want to use the feature federation of a user pool NOT an identity pool
  • I do NOT want to use this feature with the hosted UI.
  • I do NOT want to use this feature with identity pool.
  • I do NOT want to use this with the amplify CLI or amplify aws service

I am using aws-amplify https://www.npmjs.com/package/aws-amplify and the UI elements from @aws-amplify/ui-react and @aws-amplify/ui-components.

I am using v1.2.26 of the @aws-amplify/ui-react

The webapp is a react app that runs on our own backend in elastic beanstalk.

We have a web application that uses cognito user pools and user/password to authenticate into our application and we would like to add the ability to use SSO starting off with Google and eventually implementing other SAML idp's.

Our ideal flow is for a user to click "Sign in with google" on our page and be immediately taken to a google login screen that once authenticated brings them into the application with a refresh token so that their user session can be persisted.

Currently getting the error No Cognito Federated Identity pool provided

Is there a way to do this or should we implement the auth flow manually? Amplify seems to be a mess unless you use it exactly as they want with the hosted UI and underlying amplify service.

// Amplify Configuration
import { Amplify } from 'aws-amplify';

  useEffect(() => {
    //Helpful for debugging
    Hub.listen(/.*/, info => console.debug(info));
  }, []);

  Amplify.configure({
    Auth: {
      region: pool.region,
      userPoolId: pool.id,
      userPoolWebClientId: pool.client,
      storage: window.sessionStorage,
      mandatorySignIn: false,
    },
    oauth: {
      domain: `myCognitoUserPoolTest.${pool.region}.amazoncognito.com`,
      //We don't have a sign-in or sign-out URL because its handled by Cognito right now
      redirectSignIn: 'http://localhost:3000',
      redirectSignOut: 'http://localhost:3000',
      // This is the default don't need it explicitly set
      // Setting this to "token" only returns a short-lived access token not a refresh token
      // responseType: 'code',
    },
  });

  return (<AmplifyAuthenticator
        federated={{
          googleClientId:'myGoogleClientID',
          //Put this in here to just to see 
          oauthConfig: {
            domain: '-domain-.auth.-region-.amazoncognito.com',
            //We don't have a sign-in or sign-out URL because its handled by Cognito right now
            redirectSignIn: 'http://localhost:3000',
            redirectSignOut: 'http://localhost:3000',
            scope: ['email', 'profile', 'openid'],
          },
        }}
      >
        <AmplifyGoogleButton
          slot="federated-buttons"
          clientId="myGoogleClientID"
          //Tried calling this explicitly, same result.
          onClick={() =>
            Auth.federatedSignIn({
              provider: CognitoHostedUIIdentityProvider.Google,
            }).then(res => alert(res))
          }
        />


      </AmplifyAuthenticator>);



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source