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?

score 24 · Accepted Answer · edited Jan 29 '21 at 16:18

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.

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. — Arif I., Apr 12 '21 at 12:20
@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. — Ali Ali, Apr 12 '21 at 13:21
ZOMG, almost crazy looking for the Fortify files... there are just in the new folder Actions. Thanks! — Erich García, Jan 20 '22 at 19:04
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``` — Meysam Zarei, Jun 05 '22 at 18:47

score 4 · Answer 2 · answered Jan 29 '21 at 16:09

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

Arne · Answer 3 · 2022-08-20T00:19:10.440

0

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?

edited Aug 20 '22 at 00:19

answered Aug 20 '22 at 00:07

Arne

1
1

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](/help/how-to-answer). – Community Aug 25 '22 at 14:17

Laravel 8 Jetstream: adding new field to the registration process

3 Answers3

Linked