Laravel 8 Authentication using Jetstream with Livewire

What is Laravel Jetstream?

Laravel Jetstream is a new application scaffolding for Laravel. It is simple authentication scaffolding but powerful to use. Laravel Jetstream replaces the legacy Laravel authentication UI available for previous Laravel versions.

Jetstream gives you a better starting point for your new projects. It includes the following components:

Login and registration functionality
Email verification
Two-factor authentication
Session management
API support via Laravel Sanctum

Inside this, we will see the composer package for jetstream. Laravel 8 jetstream designed by Tailwind CSS. It publishes controllers for authentication system, views, and routes to laravel application. Apart from Livewire, we can also use Interia.js for authentication scaffolding when we work with vue.js

Ok, Let’s get started – Laravel 8 Auth Scaffolding using Livewire Jetstream

Laravel Installation can be done in two ways.

Laravel Installer
By using composer

Laravel Installer

To install Laravel via Laravel installer, we need to install its installer first. We need to make use of the composer for that.

				
					 $composer global require laravel/installer

This command will install laravel installer on the system. This installation is at global scope, so you type the command from any directory at the terminal. To verify type the given command.

				
					$ laravel

This command will open a command palette of Laravel Installer.

To create and install laravel project, we can use the command below.

				
					$ laravel new jetstream-demo

With the name of jetstream-demo, the laravel project will be created at your specified path.

By using composer

Alternatively, we can also install Laravel by Composer command create-project. If your system doesn’t has Composer Installed, Click here to Install Composer.

Here is the complete command to create a laravel project.

				
					$ composer create-project --prefer-dist laravel/laravel jetstream-demo

After following these steps we can install a Laravel 8 application into system. To start the development server of Laravel

				
					 $ php artisan serve

This command outputs –

Starting Laravel development server: http://127.0.0.1:8000

Note:

Assuming laravel 8 already installed at system.
The database also configured with the application.

Install Jetstream

We will use the composer command to install the jetstream library. Open project to terminal and hit this command into it.

				
					 $ composer require laravel/jetstream

While Installation you should see console screen like this.

Create Auth with Livewire

Now, we are going to install livewire which will create an authentication system for the application. It consists of Login, Registration, Forgot Password, Profile, Dashboard, Two Setup authentication, Email verification etc.

To install Livewire –

				
					 $ php artisan jetstream:install livewire

When we install the livewire, we can see console screen like in this way –

Next, we need to run command to install node js pacakges.

Installing Node Js Packages

Back to the terminal and type this command and run.

				
					 $ npm install && npm run dev

This will give a screen view like below –

Laravel Migration

Next, we need to migrate tables into database.

				
					 $ php artisan migrate

Generated Scaffolding Files

When we open the jetstream.php file, we will see ‘stack’ => ‘livewire’, because we are using livewire as stack.

Application Testing

Open project to the terminal and type the command to start the development server. Then it will open in 127.0.0.1:8000

				
					 $ php artisan serve

So, If everything is going well, the application must run as below.

When we click on the register and Login buttons, it will open view as below.

Profile Screen

Jetstream Security

When we talk about the security of Jetstream, it comes with the standard functionality that allows users to update their password and log out.

However, what’s more, impressive is that Jetstream also offers two-factor authentication with QR code, which the users could enable and disable directly;

Another brilliant security feature is that users can logout other browser sessions as well.

Jetstream API

Laravel Jetstream uses Laravel Sanctum to provide simple token-based API.

With Sanctum, each user can generate API tokens with specific permissions like Create, Read, Update, and Delete.

Then to check the incoming requests, you can use the tokenCan method like this:

				
					$request->user()->tokenCan('read');

Again you can disable API support in your config/jetstream.php config file.

Ok then,

I hope this article helps you to get a better understanding of Jetstream and how it works with Laravel.

Happy coding! ️️