Laravel 8 Jetstream: adding new field to the registration process

Question

I started building a web application using Laravel 8. I have noticed that quite a lot of things have changed in Laravel 8 including authentication. Now, I am trying to use Jetstream for auth.

I have run the following command to integrate it into the application.

composer require laravel/jetstream
php artisan jetstream:install inertia
npm install && npm run dev

When I go to the /register route, I can see the registration form with name, email, password and password confirmation fields. What I would like to do is that I would like to add another field called, "company" and I would like to apply custom validation rules to it.

I found on the Jetstream documentation that I could customise the authentication process in the boot method of the JetstreamServiceProvider class as follow.

Fortify::authenticateUsing(function (Request $request) {
            
        });

But it does not apply to register. How can I customise the registration process adding new fields and applying custom validation rules?

Answer 1

Firstly, you should add the company field to the user table using the migration found in database\migrations\2014_10_12_000000_create_users_table.php.

public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('company');
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password');
            $table->rememberToken();
            $table->foreignId('current_team_id')->nullable();
            $table->text('profile_photo_path')->nullable();
            $table->timestamps();
        });
    }

Then run this command php artisan migrate:fresh to migrate your new users table.

Then add the field to the fillable array inside the User model found in \app\Models\User.php like so:

protected $fillable = [
    'name',
    'company',
    'email',
    'password',
];

And now you can find the registration view under resources\views\auth\register.blade.php then you can duplicate an input block to use it for the 'company' field.

Then you can do the validation in this class: app\Actions\Fortify\CreateNewUser.php

public function create(array $input)
    {
        Validator::make($input, [
            'name' => ['required', 'string', 'max:255'],
            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
            'company' => ['required', 'string', 'max:255'],
            'password' => $this->passwordRules(),
        ])->validate();

        return User::create([
            'name' => $input['name'],
            'email' => $input['email'],
            'company' => $input['company'],
            'password' => Hash::make($input['password']),
        ]);
    }

Then, you are ready.

Answer 2

@Ali Ali's answer is correct however if for those of you using Inertia there is one additional step. You'll need to open resources/js/Pages/Auth/Register.vue and add the desired field to the form. Additionally, scroll down to the bottom of the file and add the field name to the this.$inertia.form input parameter object literal. For instance if the desired additional field name is company you'll add it like this:

data() {
  return {
    form: this.$inertia.form({
      name: '',
      company: '', // <- New line here
      email: '',
      password: '',
      password_confirmation: '',
      terms: false,
    })
  }
},