svilen
Expired token for WS connection, how to handle on the front-end?
Hi everyone!
A colleague of mine asked this question on StackOverflow, but since he still hasn’t got a solution, I decided to post it here on his behalf:
In a nutshell:
- Logged-in user visits a page, WebSocket connection is established using a JWT token (user has completed login);
- Users stays on page for ages, token expires eventually;
- WebSocket connection no longer valid, so it starts rejecting client’s attempts (e.g.
[info] Replied MyAppWeb.UserSocket :error); - Front-end keeps re-connecting but unless the user refresh the page and logs in again, we have lost connection to WS
On the Phoenix side, I can see we can return only :error for connect/2 (I was hoping for a tuple with an addition message, but no luck) so I’m not sure if there is a way to let the client know what is the error? If the client knows that the error is, say “token expired”, then we can pop up a message using JS to tell the user that he/she needs to re-authenticate. Otherwise, if it is a network connection issue or something else, the current behaviour to keep reconnecting makes sense.
Any ideas are appreciated. Thanks!
Most Liked
outlog
I would not trust navigator.online I believe those things are not reliable under various circumstances (eg wifi up - but routing down, flaky cell connection etc etc.)
guess that is an additional advantage to the ajax request method.. since a timeout or any error (anything but 20x OK, or 401) means you are offline..
(btw remembered why I do the auth check in an ajax call - it’s because I can server side invalidate tokens (guardian_db))
So you could just verify token client side - but if you also want a reliable online/offline check I think the ajax call solves both issues in one go..
mikemccall
I don’t see a way to return a message in {:error, message} in phoenix, it expects {:ok, socket} or :error.
If you’re using a jwt you can check if it’s expired on the frontend. Where to do the check depends on your app. But you can always add the onError callback to the socket.
socket.onError((error) => {
// check jwt expiration and redirect to login
// or
// indicate to the user they are "offline"
})
mikemccall
Yeah, it is pretty generic. There are a few jwt libraries out there that would help. Visit https://jwt.io/ and see which one fits your use case. Pretty much any of them from Auth0 are solid. I’ve had success with jsonwebtoken.
Or as @outlog mentioned you could make a request on error and let the server do that work.
Popular in Questions
Other popular topics
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










