CODEWITHSUNDEEP
amazon-cognitoaws-amplifyvuejs3
1574ad6
1574ad6

Reputation: 85

Authenticate users against AWS cognito with Vue3 amplify

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>
  1. Has anyone being able to just use the AWS amplify authentication module with vue3?
  2. 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?

Upvotes: 2

Views: 3968

Answers (2)

Austin
Austin

Reputation: 862

Vue3 is now supported by Amplify, but it's still in the early phases. The big change is that you no longer use the ui-vue package. You need to use ui-components:

yarn add aws-amplify @aws-amplify/ui-components

AWS has an auth example for you to use on their website. Make sure you select the Vue3 tabs in the example. I can also confirm that this has worked for me within ionic apps too.

Upvotes: 1

1574ad6
1574ad6

Reputation: 85

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

Upvotes: 0

Related Questions