Utilizing the amplify-authenticator component from the aws-amplify-vue library to manage authentication in my application. I am currently exploring methods to disable the "Create Account" link on the front end interface, but haven't found a direct solution either in the documentation or online resources. While some users have resorted to hiding it with CSS or disabling it using the React library, I am specifically looking for a solution tailored to the Vue library. I may have overlooked the documentation, so I'm reaching out to inquire if anyone knows how to eliminate the sign-up functionality from the Vue Amplify Authenticator.
Component
https://i.sstatic.net/ZJmlj.png
<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
Experimented with the code provided by @asimpledevice without any 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>