Kingsconsult

Posted on 16 dic 2020

23 5

Customize Laravel Jetstream

(Registration and Login)
#jetstream #laravel #php #webdev

Laravel Auth (4 Part Series)

1 Laravel 8 Auth (Registration and Login)

2 Basic Laravel Login and Registration using Laravel Breeze

3 Customize Laravel Auth (Laravel Breeze Registration and L…

4 Customize Laravel Jetstream (Registration and Login)

Hello, welcome back to my series, previously, I wrote on how to Customize Laravel Auth
(Laravel Breeze Registration and Login), this is for those that use Laravel breeze for
Authentification, but some of my readers who used Laravel Jetstream 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), most of the steps are similar.

Click on my profile 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/

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

composer require doctrine/dbal

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

composer update

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

Database

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
</div>

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

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

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

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

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

<div class="flex items-center justify-end mt-4">

 <a class="underline text-sm text-gray-600 hover:text-gray-900" href
{{ __('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

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"
</div>

<div class="mt-4">
<x-jet-label value="{{ __('Password') }}" />
<x-jet-input class="block mt-1 w-full" type="password" name="passwo
</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')
</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
{{ __('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

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

Laravel Auth (4 Part Series)

1 Laravel 8 Auth (Registration and Login)

2 Basic Laravel Login and Registration using Laravel Breeze

3 Customize Laravel Auth (Laravel Breeze Registration and L…

 4 Customize Laravel Jetstream (Registration and Login)

Top comments (7)

Safventure11000 • 16 dic 20 • Edited on 16 dic

I slightly got overwhelmed with the changes of laravel 8 esp with laravel
jetstream. That’s why I prefer the laravel breeze which is simpler. The simpler
the better. But I’m glad that someone wrote about jetstream. Given the overall
complexity that jetstream add to the laravel project, I think it’s worth to try and
explore.

Nico Travassos • 18 jun 21

Where ranaming $table->renameColumn('name', 'firstname'); a column can I

also make it nullable in the same line?

Joshua Bowers • 27 mar 21

Bro... this is an amazing and clear tutorial. Best I've seen in a long time. Thanks
a lot!

yamin • 8 abr 21

sir , can you make a tutorial for multiplle authentication in laravel jetstream

cocobyon • 24 ene 21 • Edited on 24 ene

bro could you please help me how to add nav menu and use your layout ?

and please help me how to add some logic to call specific model in controller
dashboard?

thank you sir

Aris Ripandi • 28 dic 20

Thanks before, this is exactly what i need. But, I got error, where is
LoginHistory class?
 djcorea • 28 feb 21

Is it possible to use any of them without migrations?

I've ready have my database.

Code of Conduct • Report abuse

Sentry PROMOTED

Next.js Performance Monitoring 🚫

Within minutes after installing Sentry, software teams are able to trace Next.js
performance issues back to a poor performing API call as well as surface all related
code errors. Engineering Managers and Developers now have a single tool to
optimize the performance of their code and deliver fast customer experiences.

Try Sentry

Kingsconsult

I am Kingsley Okpara, a Python and PHP Fullstack Web developer and tech writer, I also have extensive
knowledge and experience with JavaScript while working on applications developed with VueJs.

LOCATION
Lagos, Nigeria
EDUCATION
Bsc.ed Mathematics, Enugu State University of Science and Technology, Enugu, Nigeria
WORK
Mid-level Web Developer at Plexada-Si
JOINED
4 ago 2019

More from Kingsconsult

Laravel Credit Card Validation

#php #laravel #webdev #security

Schedule a task to run at a specific time in laravel (CronJob)

#php #laravel #webdev #aws

Customize Laravel Auth (Laravel Breeze Registration and Login)

#php #laravel #beginners #webdev

FusionAuth PROMOTED

Leave Auth to the Auth Experts

Save yourself the hassle of complex auth systems so you can focus on building your app.

Learn more