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
Marked As Solved
jstlroot
Oh my god I found it…
I knew it was gonna be stupid.
put_resp_cookie(conn, key, value, opts \\ [])
Options
:domain- the domain the cookie applies to:max_age- the cookie max-age, in seconds. Providing a value for this option will set both the max-age and expires cookie attributes:path- the path the cookie applies to:http_only- when false, the cookie is accessible beyond http:secure- if the cookie must be sent only over https. Defaults to true when the connection is https:extra- string to append to cookie. Use this to take advantage of non-standard cookie attributes.
I had :secure forced 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
If an attacker can run JavaScript on your website, they can retrieve all the data you’ve stored in local storage and send it off to their own domain. This means anything sensitive you’ve got in local storage (like a user’s session data) can be compromised.
If an attacker can get a copy of your JWT, they can make requests to the website on your behalf and you will never know. Treat your JWTs like you would a credit card number or password: don’t ever store them in 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…
Popular in Questions
Other popular 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
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance
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.
Real-time error tracking, performance insights, and observability for devs.
Develop your skills with books, videos, and courses.
Producing high quality Elixir screencasts since 2017.
Enabling companies to succeed by building software people love.
Courses that'll move you from confusion to "Aha, now I get it!"