Amplify-js: Vue Example

[nicokruger]

I know Vue is on the roadmap, but is there anyone out there that has an example, however dodgy, of using aws-amplify for auth in Vue?

Especially the withAuthenticator higher-order React component, has anyone tried to create a similair for Vue? I would love to help out, just not sure where to begin.

Thanks

[mlabieniec]

@nicokruger thanks for the feedback and offer to help! We actually have a vue sample using amplify pending release this sprint! It will be a separate repo similar to the [react](https://github.com/awslabs/aws-mobile-react-sample] sample. We are also working on angular and ionic ones. Vue is also one we want to build hoc type components for as well, would definitely welcome any guidance / feedback on those but yes a withAuthenticator type of offering would be basically would be the first logical option.

[ffxsam]

@nicokruger Hey Nico,

I'm using Amplify within a Vue app now. I'm setting it up so that it's tied in with Vuex, so I can dispatch actions to sign in, sign up, etc, and the user information is populated in Vuex.

[ffxsam]

@mlabieniec

Vue is also one we want to build hoc type components for as well, would definitely welcome any guidance / feedback on those

I haven't seen any implementation of HOCs in Vue that made sense. I'd almost be so bold as to say that HOCs are anti-pattern in Vue, since Vue has so many other ways of extending components with supplemental data or methods (e.g. mixins, Vuex, Vue plugins, etc) which are not available in React since React isn't a framework.

IMO, implementing user management in Vuex is a good approach. This way the entire app has easy access to user information such as email address, name, etc.

[nicokruger]

@ffxsam would you be able to share a simple example of what you're working with?

I think it would be really handy if we could all try and work together to come up with most "Vue-y" way to do amplify for the Vue ecosystem. Agreed that HOC are not really a pattern in Vue, but it will definitely be possible to recreate the functionality provided by it in the correct manner for the Vue world.

[nicokruger]

@mlabieniec thats excellent news! When does the sprint end? Would love to see what you guys have been working on :)

[ffxsam]

@nicokruger I'd be happy to, once I've finished it.. or at least gotten it to a point where the basics work. Eventually I want to make it handle the whole MFA process.

[ffxsam]

@nicokruger Hey, hope this helps! https://gist.github.com/ffxsam/7e40d313918625ec137b06f73fa7b291

It's very basic at the moment, but you can see generally how I'm structuring it.

Fetching user attributes in the getCurrentUserInfo step is important, IMO. It makes sure the user is actually valid. By default, Cognito will just give you the session tokens from HTML storage and let the user into your app.

[nicokruger]

awesome thanks @ffxsam!

This will be definitely help me get started. Let's see what we can get working and then compare notes when the amplify guys publish their Vue example to make sure that the vue ecosystem is just as well supported by amplify as react.

[nicokruger]

@mlabieniec Any update on the Vue sample?

[mlabieniec]

@nicokruger @ffxsam the Vue starter is live: https://GitHub.com/aws-samples/aws-amplify-vue

[ffxsam]

Hmm. There's a little too much magic involved. I also don't like having to use awsmobile. I would maybe recommend a more "pure" example.

[nicokruger]

Excellent thanks @mlabieniec !