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?

Lough

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.

Frick

Cheers Ali Ali. This is what I am looking for. – Lough

The command php artisan migrate:fresh will give you a warning on the production environment. This is because the data from your database tables will be lost after running this command. – Spinthariscope

@ArifI. Yes, my answer applies to the newly created projects only, as the question above mentioned. On production env, we should update the existing table without dropping it. – Frick

ZOMG, almost crazy looking for the Fortify files... there are just in the new folder Actions. Thanks! – Recreant

For adding styles for custom inputs like select you can add: border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm w-full – Boaten

if there are any future updates to fortify, will the CreateNewUser.php file be overwritten and all changes to it gone if i run say composer update ? – Canakin

@Canakin No it shouldn't as such files should be updated manually if needed. Better to always have a full backup though. – Frick

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,
    })
  }
},

Buss

Answer 3

Hmm, are these correct answers? If you install LiveWire then yes you could edit resources/views/auth/register.blade.php but with Inertia and Vue there is no such folder or file (at least in the current version). In fact there is only one file by default in the resources/viewsfolder: app.blade.php. If I got it right by design strict Inertia use does not use blade files. Am I correct? If so then the questions is not answered. Where should you add new fields when using Inertia. And in my case, using Spatie/permissions, how do you create logic to reference role information?

Melindamelinde

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Scan