jstlroot
Sending cookies for stateless SPA authentication using JWT
Hello y’all!
I’m very new to the Elixir/Phoenix beauty but very excited to learn more!
I’m building a Phoenix json API with a (separate) Vue.js SPA. I’m at the point where I need to build a secured authentication system as my app will be used in production eventually.
I read a lot on the subject (spent 2 full days on this alone) and I like the idea of restful stateless sessions using JWT. My main concern is that although it seems to be the preferred approach, sending JWT directly as a json response and storing it in HTML5 local storage is very unsafe and shouldn’t be done at all.
This post enlightened me a lot on the subject: Randall Degges - Please Stop Using Local Storage
Now, the best approach seems to be using http only cookies. The post I found the most interesting on the subject and close to my needs is this one: https://medium.com/lightrail/getting-token-authentication-right-in-a-stateless-single-page-application-57d0c6474e3
I’m sharing those links should anyone be interested in reading them don’t spend 2 days searching for them 
Now my question : Is there (I’m sure there is) a way to send, as the last post I shared explains, 2 cookies for user authentication/session, without storing the session on the server?
I have a working Guardian setup which generates JWT successfully and sends it to my client side in a response (the approach I’d like to avoid using). I just need to find a way to
- Split the JWT
- Send the 2 cookies to the client, one of which should be http only
I tried to find a solution in the online documentations and can’t seem to find the best way to do it. Speaking of documentation, is there a place where Phoenix 1.3 is fully documented? Hexdocs always seems incomplete and, in this case, doesn’t seem to cover sessions. Overview — Phoenix v1.8.8 The Programming Phoenix 1.0 book doesn’t help much either.
Thank’s for any help! <3
Trending in Questions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Build Elixir applications with speed and confidence.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #elixirconf-us
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #performance
- #security
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Practical resources that improve the lives of professional developers.
Bringing learning, work and compliance together since 1987.
Enabling companies to succeed by building software people love.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Marked As Solved
jstlroot
Oh my god I found it…
I knew it was gonna be stupid.
put_resp_cookie(conn, key, value, opts \\ [])I had
:secureforced to true but I’m not using HTTPS in my dev environment.I hope this discussion will help others determine how they want to implement token authentification with Phoenix and Vue.js
Thank you all again for your time and support <3
Also Liked
jstlroot
Of course! I’m no expert but what I learned from reading articles and blog posts for 3 days is that giving javascript access to an authentication token (jwt or phoenix) is never a good idea because of cross-site scripting attacks.
To quote this article: Randall Degges - Please Stop Using Local Storage
It seems like using the request header body to send the token also gives javascript access to it. There might be a way to avoid this that I don’t know of? If so, it could be a solution.
HttpOnly cookies are isolated from javascript and cannot be read by it, making authentication token stealing XSS attacks more complex, if not impossible. Cookies are open to other types of attacks but this is mitigated by the use of HTTPS all over. At least that’s what I understood.
Maybe there are some things I don’t quite understand yet and if you feel like it’s the case, please point it out so I can avoid doing dangerous mistakes.
OvermindDL1
Very very true. Plus if you encode, say, a JWT token into a web page (as is common with ‘any’ token for phoenix websockets sadly) then a page can quite literally just read another page and parse out information from it using your auth’d user (there are hazards they have to work around to do that, but there are still ways).
kokolegorille
You might have missed this post
It is possible to do the same as JWT with Phoenix.Token, but with a lighter token.
I am doing the same, although it is with React and Redux. I am storing a Phoenix.Token inside Redux application store. This token allows me to access private routes, and also secure my websockets.
So I would store the token inside the Vue store manager (Vuex?)
I have been doing the same with swift, and there is a secure KeyChain storage where to put tokens. But there is no real equivalent in js world…
Last Post!
jstlroot
Yep, makes sense.
Your idea of making distinction between original and refreshed tokens is interesting, thank you for sharing it!
Don’t hesitate to poke me as needed or to share any other idea.