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>

Recognize

Answer 1

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>

Shelby

I tried this approach in my code (see updated answer), but I was unsuccessful. Any additional thoughts? (p.s. Welcome to SO!) – Recognize

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 } }; – Shelby

How can I do this in React? – Phytobiology

Answer 2

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>

Protoplasm

Answer 3

I got this to work with a simplified inline expression:

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

Overlap

Answer 4

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>

Cavernous

Answer 5

If you're using withAuthenticator:

const withAuthenticatorOptions = {
  hideSignUp: true
}

export default withAuthenticator(MyApp, withAuthenticatorOptions);

AWS doc

Diminutive

Always try to write your code in code block. Cheers – Lachesis

Answer 6

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>

Botheration

I tried on Quasar and this option worked for me. – Stature