vuejs3amazon-cognitoaws-amplify

Vue.js and and amplify for aws

I'm trying to connect my vue.js with cognito using amplify but I keep getting errors:

here's my aws-exports.js:

const awsconfig = {
  Auth: {
    region: 'us-east-1',
    userPoolId: 'us-east-1_mld8IjN9e',
    userPoolWebClientId: '229bq6q1fbjtp0r43hhoq5qoe7',
    authenticationFlowType: 'USER_PASSWORD_AUTH'
  }
};
export default awsconfig;

and this is my main.js:

import { createApp } from 'vue'
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.min.css';
import {Amplify} from 'aws-amplify';
import awsconfig from './aws-exports';

console.log('AWS Config:', awsconfig);

Amplify.configure(awsconfig);
createApp(App).mount('#app')
console.log(Amplify);

and this is the error i keep getting:

ERROR
Cannot read properties of undefined (reading 'loginWith')
TypeError: Cannot read properties of undefined (reading 'loginWith')
    at AmplifyClass.notifyOAuthListener (webpack-internal:///./node_modules/@aws-amplify/core/dist/esm/singleton/Amplify.mjs:89:44)
    at AmplifyClass.configure (webpack-internal:///./node_modules/@aws-amplify/core/dist/esm/singleton/Amplify.mjs:68:10)
    at Object.configure (webpack-internal:///./node_modules/aws-amplify/dist/esm/initSingleton.mjs:52:62)
    at eval (webpack-internal:///./src/main.js:14:57)
    at ./src/main.js (http://localhost:8080/js/app.js:74:1)
    at __webpack_require__ (http://localhost:8080/js/app.js:435:32)
    at http://localhost:8080/js/app.js:1547:109
    at __webpack_require__.O (http://localhost:8080/js/app.js:477:23)
    at http://localhost:8080/js/app.js:1548:53
    at http://localhost:8080/js/app.js:1550:12

anyone knows the solution to this

Solution

  • Your awsconfig in your aws-exports.js shows you are using authenticationFlowType: 'USER_PASSWORD_AUTH'. This shouldn't trigger the reading loginWith error you currently face as it only exists in federatedSignIn which uses oAuth. You can follow the steps below to create a new User Pool. Note how I checked email and password.

    enter image description here

    enter image description here

    enter image description here

    enter image description here

    Navigate to the App Client setting by scrolling to the base.

    enter image description here

    Edit the App Client Setting by adding ALLOW_USER_PASSWORD_AUTH to the Authentication flows

    enter image description here

    enter image description here

    Save Changes

    enter image description here

    enter image description here

    If you don't want to create a new user pool, follow the steps below to disable oAuth from your former AWS Cognito Console.

    Also in your App Client Settings, ensure you do the following:

    Also, update your aws-config to :

    Amplify.configure({
  Auth: {
         region: 'us-east-1',
         userPoolId: 'us-east-1_mld8IjN9e',
         userPoolWebClientId: '229bq6q1fbjtp0r43hhoq5qoe7',
         authenticationFlowType: 'USER_PASSWORD_AUTH',
         oauth: {
                  domain: 'none',
                  scope: [],
                  redirectSignIn: 'none',
                  redirectSignOut: 'none',
                  responseType: 'none',
                },
          federationDisabled: true
  }
});

    I believe this just solve your issue