Devise API Authentication With Vue JS | Ruby on Rails 7 Tutorial

This Ruby on Rails 7 tutorial will teach you how to create a Devise API and login to it from JavaScript using a Vue JS frontend with a Vuex store. Because a Devise API Authentication guide alone would take 20 minutes, and the Vue JS project would take another 60, I've heavily edited this video to make it more digestible.

If needed, please pause and use the timestamps to jump around.

Join this channel to help support these videos:

Repository for this video:

Styles used in session manager gist:

Enable Session Storage Rails 7:

Timestamps
0:00 Devise API With Vue JS Demo
0:22 Creating the Devise API
1:30 Devise JWT Tutorial
3:30 Devise API JWT Controllers for Sessions and Registrations
7:53 Devise JWT Secret Key
8:48 Routing for Devise API
9:53 Configure Session Store in Rails 7
11:23 Vue JS User Login Application
12:20 Vuex Store for User Login
19:37 Devise API and Vue JS Stay Logged in on Refresh with JWT
21:05 Vue JS User Account Session Manager Component
27:35 Fixing Mutations using Payload instead of Data
27:51 Putting it all together.

Follow me on social media:

devise jwt rails api
#Deanin #Software #Programming

[Deanin]

Edit: Looks like there was an issue with the members controller. def get_user_from_api_token should have been def get_user_from_token.

It's finally here. This was a monstrosity to learn how to do, please share it with everyone it might help. If you want a React JS version, leave a comment so I know there's demand please. :)
If you have any questions, I'll try to address them as they come up. I know first hand how much of a headache this is to understand. 😅

I hope this helps!

[MrSpoomples]

Thank you. This finally helped get Devise and Devise JWT working with a regular app AND an api for a mobile app.

[susanperkins]

Good tutorial, very clear. I'd like to see the subsequent turtorial for the next React components you suggested at the end

[Jambajakumba]

You've just earned a sub. Finally a video that actually helps with Devise authentication. Thanks man

[jordanfox]

This is super useful content. Please keep these coming

[jamesmuriuki]

I had some issues with DELETE(sign_out) and I fixed that by making this change

log_out_success && return if !current_user -> I added a bang in front of current user method to negate it to true.

In general, this was a great tutorial as it was easy to pick up Devise concepts pretty quickly. Highly recommend!

[auranode]

Thank you, you are perfect teacher!!!!

[yaskygaming]

Hi

Thanks for the blog!!!

I was thinking, instead of Postman — which you said was cumbersome for this tutorial — you could use tests instead. Tests allow you to send requests to your endpoint. Since it's all internal, you don't have to configure anything. Also, you can leverage Rail's internal hash-to-json conversion to write easier tests.

If you go the test route though, remember to add `as: :json` to your requests; else you'd have to include ActionController::Flash to your application controller — or some common root for all your Devise controllers.

Happy coding!

[programmingcheatsheet]

I gave this a thumbs up because after many hours of headache it got me to where I neeeded to go using React/Redux on the front end, but I wish you would explain more. A lot of the times you're just reading the code "Here we're gonna pass in the continuumTransfunctioner in as an argument and then deconstruct the mariachiBandInitializer". That sounds great, but it doesnt mean anything. What do the continuumTransfunctioner and the mariachiBandInitializer actually do?

[fuwbtzc]

Hello sir, thank you for this video. i'd like to ask why is it needed to singularize the naming for the JWTDenyList?

[KirbyPooh]

I wanted to add additional things to the user login, such as "email, password, city". where do I change that in the rails section?

[waldke]

would there be any difference to the code if I chose postgres instead of sqlite?

[peterphilips]

Great tut! Is it a best/common practice to do this deny list approach to invalidate tokens? My (naive) understanding of JWTs is that they are supposed to be stateless so you don't store them on the server. By storing a deny list on the server, you are now creating state on the server and just inverted the concern of how state is stored (logged in state vs logged out state).

[Musenoss]

Hi thanks, that was very helpful, but i think this line is missing: in devise initializers, config.navigational_formats = [:json], without that when it have an unauthorised error, it redirects to the /users/sign_in route

[scorchsc]

Hello, may I ask what and wher is the payload coming from?

[zlatansadibasic]

Do you have a similar tutorial but with React as the FE?

[giordanodiaz]

Hello thanks for the tutorial, can you do the same with react instead of vue?

[mutebiugofficial]

Hi boss 🎉!. Suppose i wanted to store the current cart_id such that a user can add products to that same cart. How can i generate a token with the cart id and hiw how to get that id such that i can set it in other controllers..

[theflowwizard]

One thing I didn't get though is why you had to rename the jwt_denylists table to jwt_denylist

[iztimetocode]

Hey man, nice tutorial, but how can I update user information with this app?