Customize Laravel Jetstream (Registration and Login)
Tags: jetstream, laravel, php, webdev
Published: 2020-12-17 00:15:44

Hello, welcome back to my series, previously, I wrote on how to [Customize Laravel Auth (Laravel Breeze Registration and Login)](https://dev.to/kingsconsult/customize-laravel-auth-laravel-breeze-registration-and-login-1769), this is for those that use [Laravel breeze](https://dev.to/kingsconsult/how-to-setup-basic-laravel-app-with-login-and-registration-using-laravel-breeze-6o5) for Authentification, but some of my readers who used [Laravel Jetstream](https://dev.to/kingsconsult/laravel-8-auth-registration-and-login-32jl) are still finding it difficult to customize the Registration and Login process in order to suit their needs.
For those that did not read the previous article, what we are trying to achieve is to customize the Registration and Login whereby a developer can choose to use **username and password** for **login** different from the default **email and password**, this is because some of the users of your application might not be having email address, so the person might use username for the registration and be using it for login.
without further ado, let's dive into the stuff of the day, if you read [Customize Laravel Auth (Laravel Breeze Registration and Login)](https://dev.to/kingsconsult/customize-laravel-auth-laravel-breeze-registration-and-login-1769/edit), most of the steps are similar.

Click on my [profile](https://dev.to/kingsconsult) to follow me to get more updates.

### **Step 1: Edit the CreateNewUser.php**
If you scaffold your authentication using Laravel Jetstream and installed livewire or inertia, you will have an Action folder in your App directory, and also a Fortify directory inside the Action with some files.
Go to **app/Actions/Fortify/CreateNewUser.php** customize the **create** method to this
```
  public function create(array $input)
    {
        Validator::make($input, [
            'firstname' => ['required', 'string', 'max:255'],
            'lastname' => ['required', 'string', 'max:255'],
            'username' => ['required', 'string', 'max:255'],
            'password' => $this->passwordRules(),
        ])->validate();

        return User::create([
            'firstname' => $input['firstname'],
            'lastname' => $input['lastname'],
            'username' => $input['username'],
            'email' => $input['email'],
            'password' => Hash::make($input['password']),
        ]);
    }
```
In the **validate( )** method, I removed **email**, and added **firstname**, **lastname** and **username**. Also in the **User::create**, I added the new fields.

### **Step 2: Create another migration file to add the new fields to the User table**
> php artisan make:migration add_more_fields_to_users_table --table=users

A migrations file will be created, go to **database/migrations/** ![Migration files](https://res.cloudinary.com/kingsconsult/image/upload/v1607940662/laravel%20breeze/jetstream/1_drvf4y.png)

### **Step 3: Add the new fields and modify the name field**
We are going to modify the existing name field with firstname and also add other fields, but to modify an existing fields, we need a package **doctrine/dbal**, The Doctrine DBAL library is used to determine the current state of the column and to create the SQL queries needed to make the requested changes to your column. [Laravel docs](https://laravel.com/docs/8.x/migrations#prerequisites)
> composer require doctrine/dbal

After this, update the composer, by running the command below
> composer update

![php artisan command](https://res.cloudinary.com/kingsconsult/image/upload/v1607643312/laravel%20breeze/new/2_g4690b.png)
Then add the following fields to the **up( )** method of the migration file created above
```
    public function up()
    {
        Schema::table('users', function (Blueprint $table) {
            $table->renameColumn('name', 'firstname');
            $table->string('lastname');
            $table->string('username')->unique();
            $table->string('email')->nullable()->change();
        });
    }
```
You will notice how we are going to rename our name field to firstname and added lastname and username, we made the username to be unique() and also modify email from mandatory to nullable().

Finally, run the migration command
> php artisan migrate

![php artisan migrate](https://res.cloudinary.com/kingsconsult/image/upload/v1607942115/laravel%20breeze/jetstream/3_kqzrml.png)
Database 
![Database](https://res.cloudinary.com/kingsconsult/image/upload/v1607942297/laravel%20breeze/jetstream/4_zygi3i.png)
### **Step 4: Modify the Users Model**
We need to add the fields to be fill in users model, go to **app/Models/User.php** and edit the **protected $fillable** to add the new fields
```
    protected $fillable = [
        'firstname',
        'email',
        'password',
        'username',
        'lastname'
    ];
```
### **Step 5: Modify the Registration view**
Go to **resources/views/auth/register.blade.php** and modify to this
```
<x-guest-layout>
    <x-jet-authentication-card>
        <x-slot name="logo">
            <x-jet-authentication-card-logo />
        </x-slot>

        <x-jet-validation-errors class="mb-4" />

        <form method="POST" action="{{ route('register') }}">
            @csrf

            <div>
                <x-jet-label value="{{ __('First Name') }}" />
                <x-jet-input class="block mt-1 w-full" type="text" name="firstname" :value="old('firstname')" required autofocus autocomplete="firstname" />
            </div>

            <div>
                <x-jet-label value="{{ __('Last Name') }}" />
                <x-jet-input class="block mt-1 w-full" type="text" name="lastname" :value="old('lastname')" required autocomplete="lastname" />
            </div>

            <div>
                <x-jet-label value="{{ __('Username') }}" />
                <x-jet-input class="block mt-1 w-full" type="text" name="username" :value="old('username')" autocomplete="username" />
            </div>

            <div class="mt-4">
                <x-jet-label value="{{ __('Email') }}" />
                <x-jet-input class="block mt-1 w-full" type="email" name="email" :value="old('email')"  />
            </div>

            <div class="mt-4">
                <x-jet-label value="{{ __('Password') }}" />
                <x-jet-input class="block mt-1 w-full" type="password" name="password" required autocomplete="new-password" />
            </div>

            <div class="mt-4">
                <x-jet-label value="{{ __('Confirm Password') }}" />
                <x-jet-input class="block mt-1 w-full" type="password" name="password_confirmation" required autocomplete="new-password" />
            </div>

            <div class="flex items-center justify-end mt-4">
                <a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('login') }}">
                    {{ __('Already registered?') }}
                </a>

                <x-jet-button class="ml-4">
                    {{ __('Register') }}
                </x-jet-button>
            </div>
        </form>
    </x-jet-authentication-card>
</x-guest-layout>
```
Start our application with 
> php artisan serve

Click on Register, we are going to have this
![register](https://res.cloudinary.com/kingsconsult/image/upload/v1607644836/laravel%20breeze/new/5_wuabwr.png)

### **Step 6: Modify the Login view**
Go to **resources/views/auth/login.blade.php** and modify to this
```
<x-guest-layout>
    <x-jet-authentication-card>
        <x-slot name="logo">
            <x-jet-authentication-card-logo />
        </x-slot>

        <x-jet-validation-errors class="mb-4" />

        @if (session('status'))
        <div class="mb-4 font-medium text-sm text-green-600">
            {{ session('status') }}
        </div>
        @endif

        <form method="POST" action="{{ route('login') }}">
            @csrf

            <div>
                <x-jet-label value="{{ __('Username') }}" />
                <x-jet-input class="block mt-1 w-full" type="text" name="username" :value="old('username')" required autofocus />
            </div>

            <div class="mt-4">
                <x-jet-label value="{{ __('Password') }}" />
                <x-jet-input class="block mt-1 w-full" type="password" name="password" required autocomplete="current-password" />
            </div>

            <div class="block mt-4">
                <label class="flex items-center">
                    <input type="checkbox" class="form-checkbox" name="remember">
                    <span class="ml-2 text-sm text-gray-600">{{ __('Remember me') }}</span>
                </label>
            </div>

            <div class="flex items-center justify-end mt-4">
                @if (Route::has('password.request'))
                <a class="underline text-sm text-gray-600 hover:text-gray-900" href="{{ route('password.request') }}">
                    {{ __('Forgot your password?') }}
                </a>
                @endif

                <x-jet-button class="ml-4">
                    {{ __('Login') }}
                </x-jet-button>
            </div> 
        </form>
    </x-jet-authentication-card>
</x-guest-layout>
```
We removed **email** field and replace it with **username** field

### **Step 7: Modify the Fortify configuration file**
We are going to specify what we are going to be using for the login, so go to **config/fortify.php**, you will see an array, find the **username** key and change it to **username** from **email**,
```
  'username' => 'username',
```
Then clear your config and cache
> php artisan config:cache

Run your app in case it is down
> php artisan serve

![Login page](https://res.cloudinary.com/kingsconsult/image/upload/v1608163909/laravel%20breeze/jetstream/5_l7uchc.png)
![Dashboard after login](https://res.cloudinary.com/kingsconsult/image/upload/v1608163908/laravel%20breeze/jetstream/6_vtw6rp.png)

We can now login with username and password instead of email address. That is all
Follow me for more of my articles, you can leave comments, suggestions, and reactions.
I am open to any vacancy as a PHP backend engineer, my strength is in the Laravel framework.

[click the link to view my profile and follow me] (https://dev.to/kingsconsult)