dojap
Cookies in Phoenix LiveView not taken into account only after the second F5 refresh
I am experiencing a strange thing.
I have a JavaScript code that checks whether you have a certain cookie name in your cookies in your browser. If no, a message is shown. When you click on a button the cookie is created and on a browser refresh the message is hidden.
It’s a simple code , nothing tricky.
I am not sending anything to the server after the click, everything is loaded from templates just once when I enter the page in the browser.
The cookie is set and when I exit the browser and start it again Phoenix somehow doesn’t register it. I tried to refresh Firefox and Chrome via F5 once and nothing. Tried it again and then the cookie was somehow registered and the code behaved as it should. Then I can refresh as many times as I want and it works as supposed to. But in Chrome it is inconsistent more and sometimes it doesn’t show as it should. Firefox is more consistent it seems.
But if I end the browser session and close Firefox/Chrome and then reopen it and, again, I see what shouldn’t be there because Phoenix for some reason doesn’t accept the cookie.
I have checked if there is a bug in the JavaScript code with VS Code liveserver extension in a plain html file, I mean the same javascript code, and there it is working flawlesly. No refreshing, everythign as expected on the first go. I can close the browser and then it rememberes and loads everything as expected on the first try.
Any idea how to fix this issue, it’s driving me insane.
Marked As Solved
chrismccord
You need to use a phx-hook to look for the element since it may or may not exists at DOMContentLoaded time as LiveView is patching the DOM and controlling the lifecycle of elements, so try something like:
<div id="user-tips" phx-hook="Tips">
Drink more water and you will feel better.
<button onclick="hideTips()">Hide tips</button>
</div>
let Hooks = {}
Hooks.Tips = {
mounted(){
let showTips = !!Cookies.get("showTips")
alert(showTips)
if(showTips){
this.el.style.display = "block"
} else {
this.el.style.display = "none"
}
}
}
let liveSocket = new LiveSocket("/live", Socket, {
hooks: Hooks, params: {_csrf_token: csrfToken}
})
Also Liked
derek-zhou
Define safe. Cookie can be tampered with too.
derek-zhou
The only tamper-proof way of storing and retrieving a piece of info at the client side is to do it from the server side with crypto signing, like with JWT.
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
We build reliable cloud platforms for business-critical systems.
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.
Error tracking for Elixir devs who love to ship. Start your free account.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"