AWS Cognito with Vue and Amplify how to resolve Error: Username and Pool information are required

Question

I am developing an application using Vue.js and the Amplify SDK to work with AWS Cognito for authentication. My Cognito user pool is federated through Azure AD and is working properly. I am not using Amplify CLI.

When I navigate to /auth (see AuthenticateView.vue below), I can see the request and response in the web tools of Chrome successfully retrieve an access_token, expires_in, refresh_token, and token_type from https://xxxxxxxxxx.auth.us-east-2.amazoncognito.com/oauth2/token. I have taken said access_token and used it to send requests to my API Gateway and was successfully authenticated. However, on the console output from HomeView.vue, I see the below error for 3 different events ("signIn_failure", "cognitoHostedUI_failure", "customState_failure"). Any help is greatly appreciated.

Error: Username and Pool information are required. at new CognitoUser (webpack-internal:///./node_modules/amazon-cognito-identity-js/es/CognitoUser.js:92:13) at AuthClass.createCognitoUser (webpack-internal:///./node_modules/@aws-amplify/auth/lib-esm/Auth.js:2407:16) at AuthClass.eval (webpack-internal:///./node_modules/@aws-amplify/auth/lib-esm/Auth.js:2332:32) at step (webpack-internal:///./node_modules/@aws-amplify/auth/node_modules/tslib/tslib.es6.js:197:17) at Object.eval [as next] (webpack-internal:///./node_modules/@aws-amplify/auth/node_modules/tslib/tslib.es6.js:146:14) at fulfilled (webpack-internal:///./node_modules/@aws-amplify/auth/node_modules/tslib/tslib.es6.js:105:24)

HomeView.vue

Hub.listen('auth', (data) => {
      const { payload } = data
      console.log(payload)
      console.log('A new auth event has happened: ', data.payload.data.username + ' has ' + data.payload.event)
    })

aws-exports.js

const awsExports = {
  Auth: {
    region: 'us-east-2',
    userPoolId: 'us-east-2_xxxxxxxxx',
    userPoolWebClientId: 'xxxxxxxxxxxxxxxxxxxxxxxxx',
    oauth: {
      domain: 'xxxxxxxxxx.auth.us-east-2.amazoncognito.com',
      scope: [
        'https://xxxxxxxxxx-vpce-xxxxxxxxxxxxxxxxx.execute-api.us-east-2.amazonaws.com/x/rw'
      ],
      redirectSignIn: 'http://localhost:8080',
      responseType: 'code'
    }
  }
}


export default awsExports

AuthenticateView.vue

import { Auth } from 'aws-amplify'
export default {
  name: 'AuthenticateView',
  async mounted () {
    await Auth.federatedSignIn({ customProvider: 'MyAzureAdProvider' })
      .then(cred => {
        console.log(cred)
      })
      .then(user => {
        console.log(user)
      })
      .catch(e => {
        console.log(e)
      })
  }
}

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

// Auth
import { Amplify } from 'aws-amplify'
import awsExports from '../aws-exports'

Amplify.configure(awsExports)

createApp(App).use(router).mount('#app')

I have tried using Auth.federatedSignIn function and was expecting to be able to use the access_token returned from Cognito.

Answer 1

Answering my own question as I found the solution! As seen in my question, the response from federatedSignIn did not include the id_token. I did not think this was an issue, and thought maybe the Amplify SDK had a bug. But through various troubleshooting (and lots of questions to ChatGPT) I discovered that id_token should be in the response. Furthermore, ChatGPT revealed that my federated User Pool app integration should have "openid" scope enabled in order to send the id_token.

Solution: enable "openid" scope on the app client "hosted UI" settings in the Cognito console, and request "openid" scope in my aws-exports.js file.

The ID token is typically included in the response when the "openid" scope is requested. If you are using the Authorization code grant or the Implicit grant flow and requesting the "openid" scope, then the ID token should be included in the response by default.

My updated aws-exports.js file:

const awsExports = {
  Auth: {
    region: 'us-east-2',
    userPoolId: 'us-east-2_xxxxxxxxx',
    userPoolWebClientId: 'xxxxxxxxxxxxxxxxxxxxxxxxx',
    oauth: {
      domain: 'xxxxxxxxxx.auth.us-east-2.amazoncognito.com',
      scope: [
        'https://xxxxxxxxxx-vpce-xxxxxxxxxxxxxxxxx.execute-api.us-east-2.amazonaws.com/x/rw',
        'openid'
      ],
      redirectSignIn: 'http://localhost:8080',
      responseType: 'code'
    }
  }
}
export default awsExports