19

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

enter image description here

<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>

6 Answers 6

10

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>
3
  • 1
    I tried this approach in my code (see updated answer), but I was unsuccessful. Any additional thoughts? (p.s. Welcome to SO!) Commented Feb 17, 2020 at 18:52
  • 1
    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 } }; Commented Feb 17, 2020 at 23:03
  • How can I do this in React? Commented Oct 15, 2021 at 13:30
7

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>
0
2

I got this to work with a simplified inline expression:

<amplify-authenticator :authConfig="{ signInConfig: { isSignUpDisplayed: false } }" />
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>
2

If you're using withAuthenticator:

const withAuthenticatorOptions = {
  hideSignUp: true
}

export default withAuthenticator(MyApp, withAuthenticatorOptions);

AWS doc

1
  • 1
    Always try to write your code in code block. Cheers
    – Lenzman
    Commented Nov 9, 2022 at 17:50
2

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>
1
  • I tried on Quasar and this option worked for me. Commented Sep 15, 2023 at 14:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.