Customizing the SignInPage component.

[KnightTheLion]

Hey guys! I am currently using MUI's Toolpad Core as my frontend UI inside of an electron app. I am creating a employee management dashboard that will have locally stored data inside of a secure directory. This is to be able to distribute the electron app to companies, agencies, ect... that would prefer to have employee management offline so that all security is kept in house via their IT department. The IT department would keep the data that is being called on inside of a shared drive that all employees have a connection to via their internal network.

That being said, I started with Firebase Auth to use the SignInPage component, but later decided to keep it all offline, so that the companies can manage user CRUD. So, the data is being stored in a secure directory that had a user model of:
[
{
"username": "username",
"hashedPassword": "buncha_controlled_chaos",
"uid": "buncha_random_chaos_generated_on_user_creation"
}
]

So! To the point! In order to use usernames for login, you have to pass the slotProps to the SignInPage component. It can be overridden with standard input and form properties like such:

<SignInPage
slotProps={{
emailField: {
type: 'text',
placeholder: 'Username',
label: 'Username',
id: 'username',
autoComplete: 'username',
name: 'username'
}
}}

I just wanted to share this in case anyone else was looking for something similar or just to override certain properties of the form or inputs.

I chose usernames instead of emails because it just makes it easier for users to sign in. I could use the "remember me" but I decided for this project to use simple user names for the users based on their names. <first_initial + last_name> and check if the username has already been created before a user is pushed to the users data.

It took me a minute to finally find how to override these. If this is common knowledge, I apologize for sharing it as if it weren't, but hopefully this might help someone find the answer quicker! Also, if anyone was wanting to use MUI's SignInPage component that is already styled very nicely, this is a way to implement your own authorization instead of having to use on of the provided ones.

Thanks,

Knight