Checking username availability in client side using Phoenix Channel?

Hi!
My project’s backend is graphQL Phoenix project and frontend is react native.
I am trying to implement checking username availability in backend from client side when users try to sign up.
So it should happens when users start typing in the input field like in function onChangeText.
But I haven’t done this before.
Can you give me an idea or any docs for this?
I think I need to use some of these.

  • Channel
  • Subscriptions in Graphql(?)
    -…

Your method may expose to a potential hacker what usernames are already taken and try to find there passwords and steal accounts.
Have you planned a number of tries for a username to be available?

What does having a websocket enable that they couldn’t already do by submitting the form?

So how would you go securing this?

Because i would block the user after the 3 attempt and make him wait for 5 minutes. and then make the time longer if the same scenario continues

Does it have to be a websocket/channel? Can you just use debounce on your javascript (so it’s not per keypress, set the timeout to like 100ms-1 second or whatever feels natural) then do a normal GraphQL request?

I’ve done this in the past to great effect, it feels super natural to the user with debounce and doesn’t send so many requests per keystroke.

3 Likes