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.
localStorage is not a safe storage. Can’t use that. This hideTips example is just an example, I have more sensitive information stored there in real app.
Still, I think there is some weird misunderstanding.
The cookies are stored in the browser, doing a simple javascript check should be done on the user’s client too. There is no need for a server to do any checking in this case, Jsut show or hide some div based on your cookies. What is so hard about that?
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.
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}
})
Do I need to put the Hook.Tips code inside assets/js/app.js file? Or can I put it in my def render function in my component .ex file (live/components/tips_component.ex)?
EDIT: Ok, so I find out that I have to put an data attribute to my existing div and that is then .Tips in Hooks.Tips and this.el later as well. I will try it now and let you know if it works.
Perhaps it would be useful to have some simple examples in the docs for this.