DEV Community

How to Build Production-ready Vue Authentication

Nader Dabit on March 04, 2019

To view the final code for this project at any time, click here. In this tutorial, you'll learn how to build a real authentication flow into y...
Collapse
 
tmikaeld profile image
Mikael D

Can this be used without using AWS services?

Collapse
 
dabit3 profile image
Nader Dabit

Yes. You'd need to just replace the calls to signUp, confirmSignUp, & signIn with the methods in the library you're using. Also would need to update the listeners.

Collapse
 
dabit3 profile image
Nader Dabit

After looking over the code, you'd also need to replace the method in the routes file that checks the user's authentication state! Just FYI

Collapse
 
samcyn007 profile image
Jide (Mr Fantastic)

If I may ask which other library do this best. I'm no big fan of AWS services

Collapse
 
gmelidis profile image
Giannis Melidis

Great post, thanks! Is there any way that you are aware of, that I can customize amplify-authenticator, to take the fields from my cognito configuration (or any type of configuration) instead? Or is the only way to create my own components? I don't need a phone number for example.

Thanks again!

Collapse
 
dabit3 profile image
Nader Dabit

Hey Giannis, yes this is possible. Check out the documentation at aws-amplify.github.io/docs/js/auth... that will walk you through customizing the Authenticator component.

Collapse
 
dennisk profile image
Dennis Keirsgieter

Thanks for this! It's actually a topic i have to accomplish starting in a few weeks, good to have something summarized this detailed to get started with!

Collapse
 
dabit3 profile image
Nader Dabit

Great to hear! I'd be happy to answer any questions you may have. My twitter handle is @dabit3 , feel free to message me there any time.

Collapse
 
failpunk profile image
Justin Vencel

Great article. Always grateful to have someone else read through AWS documentation for me!

Collapse
 
twigman08 profile image
Chad Smith

Great post.
I am working on a base template with authentication in Vue. This gives me ideas on how to handle and implement some things.

Collapse
 
dabit3 profile image
Nader Dabit

Great to hear. If you ever have any questions, feel free to reach out I'd be happy to help.

Collapse
 
msegura profile image
Marc Segura

Great post! Is the

this.$router.push('/profile')

necessary in the signIn method of the SignIn.vue file ?

Collapse
 
ultradox profile image
Ultradox

Thanks for the splendid tutorial! It's been a great help :)

Collapse
 
dabit3 profile image
Nader Dabit

Thanks for the kind words, glad you liked it!

Collapse
 
logandonley profile image
Logan Donley

I've been searching far and wide to find a good "production ready" auth guide. Thank you so much!

Collapse
 
magiceyeman profile image
Iman Anvari

Hi Nader, great post, with the new changes in Amplify, what are you thoughts on using onAuthUIStateChange in the router? How would you put the logic in the navigation guard ?

Collapse
 
jmacfawn profile image
Joshua MacFawn

Just started using AWS Amplify in my Vue application and found this helpful. Thanks for posting!

Collapse
 
ayazbekuly profile image
Нуркасым T'SA

Great post, thanks! Could you tell me where the users who were registered with SignUp are stored? I not found them in my console

Collapse
 
codermeisje profile image
coder-meisje

Awesome post - thanks for this!
Just a little note - src/components/App.vue should actually be located as src/App.vue and not in the components folder.

Collapse
 
oscarnevarezleal profile image
Oscar Nevarez

Is it possible to have a login page outside of the amplify project and handle the authentication after a redirect now on the amplify project? I got the auth code back but I don't know what's next.

Collapse
 
hungle965 profile image
hungle965

<3 thanks bro

Collapse
 
alexisespinosa profile image
Alexis Espinosa

Thanks! I starting a project with Vue and needed to add auth with Cognito and your article help me order all stuff in my head.