How do I disable the sign up link for the aws amplify vue authenticator?

Question

I'm using the amplify-authenticator component from the aws-amplify-vue library to enable authentication for my app. I'm trying to figure out how to disable the "Create Account" link on the front end and I can't seem to find anything in the documentation or online. I've seen a few places where users disabled it by hiding it with css and a few places where users were able to disable it with the react library, but I haven't found anything specific for the vue library. It's possible I'm just missing the documentation, but does anyone know how to remove the sign up functionality from the vue amplify authenticator?

Component

<template>
  <v-container>
    <amplify-authenticator></amplify-authenticator>
  </v-container>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { Auth } from "aws-amplify";
import logger from "../logging";
import { components } from "aws-amplify-vue";
import { AmplifyEventBus } from "aws-amplify-vue";

@Component({
  components: {
    ...components
  }
})
export default class Login extends Vue {
  async created() {
    try {
      // This function throws an error if no user is logged in
      await Auth.currentAuthenticatedUser({ bypassCache: true });
      this.$router.push("/instruments");
    } catch (e) {
      logger.silly("No user currently logged in");

      AmplifyEventBus.$on("authState", async info => {
        logger.silly("signedIn");
        logger.silly(info);
        if (info === "signedIn") {
          const user = await Auth.currentAuthenticatedUser({
            bypassCache: true
          });
          this.$router.push("/instruments");
        } else {
          logger.error(`Failed to login`);
          alert("Failed to login");
        }
      });
    }
  }
}
</script>

<style scoped></style>

Update 1

Based on @asimpledevice's answer I tried the below without success:

<template>
  <v-container class="d-flex justify-center align-center">
    <amplify-authenticator
      :authConfig="authConfiguration"
    ></amplify-authenticator>
  </v-container>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { Auth } from "aws-amplify";
import StoreTypes from "../store-types";
import logger from "../logging";
import { components } from "aws-amplify-vue";
import { AmplifyEventBus } from "aws-amplify-vue";

@Component({
  components: {
    ...components
  }
})
export default class Login extends Vue {
  async mounted() {
    try {
      // This function throws an error if no user is logged in
      await Auth.currentAuthenticatedUser({ bypassCache: true });
      this.$router.push("/instruments");
    } catch (e) {
      const self = this;
      AmplifyEventBus.$on("authState", async info => {
        if (info === "signedIn") {
          this.$store.dispatch(StoreTypes.types.LOAD_CURRENT_USER);
          const nextLocation =
            self.$route.query.redirect !== null &&
            self.$route.query.redirect !== undefined
              ? (self.$route.query.redirect as string)
              : "/instruments";
          this.$router.push(nextLocation).catch(err => {});
        }
      });
    }
  }

  authConfiguration() {
    return {
      signInConfig: {
        isSignUpDisplayed: false
      }
    };
  }
}
</script>

score 9 · Accepted Answer · edited Feb 19 '20 at 21:39

You can hide the "sign up" section via the "signInConfig" object.

  configurationOptions: any = {
    signInConfig: {
      isSignUpDisplayed: false
    }
  };

You can then pass this object in as a prop to the component:

    <amplify-authenticator
      :authConfig="configurationOptions"
    ></amplify-authenticator>

NOTE: You must make the config object a local property. The config will not work if it is a function or computed property. Your full solution would be the following:

<template>
  <v-container class="d-flex justify-center align-center">
    <amplify-authenticator
      :authConfig="configurationOptions"
    ></amplify-authenticator>
  </v-container>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { Auth } from "aws-amplify";
import StoreTypes from "../store-types";
import logger from "../logging";
import { components } from "aws-amplify-vue";
import { AmplifyEventBus } from "aws-amplify-vue";

@Component({
  components: {
    ...components
  }
})
export default class Login extends Vue {
  configurationOptions: any = {
    signInConfig: {
      isSignUpDisplayed: false
    }
  };

  async mounted() {
    try {
      // This function throws an error if no user is logged in
      await Auth.currentAuthenticatedUser({ bypassCache: true });
      this.$router.push("/instruments");
    } catch (e) {
      const self = this;
      AmplifyEventBus.$on("authState", async info => {
        if (info === "signedIn") {
          this.$store.dispatch(StoreTypes.types.LOAD_CURRENT_USER);
          const nextLocation =
            self.$route.query.redirect !== null &&
            self.$route.query.redirect !== undefined
              ? (self.$route.query.redirect as string)
              : "/instruments";
          this.$router.push(nextLocation).catch(err => {});
        }
      });
    }
  }
}
</script>

<style></style>

I tried this approach in my code (see updated answer), but I was unsuccessful. Any additional thoughts? (p.s. Welcome to SO!) — Tim Hutchison, Feb 17 '20 at 18:52
thanks for the welcome! it doesn't seem to like it when it's passed in as a function rather than as a property. could you try changing it from: authConfiguration() { return { signInConfig: { isSignUpDisplayed: false } }; } to just a local property? authConfiguration: any = { signInConfig: { isSignUpDisplayed: false } }; — asimpledevice, Feb 17 '20 at 23:03

score 7 · Answer 2 · answered Sep 24 '20 at 18:28

With @aws-amplify/auth ^3.2.6 and @aws-amplify/ui-vue ^0.2.20 this works as documented in Sign In docs

<template>
  <div>
    <amplify-authenticator username-alias="email">
      <amplify-sign-in slot="sign-in" :hide-sign-up="true"
        username-alias="email">
      </amplify-sign-in>
    </amplify-authenticator>
  </div>
</template>

score 2 · Answer 3 · answered May 27 '20 at 13:31

2

I got this to work with a simplified inline expression:

<amplify-authenticator :authConfig="{ signInConfig: { isSignUpDisplayed: false } }" />

answered May 27 '20 at 13:31

Brian Geiman

41
5

score 2 · Answer 4 · answered Jan 19 '21 at 09:44

2

I tried this, in Angular 8 it works.

<amplify-authenticator>
  <amplify-sign-in slot="sign-in" hide-sign-up="true"></amplify-sign-in>
</amplify-authenticator>

answered Jan 19 '21 at 09:44

Sara Bianchi

141
1
2

score 2 · Answer 5 · edited Nov 09 '22 at 23:24

2

If you're using withAuthenticator:

const withAuthenticatorOptions = {
  hideSignUp: true
}

export default withAuthenticator(MyApp, withAuthenticatorOptions);

AWS doc

edited Nov 09 '22 at 23:24

Usitha Indeewara

870
3
10
21

answered Nov 07 '22 at 03:08

Haipeng Jiang

21
4

1

Always try to write your code in code block. Cheers – Lenzman Nov 09 '22 at 17:50

score 0 · Answer 6 · answered Aug 30 '23 at 00:23

If using the Amplify UI for Vue, then this is as easy as binding :hide-sign-up="true" in the authenticator:

<template>
  <authenticator :hide-sign-up="true">
    <template v-slot="{ user, signOut }">
      <h1>Hello {{ user.username }}!</h1>
      <button @click="signOut">Sign Out</button>
    </template>
  </authenticator>
</template>

How do I disable the sign up link for the aws amplify vue authenticator?

Component

Update 1

6 Answers6

Linked