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)
Vinny (@Wasp)10mo 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)
Vinny (@Wasp)10mo 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)
Vinny (@Wasp)10mo ago
Not as easy as using AuthUi but still way easier than rolling your own Auth
martinsos
martinsos10mo 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
KYAN1TE10mo 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)
Vinny (@Wasp)10mo 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
KYAN1TE10mo 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)
Vinny (@Wasp)10mo ago
yeah sounds like a good idea
martinsos
martinsos10mo 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
KYAN1TE10mo ago
Brilliant, looking forward to it!
Want results from more Discord servers?
Add your server