Reputation: 8448
I have been using an <amplify-authenticator>
component on the Home.vue
view of a web application, via the HelloWorld.vue
component. This was working as expected, with signedIn state monitored using store.js and Vuex.
I have now switched to routing to Home.vue
or Login.vue
depending on sign-in state.
However, when a signed out user correctly routes to Login.vue
, the page displays as expected, minus the <amplify-authenticator>
component. It is clear from the Styles that this is importing (amazonOrange is listed as a color), but for some reason the sign-in interface is no longer displaying correctly.
Login.vue
<template>
<div class="login">
<div>
<vue-headful title="Login"/>
</div>
<div>
<p>
<router-link to="/">Login</router-link> |
<router-link to="/about">About</router-link>
</p>
</div>
<div>
<p><img alt="Vue logo" src="../assets/logo.png" /></p>
</div>
<div>
<amplify-authenticator></amplify-authenticator>
</div>
</div>
</template>
<script>
import { Auth } from "aws-amplify";
import { AmplifyEventBus } from "aws-amplify-vue";
export default {
name: "Login",
props: {
msg: String
}
};
</script>
If I change amplify-authenticator
to amplify-sign-in
then I see a sign in interface, but this needs additional scripting to implement.
I'd like to know specifically why the Authenticator component isn't displaying, since I cannot see an obvious bug in my code.
Upvotes: 3
Views: 2618
Reputation: 8448
Solved. If the user is signed in to Amazon Cognito, then the <amplify-authenticator>
will not display. The problem was with a bug in the check on signedIn
state, which was redirecting the user to the wrong page.
Upvotes: 2