How do I disable the sign up link for the aws amplify vue authenticator?
I got this to work with a simplified inline expression:
<amplify-authenticator :authConfig="{ signInConfig: { isSignUpDisplayed: false } }" />
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>
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>