Ask A Question

Notifications

You’re not receiving notifications from this thread.

VueJS JWT Auth with Rails APIs and LocalStorage Discussion

Great video, Chris!

I'm really enjoying the whole API series and I'm excited to see more Vue!

Thanks Chris!

Reply

Lots more Vue coming, I really really enjoy using it on the frontend. It feels refreshing to work with for once.

Reply

Great job as always.
The only piece I missed actually was ES2015 syntax.
=)

Reply

One step at a time. ;-)

Reply

Thanks Chris, awesome video!

Reply

Why not hook into the new non-jQuery rails UJS driver for the submit handling?

Reply

Primarily because if you're already using a frontend framework you'll want to keep all the Javascript contained within the component. If you use the JS responses from UJS requests, you're not splitting your JS across two things (the component code and the rails response) and it's no longer self contained. The component should be the one changing state to keep it organized.

You can still do that if you want to, I just wouldn't recommend it because you might as well just use UJS only and no frontend framework then.

Reply

Great idea to combine Rails Api + VueJs..
Can you give me an idea how to 'logout'?

Something like... localStorage.removeItem?
Thanks Chris

Reply

Logout is as simple as deleting the token from localStorage and the Vue state. Ideally, you'll want expirations on your tokens ideally so that they can be invalidated after a time. This is the same thing that Rails session cookies do for logout as well so it's nice and similar.

Reply

Are you planning to do any react front end sessions? I know you're tired of authentication, but I'd love to see you do some work in react so that I can get a feel for how to use it with rails in the back end. I'm getting a lot out of this series. Something is preventing me from commenting on episode 6, but I'd love to learn more about AMS too

Reply

An other way to prevent default when clicking on the submit button is: <button v-on:click.prevent="submit" [...]="" this="" takes="" benefit="" from="" some="" of="" vue="" features="">

Reply

Definitely a little late for this, but how are routes handled? Vue (or Vuex) would handle them I suppose, right?

For example: I login, get redirected to a given page. I think that'd be Vuex, but I read that (for some reason) Rails should provide matching routes. I haven't found enough implementations on Rails APIs with Vue to be certain though.

Reply

All the routes are handled by Rails in these videos. Vue is just pointing to the Rails routes to submit things to the server.

Reply

Hello Chris. Isn't it a bad idea to store session tokens in localStorage, security-wise? They become vulnerable to XSS. Probably a secure cookie with httpOnly it's better.
https://medium.com/@yuliaoletskaya/can-jwt-be-used-for-sessions-4164d124fe23

Reply

Yeah, and I recommend using cookie auth for in-browser API authentication. You might as well take full advantage of the browser's security if you've got it.

Reply

If accessing an API from an embedded app (eg a react widget) you can't use cookies any more because browsers are blocking 3rd party cookies by default now. What do you recommend in those circumstances?

Reply

Could you explain this a bit more @chirs ?

"and I recommend using cookie auth for in-browser API authentication"

Isn't the video explaining how to use JWT Tokens for auth in-browser?

Reply

chris, I need your help about actioncable and redis.
I signedup here to talk with you.
I read your good post on actioncable.
I am sorry to bother you.
How can I send you my scripts to check out.
I hired one to make website.
But it does not load realtime data.
I think actioncable websocket is not working.
Can you help me ?
my email is frontnic@gmail.com.
thank you

Reply

Really enjoy your courses Chris!

When a full course VueJS v2 + Rails 6? :-D

Reply
Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 85,376+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.