CODEWITHSUNDEEP
vue.jsaws-amplify
ajrwhite
ajrwhite

Reputation: 8448

Amplify Vue amplify-authenticator component not displaying

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

Answers (1)

ajrwhite
ajrwhite

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

Related Questions