Authenticate users against AWS cognito with Vue3 amplify

Question

I am using vue3 and have set up an AWS user pool (amazoncognito.com). The goal is to authenticate users with a username and password against Cognito and receive the OAuth2 token to authenticate API requests made against the AWS API gateway.

Challenge: It seems that AWS amplify is not working with the latest vue3 release. It only shows me that the user is not logged in but not displaying any login or logout buttons -regardless of the configuration.

Potential solutions I am interested in (order of preference)

main.js

import { createApp } from 'vue'
import App from './App.vue'
import Amplify from 'aws-amplify';
import Auth from '@aws-amplify/auth';

Amplify.configure({
  Auth: {
      identityPoolId: 'eu-central-1_REST-OF-ID',
      region: 'eu-central-1',
      userPoolWebClientId: '4t49u0pu0skkREST-OF-ID',
      mandatorySignIn: false,
      cookieStorage: {
            domain: 'PREFIX.auth.eu-central-1.amazoncognito.com',
            path: '/',
            expires: 365,
            sameSite: "lax",
            secure: true
        },
      authenticationFlowType: 'USER_PASSWORD_AUTH',
      oauth: {
          domain: 'PREFIX.auth.eu-central-1.amazoncognito.com',
          scope: ['phone', 'email', 'profile', 'openid', 'aws.cognito.signin.user.admin'],
          redirectSignIn: 'http://localhost:3000/',
          redirectSignOut: 'http://localhost:3000/',
          responseType: 'code' // or 'token', note that REFRESH token will only be generated when the responseType is code
      }
  }
});

import { createStore } from 'vuex'
const store = createStore({
    state() {
      return {
        entries: []
      };
    },
    mutations: {
      addTime(state, item) {
        state.entries.push(item);
      }
    }
});

createApp(App).use(store, Amplify, Auth).mount("#app");

And inside App.vue

  <template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
  <AddTime/>
  <amplify-authenticator>
    <div>
    Inside Authenticator
    <amplify-sign-in></amplify-sign-in>
      <amplify-sign-out></amplify-sign-out>
    </div>
  </amplify-authenticator>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';
import AddTime from './components/AddTime.vue';

export default {
  name: 'App',
  components: {
    HelloWorld,
    AddTime,
  }
}
</script>

Has anyone being able to just use the AWS amplify authentication module with vue3?
How can I access the Cognito OAuth 2.0 authorization server with vue3 and fetch (Authenticating and receiving the token, by posting the credentials a user placed?

Have you tried Amplify CLI? That way you don't have to worry about content of Amplify config (aws-exports.js) and it may be working with Vue3 docs.amplify.aws/cli — Arosha
Hey, the issue is that even the components are not showing. Regardless of the configuration. No Login-Button no nothing. I followed docs.amplify.aws/lib/auth/start/q/platform/… — 1574ad6
I see. Did you catch any errors? May be have a try/catch around createApp(App).use(Amplify, Auth).mount("#app"); and catch some errors thrown? — Arosha
No errors :( The app is rendering, showing the vue default app and an "Inside Authenticator" but nothing else, no login- no logout. In my earlier tries, last year with vue2 (using the cli) all was working. — 1574ad6

1574ad6 1574ad6 · Accepted Answer · 2021-01-04T19:39:03

It turns out, vue3 is just not supported even months after the release. See: https://github.com/aws-amplify/amplify-js/issues/6756

Authenticate users against AWS cognito with Vue3 amplify

2 Answers