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

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


I am using vue3 and have set up an AWS user pool ( 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

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

import Amplify, { Auth } from 'aws-amplify';
Auth: {
identityPoolId: 'eu-central-1_REST-OF-THE-POOL-DATA',
region: 'eu-central-1',
userPoolWebClientId: '4t49u0pu0skXREST-OF-ID-DATA',
mandatorySignIn: false,
cookieStorage: {
domain: '',
path: '/',
expires: 365,
sameSite: "strict",
secure: true
authenticationFlowType: 'USER_PASSWORD_AUTH',
oauth: {
domain: '',
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
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
Inside Authenticator

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

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

asked 2 years ago137 views
1 Answer

Solution is easy. AWS just not supporting Amplify Auth with any modern and up-to-date Language.
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