By using AWS re:Post, you agree to the Terms of Use

AWS cognito using AWS amplify with Vue3 fails to show the component

0

I am using vue3 and have set up an AWS user pool (amazoncognito.com) using the was web-console. 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 is not showing the ui-component.
I have not configured amplify as I don't want it to mess with my backend, and just want to use the auth components. Therefore I configured the user-pool in the main.js

main.js
import { createApp } from 'vue'
import App from './App.vue'

import Amplify, { Auth } from 'aws-amplify';
Amplify.configure({
Auth: {
identityPoolId: 'eu-central-1_REST-OF-THE-POOL-DATA',
region: 'eu-central-1',
userPoolWebClientId: '4t49u0pu0skXREST-OF-ID-DATA',
mandatorySignIn: false,
cookieStorage: {
domain: 'PREFIX-IN-USE.auth.eu-central-1.amazoncognito.com',
path: '/',
expires: 365,
sameSite: "strict",
secure: true
},
authenticationFlowType: 'USER_PASSWORD_AUTH',
oauth: {
domain: 'PREFIX-DOMAIN-IN-USE.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
}
}
});
createApp(App).use(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"/>
<amplify-authenticator>
<div>
Inside Authenticator
<amplify-sign-out></amplify-sign-out>
</div>
</amplify-authenticator>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';
export default {
name: 'App',
components: {
HelloWorld,
}
}
</script>

I hope someone sees the error, changing the stuff since a week...

asked 2 years ago137 views
1 Answer
0

Solution is easy. AWS just not supporting Amplify Auth with any modern and up-to-date Language.
Vue3: https://github.com/aws-amplify/amplify-js/issues/6756
Angular: Same stuff.
Good Job!

answered 2 years ago

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Guidelines for Answering Questions