acces_token scopes do not come through when using react component Auth components with Cognito

[david-saeger]

Before opening, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have read the guide for submitting bug reports.
• [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

``` # Put output below this line System: OS: macOS 11.4 CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz Memory: 152.31 MB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 14.16.1 - /usr/local/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 6.14.12 - /usr/local/bin/npm Browsers: Chrome: 92.0.4515.159 Firefox: 91.0.1 Safari: 14.1.1 npmGlobalPackages: cognitocurl: 0.2.3 gatsby-cli: 2.12.108 gulp: 4.0.2 http-server: 0.12.3 jwt-cli: 1.3.1 npm: 6.14.12 serve: 11.3.2 tsdx: 0.14.1 ```

Describe the bug

I have a amplify project which uses Cognito to authenticate with additional scopes 'profile' 'openid'. When I use the hosted UI to sign in these scopes are on my returned Access Token but when I use Amplifys react components these scopes are unavailable and I am unable to authenticate to my API gateway endpoint.

Expected behavior

After authenticating with Amplifys react components I receive a access_token with the correct scopes I have defined in Cognito

Reproduction steps

Log in through username and password in amplify app. The JWT token returned has incorrect scopes but when I log in through cognito hosted UI I get the correct scopes in token

Code Snippet

// Put your code below this line.
import { AmplifyAuthenticator } from '@aws-amplify/ui-react';
import { Helmet } from 'react-helmet';
import { Redirect } from 'react-router-dom';

import {settings} from 'config/settings';
import { useAppContext } from 'hooks';

export const Home = () => {
  const { userSignedIn } = useAppContext();

  return (
    <>
      <Helmet>
        <title>Rabbit</title>
      </Helmet>
      {userSignedIn ? (
        <Redirect to='/dashboard/employees' />
      ) : (
         <AmplifyAuthenticator federated={{
           amazonClientId: settings.cognito.CLIENT_ID
         }}/>
      )}
    </>
  );
};

Log output

``` // Put your logs below this line ```

aws-exports.js

No response

Manual configuration

Amplify.configure({
  Auth: {
    mandatorySignIn: true,

    // REQUIRED - Amazon Cognito Identity Pool ID
    identityPoolId: settings.cognito.IDENTITY_POOL_ID,
    // REQUIRED - Amazon Cognito Region
    region: settings.aws.REGION,
    // OPTIONAL - Amazon Cognito User Pool ID
    userPoolId: settings.cognito.USER_POOL_ID,
    // OPTIONAL - Amazon Cognito Web Client ID (26-char alphanumeric string)
    userPoolWebClientId: settings.cognito.CLIENT_ID,

    authenticationFlowType: 'USER_PASSWORD_AUTH',

    oauth: {
      domain: 'xxxxxxxx,
      scope: ['openid','profile'],
      redirectSignIn: [ isLocalhost ? 'http://localhost:3000/' : ' https://xxxxxxl'],
      responseType: 'token', // or 'token', note that REFRESH token will only be generated when the responseType is code
    },
    federationTarget: "COGNITO_USER_POOLS"
  },
});
Auth.configure();

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[chrisbonifacio]

Hi @david-saeger 👋 Thanks for raising this issue. What are the scopes included in the access token from the Cognito Hosted UI? Do they match the scopes in your auth configuration?

[hkjpotato]

1. When you directly use federated props on AmplifyAuthenticator, the orange "Signin with Amazon" button should direct you to the amazon signin page directly, and you are essentially doing an identity pool federation.
2. I would suggest you stick with Hosted/OAuth flow if you need user pool federation. Only the hostedUI/OAuth flows support getting requested scopes in tokens.
3. You can try the suggested solution here as well https://github.com/aws-amplify/amplify-js/issues/6928#issuecomment-755774185

[hkjpotato]

potentially duplicate with https://github.com/aws-amplify/amplify-js/issues/11915

[david-saeger]

It was never clear to me how to allow amplify to manage the state of the resultant tokens if I use the hosted-ui. If this is possible it would be a way forward.

[ErikCH]

Closing duplicate of aws-amplify/amplify-js#11915