Disable case sensitivity on username register/login?

So I can enforce my user that is registering to use a lowercase username by doing the following:

              <SignupForm
                additionalFields={(form, state) => {
                  return (
                    <>
                      <FormItemGroup>
                        <div className="mb-4">
                          <label className="block text-md font-bold">
                            Username
                          </label>
                          <label className="block text-sm font-light mb-2">
                            You'll use this when logging in.
                          </label>
                          <input
                            {...form.register("username")}
                            className="input w-full mb-2"
                            id="username"
                            onChange={(e) => {
                              e.target.value = e.target.value.toLowerCase();
                              form.register("username").onChange(e);
                            }}
                          />

              <SignupForm
                additionalFields={(form, state) => {
                  return (
                    <>
                      <FormItemGroup>
                        <div className="mb-4">
                          <label className="block text-md font-bold">
                            Username
                          </label>
                          <label className="block text-sm font-light mb-2">
                            You'll use this when logging in.
                          </label>
                          <input
                            {...form.register("username")}
                            className="input w-full mb-2"
                            id="username"
                            onChange={(e) => {
                              e.target.value = e.target.value.toLowerCase();
                              form.register("username").onChange(e);
                            }}
                          />

However, as there is no additionalFields type of option on the <LoginForm> component, I am stumped as to how to do something similar. In an ideal world, I'd just lowercase it all on the server side... but it kind of defeats the point of using the built in batteries included auth, right? Any way I can do this without running with my own auth? Cheers

10 Replies

Vinny (@Wasp)•5mo ago

You’d wanna do this in the serverside sign up form customization https://wasp-lang.dev/docs/auth/overview#customizing-the-signup-process

Using Auth | Wasp

Auth is an essential piece of any serious application. Coincidentally, Wasp provides authentication and authorization support out of the box.

Vinny (@Wasp)•5mo ago

But that’s only if you’re adding a custom username field to the email/ password method. If you want to create a custom signup flow for the username & password method you’ll have to create your own signup component and signup action where you override the default validations https://wasp-lang.dev/docs/auth/overview#customizing-validations

Using Auth | Wasp

Auth is an essential piece of any serious application. Coincidentally, Wasp provides authentication and authorization support out of the box.

Vinny (@Wasp)•5mo ago

Not as easy as using AuthUi but still way easier than rolling your own Auth

martinsos•5mo ago

We however do recommend using email/pass for production use, as username/pass is very basic. Also, we will be releasing new version of Wasp in a couple of weeks, 0.12, and it will have big Auth overhaul. Among the changes, it will also bring case insensitive username out of the box.

KYAN1TE•5mo ago

Yeah I ran in to this whilst switching over to email/password auth, but I still let my user maintain a username (e.g. think twitter login). Out of interest, will it be difficult to migrate from the current version to 0.12? I think the real long term solution to what I'm experiencing is the auth overhaul you mention.

Vinny (@Wasp)•5mo ago

yeah you'd proabbyl want to follow this guide then https://wasp-lang.dev/docs/auth/overview#customizing-the-signup-process add a username field to your client-side form and do something like this

import { defineAdditionalSignupFields } from '@wasp/auth/index.js'

function isLowerCase(str) {
  return str === str.toLowerCase();
}

export const fields = defineAdditionalSignupFields({
  username: async (data) => {
    const username = data.username
    if (!isLowerCase(username) {
      throw new Error('entire username must be lowercase')
    }
    if (username.length < 5) {
      throw new Error('Username must be at least 5 characters long')
    }
    return username
  },
})

import { defineAdditionalSignupFields } from '@wasp/auth/index.js'

function isLowerCase(str) {
  return str === str.toLowerCase();
}

export const fields = defineAdditionalSignupFields({
  username: async (data) => {
    const username = data.username
    if (!isLowerCase(username) {
      throw new Error('entire username must be lowercase')
    }
    if (username.length < 5) {
      throw new Error('Username must be at least 5 characters long')
    }
    return username
  },
})

KYAN1TE•5mo ago

Yep I have done something similar to this, but I wouldn't say throwing an error if the username isn't lowercase is a great user experience! I'd much rather let the user have case insensitivity at both signup & login if it was username/password login for example

Vinny (@Wasp)•5mo ago

yeah sounds like a good idea

martinsos•5mo ago

THere will be some steps needed to do, certainly biggest change so far in Wasp's history, but we will provide migration instructions / scripts so it shouldn't be that hard, and we are also here to help if needed! Also, since you already moved from username/pass to email, that will make your life easier for you.

KYAN1TE•5mo ago

Brilliant, looking forward to it!

Gaming

Programming

Disable case sensitivity on username register/login?