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

[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

[therealsujitk]

I've been looking for a solution to this as well, and @Patrity is right; exposing user emails isn't the right approach.

1. Client-side Email Exposure: If the client sends a request to Supabase with the username and gets the email in response, this would expose emails in the browser. Anyone could use a username to retrieve the associated email or even script multiple requests to harvest emails.
2. Server-side Request with ANON_KEY: @nicitaacom, I understand you're suggesting making the email fetching request server-side with Next.js or a similar library supporting SSR. While this is slightly safer since the email doesn't reach the browser, it could still be vulnerable if the ANON_KEY is used. An attacker could potentially extract the ANON_KEY from your site and use it to make email fetch requests from their own Supabase client.

---

Alternative Approaches

1. Server-side Request with SERVICE_KEY: Create a public.users table containing only usernames, with a foreign key reference to the auth.users table. This setup ensures that emails cannot be fetched using the ANON_KEY. You will then need to Implement a server-side endpoint that takes in a username and password, fetches the email using the SERVICE_KEY, uses that email to authenticate the user, all on the server side.
2. Deno Edge Function: Use a Deno edge function to perform the same task as the server-side approach. This method is particularly useful if you cannot execute server-side code directly.

Important

Remember, the SERVICE_KEY should never be exposed, so the requests involving it MUST be made on the server side.

In both methods, you need to return the session to the client. On the client side, you'll then need to set the Supabase session using the response.

This is what I could think of, and all this is just theoretical, I haven't tried implementing it yet. I'll be sure to add some code here if I do implement it or think of a better solution. If anyone else has other ideas, I'd love to hear them too.

[therealsujitk]

I wrote a detailed guide on how to do this securely --> https://stackoverflow.com/questions/78550922/how-do-i-authorise-users-with-username-in-supabase

[nicitaacom]

const supabaseClient

I would name it const supabaseAdmin becuase it has service role key

So you will understand that supabaseClient its SDK with anon key and supabaseAdmin its supabase SDK with service role key

[nicitaacom]

Also auth will now work if you don't use headers from next.js

I mean if you will use supabaseClient or supabaseAdmin it will not work because you need to set cookie

I think with code will be more understandable

This will work I mean set cookies

import { createServerComponentClient } from "@supabase/auth-helpers-nextjs"
import { cookies } from "next/headers"
import { Database } from "@/interfaces/types_db"

const supabaseServer = () => {
  cookies().getAll() // Keep cookies in the JS execution context for Next.js build
  return createServerComponentClient<Database>({ cookies })
}

export default supabaseServer

This will not work (because it don't set cookies)

import { Database } from "@/interfaces/types_db"
import { createClient } from "@supabase/supabase-js"

export const supabaseAdmin = createClient<Database>(
  process.env.NEXT_PUBLIC_SUPABASE_URL,
  process.env.SUPABASE_SERVICE_ROLE_KEY,
)

export default supabaseAdmin

[therealsujitk]

@nicitaacom oh yeah you're right, I didn't need to add the header. Also, the code I've written is a Deno edge function, so it isn't dependent on any SSR framework, It can by used anywhere.