Last active
August 18, 2021 12:49
-
-
Save dabit3/dce3abb42d209a5d735af6f007af7d7a to your computer and use it in GitHub Desktop.
AWS Amplify example - Vue auth
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <div id="app"> | |
| <div v-if="!signedIn"> | |
| <amplify-authenticator></amplify-authenticator> | |
| </div> | |
| <div v-if="signedIn"> | |
| <amplify-sign-out class="signout" v-bind:signOutOptions="signOutOptions"></amplify-sign-out> | |
| <img alt="Vue logo" src="./assets/logo.png"> | |
| <HelloWorld msg="Welcome to Your Vue.js App"/> | |
| <!-- <button v-on:click="signOut">Sign Out</button> --> | |
| </div> | |
| </div> | |
| </template> | |
| <script> | |
| import HelloWorld from './components/HelloWorld.vue' | |
| import { AmplifyEventBus, components } from 'aws-amplify-vue' | |
| import { Auth } from 'aws-amplify' | |
| import * as AmplifyVue from 'aws-amplify-vue'; | |
| const signOutOptions = { | |
| msg: 'You are currently signed in.', // type: string, default: null | |
| signOutButton: 'Sign Out', // type: string, default: 'Sign Out', required: false | |
| } | |
| export default { | |
| name: 'app', | |
| components: { | |
| components, | |
| HelloWorld | |
| }, | |
| async beforeCreate() { | |
| try { | |
| const user = await Auth.currentAuthenticatedUser() | |
| this.signedIn = true | |
| } catch (err) { | |
| this.signedIn = false | |
| } | |
| AmplifyEventBus.$on('authState', info => { | |
| if (info === 'signedIn') { | |
| this.signedIn = true | |
| } else { | |
| this.signedIn = false | |
| } | |
| }); | |
| }, | |
| // methods: { | |
| // signOut: async function () { | |
| // await Auth.signOut() | |
| // this.signedIn = false | |
| // console.log('signed out!') | |
| // } | |
| // }, | |
| data () { | |
| return { | |
| signOutOptions, | |
| signedIn: false | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| body { | |
| margin: 0 | |
| } | |
| #app { | |
| font-family: 'Avenir', Helvetica, Arial, sans-serif; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| text-align: center; | |
| color: #2c3e50; | |
| } | |
| .signout { | |
| background-color: #ededed; | |
| margin: 0; | |
| padding: 11px 0px 1px; | |
| } | |
| </style> |
@armedoctopus
Seems like the prop signOutoptions has been renamed to signOutConfig. Example:
<amplify-sign-out :signOutConfig="{msg: 'You are currently signed in.',signOutButton: 'Sign Out yo!'}"></amplify-sign-out>
👍
cool stuff 👍
thanks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Does this work? the sytling and signOutoptions are not showing up on my amplify signout button
seems like v-bind:signOutOptions is not doing anything