How do I auth user with username or email?

[nicitaacom]

I have this form for login

In my form I have field 'email or username' but now I able to login with email - How do I enable login with email or username?
docs link or step by step guide will be preciate

I use - React + Vite + TypeScript + tailwind + zustand + supabase

Here is a bit of code for my login function

async function login(e: React.FormEvent) {
    e.preventDefault()
    if (email && password) {
    try {
        const response = await supabase.auth.signInWithPassword({ email: email, password: password })
//other logic for login like set profile picture url
  }
}

[GaryAustin1]

There is no username login. Username is not a standard field in Supabase auth. I commented on your discord post with an idea using an rpc call to a postgres function with username and password to get the email and then login. Not the greatest solution, but not sure if anyone has a better way.

[nicitaacom]

Anyway its increases UX that's why I relly preciate your answer and will do my best

[nicitaacom]

I did it like so:

I use React + Vite + TypeScript + tailwind + zustand + supabase

async function login(e: React.FormEvent) {
    e.preventDefault()
    if (emailOrUsername && password) {
      const isEmail = emailOrUsername.includes("@")

      if (isEmail) {
        try {
          const response = await supabase.auth.signInWithPassword({ email: emailOrUsername, password: password })
          if (response.error) throw response.error

          if (response.data.user) {
            userStore.authUser(response.data.user.id)
            navigate(`/`, { replace: true })
            setSuccess("Success!")
          }
        } catch (error) {
          console.log(58, "error - ", error)
          setError("Error!")
        }
      } else {
        try {
          const { data, error } = await supabase.from("users").select("email").eq("username", emailOrUsername)
          if (error) throw error
          if (data) {
            const response = await supabase.auth.signInWithPassword({ email: data[0].email, password: password })
            if (response.error) throw response.error

            if (response.data.user) {
              userStore.authUser(response.data.user.id)
              setSuccess("You logged in!")
            } else {
              setError("user not found - made a typo?")
            }
          } else throw "LoginPage.tsx - no data"
        } catch (error) {
          console.error(78, "login - ", error)
          setError("Error")
        }
      }
    }
  }

Explanations

I have Input and state for this input
If I have @ in my input with value={usmailOrUsername}
I do manipulations for login as usual
If its not I find in my table "users" column "email" that equals column "username" with row emailOrUsername (here is I know that in input no @ that's why its username)

Of course when I register new user I insert data in 3 columns

const { error } = await supabase
          .from("users")
          .insert({ id: response.data.user.id, username: usernameValue, email: email })
        if (error) throw error

Thank you @GaryAustin1 for idea how do I realize it

[nicitaacom]

I agree with that, but then the email is still passed to the frontend to authenticate, right?

Of course you enter email on frontend part (in input field)

[Patrity]

Right.... so if I wanted to find out what your email was, I could just enter nicitaacom and a random password I know will fail, then wait for your server-side response to come back and I have your email.
Email addresses should be protected unless users explicitly want them shared.

[nicitaacom]

Don't get response from server about email (otherwise send evidance how do you get my email)
You just get response AuthError or User

Checking is username match some email in DB happening in server action or API route - so you don't have access to data on a server side

[Patrity]

Right but the authentication call to supabase.auth.signInWithPassword has to take place on the client.
This diagram maybe explains the flow better. If you can provide a link to where you have this deployed, along with a valid username, or better yet a code sample, I could show you.
Otherwise if you are sure that this is not a possibility, I would love to see how, because I would really love username sign ins

[nicitaacom]

1. On client you provide email or username (check if .includes("@") - then it email - otherwise its username - based on that you userstand what you need to do)
2. Then you may use redis (to rate limit requests from some IP) - I think Supabase have build in restrictions of ammount of tries to login
3. Then you watch video - I explained that it happens on server - so you may throw message like "Incorrect email or password" or if you want "User with this username doesn't exist" (its on your choise but I prefer second variant)

username-auth-explanation.mp4