Username Collision in OAuth Sign-in Process

[yntpdotme]

Current Behaviour:

When users sign in with Google OAuth, the system creates a username by converting their display name to lowercase.

Since the username field in our database has a unique constraint, this causes issues

• Multiple users have the same display name
• New users with the same display name cannot sign in

Root Cause

• Google OAuth returns display names which aren't guaranteed to be unique
• Our current implementation doesn't handle username collisions
• Database unique constraint fails for duplicate usernames

Solution 1

We can use email prefix as username for Google OAuth users since:

• Email addresses are guaranteed to be unique

• Matches common platform conventions

  // auth.ts
  const username = account.provider === "github"
    ? (profile?.login as string)
    : user.email!.split('@')[0].trim(); // e.g., "akashkadlag" from "akashkadlag@gmail.com"

Potential Issue

• A critical collision scenario exists between OAuth and Email-Password authentication:

  // Problematic scenario
  Email-Password User: username = "abcd"
  Google OAuth User: email = "abcd@gmail.com" -> username = "abcd" // Collision!

Solution 2

Add OAuth Provider Prefix

// auth.ts
const username = account.provider === "github"
  ? (`github_${profile?.login}` as string)
  : (`google_${user.email!.split('@')[0]}` as string) // e.g google_abcd

P.S.: Are there better approaches to handle this username collision issue while maintaining uniqueness and usability? Would love to hear your thoughts!

[yntpdotme]

@sujatagunale @adrianhajdin

I handle this edge case in api/signin-with-oauth route with generateUniqueUsername utility.

const generateUniqueUsername = async (
  baseUsername: string,
  session: mongoose.ClientSession
): Promise<string> => {
  const username = slugify(baseUsername, {
    lower: true,
    strict: true,
    trim: true,
  });
  const exists = await User.findOne({username}).session(session);
  if (!exists) {
    return slugify(username, {
      lower: true,
      strict: true,
      trim: true,
    });
  }

  let counter = 1;
  while (true) {
    const newUsername = slugify(`${baseUsername}${counter}`, {
      lower: true,
      strict: true,
      trim: true,
    });
    const exists = await User.findOne({username: newUsername}).session(session);
    if (!exists) return newUsername;
    counter++;
  }
};

export const POST = async (request: NextRequest) => {
  let session: mongoose.ClientSession | null = null;

  try {
    const body = await request.json();

    const {success, error, data} = SignInWithOAuthSchema.safeParse(body);
    if (!success) throw new ValidationError(error.flatten().fieldErrors);

    const {provider, providerAccountId, user} = data;

    await connectDB();
    session = await mongoose.startSession();
    session?.startTransaction();

    let existingUser = await User.findOne({email: user.email}).session(session);

    if (!existingUser) {
      const username = await generateUniqueUsername(user.username, session);

      [existingUser] = await User.create(
        [
          {
            name: user.name,
            username,
            email: user.email,
            image: user.image,
          },
        ],
        {session}
      );
    } else {
      const updatedData: {name?: string; image?: string} = {};

      if (existingUser.name !== user.name) updatedData.name = user.name;
      if (existingUser.image !== user.image) updatedData.image = user.image;

      if (Object.keys(updatedData).length > 0) {
        await User.updateOne(
          {_id: existingUser._id},
          {$set: updatedData}
        ).session(session);
      }
    }

    const existingAccount = await Account.findOne({
      userId: existingUser._id,
      provider,
      providerAccountId,
    }).session(session);

    if (!existingAccount) {
      await Account.create(
        [
          {
            userId: existingUser._id,
            name: user.name,
            image: user.image,
            provider,
            providerAccountId,
          },
        ],
        {session}
      );
    }

    await session.commitTransaction();

    return NextResponse.json({success: true});
  } catch (error: unknown) {
    await session?.abortTransaction();
    return handleError(error, "api") as APIErrorResponse;
  } finally {
    session?.endSession();
  }
};