Laravel 11 Authentication using Jetstream Tutorial

By Hardik Savani April 16, 2024 Category : Laravel

Hello, developers! We will learn how to set up authentication using Jetstream in a Laravel 11 application.

Laravel 11 Jetstream was designed by Tailwind CSS, and it provides authentication scaffolding using Livewire and Inertia. Laravel Jetstream includes features such as login, registration, email verification, two-factor authentication, session management, API via Laravel Sanctum, and team management, all built-in.

So, if you want to use Laravel's pre-defined authentication scaffolding, just follow this tutorial. I will show you how to create authentication with Livewire and Inertia Vue using Jetstream.

laravel 11 jetstream auth

Laravel 11 Auth Scaffolding using Livewire Jetstream

Laravel Livewire is a library that makes it simple to build modern, reactive, dynamic interfaces using Laravel Blade, Laravel controller, and Laravel validation.

Livewire provides a way to write your AJAX with Laravel Blade, validation, and all. You can use it as a JavaScript framework. So let's see the steps below to create authentication using Laravel 11 Livewire.

Install Laravel 11

This step is not required; however, if you have not created the Laravel app, then you may go ahead and execute the below command:

composer create-project laravel/laravel example-app

Install Jetstream:

Now, in this step, we need to use the composer command to install Jetstream, so let's run the below command and install the below library.

composer require laravel/jetstream

Create Auth with Livewire:

Now, we need to create authentication using the below command. You can create basic login, register, and email verification. If you want to create team management, then you have to pass the additional parameter. You can see the below commands:

php artisan jetstream:install livewire
  
OR
  
php artisan jetstream:install livewire --teams

Now, you can run and check. They installed all views, actions, and everything in your Laravel 11 application.

Laravel 11 Auth Scaffolding using Inertia Jetstream

Laravel Inertia is a templating language, and Inertia works with Vue.js.

Install Laravel 11

This step is not required; however, if you have not created the Laravel app, then you may go ahead and execute the below command:

composer create-project laravel/laravel example-app

Install Jetstream:

Now, in this step, we need to use the composer command to install Jetstream, so let's run the below command and install the below library.

composer require laravel/jetstream

Create Auth with Inertia:

Now, we need to create authentication using the below command. You can create basic login, register, and email verification. If you want to create team management, then you have to pass the additional parameter. You can see the below commands:

php artisan jetstream:install inertia
  
OR
  
php artisan jetstream:install inertia --teams

Now, you can run and check. They installed all views, actions, and everything in your Laravel 11 application.

Laravel 11 Jetstream Features

In Laravel 11 Jetstream, all features are configurable. You can find configuration files named `fortify.php` and `jetstream.php`, where you can enable and disable options for these features.

config/fortify.php

...
  
'features' => [
        Features::registration(),
        Features::resetPasswords(),
        Features::emailVerification(),
        Features::updateProfileInformation(),
        Features::updatePasswords(),
        Features::twoFactorAuthentication(),
    ],
...

config/jetstream.php

...
  
'features' => [
        Features::profilePhotos(),
        Features::api(),
        Features::teams(),
    ],
...

Run Laravel App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

php artisan serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:8000/

Now you can see the layout below as here:

Home Page:

Login Page:

Register Page:

Dashboard Page:

Profile Page:

Team Page:

I hope it can help you...

Shares