How to hide the Authentication toast in a vuejs app

[kjetilge]

I'm using the Amplify UI for auth in a Vue app. In the docs there is no description of how to customize or hide amplify-toast when auth errors occurs.

I expected to be able to do something like this:

<div class="hide">
    <amplify-toast slot="amplify-toast" />
</div>

Well, that doesn't work. Any suggestions ?

[elorzafe]

@kjetilge can you share your package.json?

[kjetilge]

package.json

{
  "name": "authtest",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@aws-amplify/ui-vue": "^0.2.7",
    "aws-amplify": "^3.0.17",
    "aws-sdk": "^2.701.0",
    "axios": "^0.19.2",
    "core-js": "^3.6.4",
    "gql": "^1.1.2",
    "graphql": "^15.0.0",
    "graphql-tag": "^2.10.3",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.3.0",
    "@vue/cli-plugin-eslint": "~4.3.0",
    "@vue/cli-service": "~4.3.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

[sammartinez]

Transferring this to our Amplify Docs repo as its a miss in documentation

[mauerbac]

Transferring back as a FR.

[Pablongo24]

Status? Can we use the Amplify Hub to prevent this event? If yes, documentation?

[heitorlessa]

I've just hit this - Any suggestions on how to move forward @mauerbac @sammartinez ?

[heitorlessa]

While I couldn't find a way to remove it completely it has a top 0 so it's now largely hidden under a top bar for a given view only - when using <amplify-authenticator>. It does not show when you're using separate web components amplify-sign-out.

As the new web components use the Toast component to signal authentication failures e.g. sign-in, sign-up, etc., I've dug into the source code and created my own notification to replace Toast using the undocumented "UI Auth" channel.

<script>
import { Hub } from 'aws-amplify'

const noAuthMessage = 'user is undefined'

...

created() {

    Hub.listen('UI Auth', (data) => {
      const event = data.payload?.event ?? ''
      const message = data.payload?.message ?? ''

      // Ignore message if customer hasn't attempted to login yet
      if (message === noAuthMessage) return

      if (event === 'ToastAuthError') {
        this.$q.notify(message)
      }
    })
}
</script>

Once I complete what I'm doing I'll make a PR to the docs to include other bits I missed too

[wlee221]

Hello all, #7129 added hideToast prop that will hide the toast notification:

<amplify-authenticator hide-toast></amplify-authenticator>

To see how you can create your own custom alert, see @Luke-Davies' example here #6479 (comment). We will close this issue as #6479 fixes this, but please feel free to ask any questions.

[github-actions]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.