How to Create Auth with Jetstream and Livewire in Laravel 8

After updating Laravel, we got the amazing features in Laravel 8. Laravel 8 has totally changed with the auth scaffolding. In the previous version of Laravel (Laravel 7), it was using the Laravel/ui package for the auth scaffolding. But, Laravel 8, uses the laravel/jetstream package. So, in this post, we will be learning about the Laravel 8 Jetstream. This package is beautifully designed for creating the auth scaffolding. We will see the powerful feature of Laravel 8 Livewire. Before creating any application using this package, let’s take an overview.

Laravel 8 Jetstream

Laravel Jetstream has been designed for creating the auth scaffolding. The Jetstream package provides the functionality for the following –

• login
• registration
• email verification
• two-factor authentication
• session management
• API support via Laravel Sanctum,
• optional team management

The most important thing is the design component is managed by Tailwind CSS. For creating the scaffolding it offers Livewire or Intertia. The Tailwind CSS is a highly customizable, low-level CSS framework.

Laravel Livewire

Laravel Livewire is a library that is used to create modern, reactive, dynamic interfaces using Laravel Blade. You can use Laravel Blade as your templating language.

Intertia

Intertia.js is a stack that is provided by the Jetstream. It uses the Vue.js as a templating engine. You can use Laravel’s router instead of the Vue router. This is a very small library that can be managed to load the Vue component through the backend as Laravel.

I am not going to discuss these functionalities in this post. We’ll see the usage in the upcoming posts.

So, in this post, I will be creating the Livewire for creating the auth.

Prerequisites

For creating the Laravel 8 project, you will have ready with the following tools-

• PHP >= 7.3
• MySQL (version > 5)
• Apache/Nginx Server
• VS Code Editor
• Composer

Create a New Project in Laravel 8

For creating this project, I am using the composer. After creating the project, I will be installing the Laravel jetstream package inside the project.

composer create-project --prefer-dist laravel/laravel my-blog

I have created a project with the name my-blog.

After completing the installation, we will be adding the Laravel jetstream package.

Recommended: Laravel 8 Ajax CRUD Application Tutorial For Beginners

Install Laravel 8 Jetstream

In this step, we will be installing the Laravel 8 jetstream package inside the project. You can install Jetstream in two ways. If you have the Laravel installer then you can create a Laravel project with Jetstream.

laravel new project-name --jet

But, we already created the Laravel 8 project. So, I will be installing through the composer.

composer require laravel/jetstream

In the project directory, the jetstream will add the tailwind.config.js and the webpack.mix.js. These two files will be available at the root of the project. Also, you can check the composer.json file. Here, you will find the jetstream, sanctum, tinker, livewire, etc.

Here, I have installed the jetstream using the composer. Hence, it requires the stack for auth like livewire or inertia. For running out this stack, we will have to run the jetstream:install command.

You can install Livewire with team functionality or without it. But, here I want to show the complete features. Hence, I will install it with the team.

php artisan jetstream:install livewire

OR

php artisan jetstream:install livewire --teams

The above command will install the livewire in this project.

After installing the livewire, you will have the install the NPM dependencies. The NPM dependencies will add the required library for the UI scaffolding.

Laravel 8 Multiple Images Upload with Validation

Install NPM Dependencies in Laravel 8

Before installing the npm dependencies, it will require the node.js in your system. If you haven’t installed then do it before proceeding to this step.

npm install && npm run dev

This will take a couple of minutes to setup the npm dependencies for the project. You will have to wait till it finishes the complete setup.

Here all the required dependencies have been added. Also, it added the CSS and js for the UI.

Recommended: How to Implement Column Filter in Laravel 7 Yajra Datatable

Create and Configure Database

For the database, I am using the MySQL database. So, create a new database there.

CREATE DATABASE laravel8_auth;

After creating the database, let’s configure it for this Laravel 8 Jetstream auth project.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel8_auth
DB_USERNAME=root
DB_PASSWORD=root

The Laravel 8 jetstream package added the new migration files. These migration files are default with the jetstream package. Take a look at the new migration files.

Here, you can see, this time, we have the two_factor_columns, create_personal_access_tokens, and create_session table migrations.

In the next step, we will migrate the migration files.

php artisan migrate

Now, we have all the tables in the database which are listed in the migrations.

Recommended: Laravel 8 Form Validation Tutorial For Beginners

Features of Laravel 8 Jetstream

Jetstream features are really advanced and amazing. We can configure its features like which functionality you want to disable or enable. The Jetstream and the Fortify are synced together to provide these advanced features.

You can find out the configuration file inside the config/fortify.php. The fortify is basically a backend for the jetstream. It is used to manage user validations like validation rules, passwords, email, etc.

Enable Jetstream Features

When you click on this file, you will have a couple of configuration options. Also, you will have the features. By default the emailVerification() feature is disabled. You can enable it. So, these all features are active and ready to use.

You can set the login limit for the user. That means you can set the number of login requests per minute. By default, it gives five login attempts per minute. You can set the login limit in the limiters option as shown below.

Now, move to the app/Actions/Fortify. Here, you will see the files for managing the user’s functionalities. There is the Jetstream folder containing the DeleteUser.php.

Now, move to the next file which is the config/jetstream.php file. This is the actual feature of the jetstream.

In this file, you can see the current stack for the UI scaffolding. Hence, we have the livewire, because we had chosen the livewire.

Also, in the features array, there are profilePhotos, API, and the team.

Now, move to the app/Actions/Jetstream. You will have the following features.

So, we have gone through an overview of the features. Now, let’s see it in a practical way.

Run the Laravel 8 Jetstream Auth project

Run the application to see the result. On the homepage, you will see the Login and Register option at the top right corner.

Let’s try to register first. I filled out the name and email then tried to register.

In the result, I got the validation error message. That’s pretty cool because everything is by default.

Recommended: Laravel 7 RESTful APIs For Todo App with Passport Auth

Login Result Page

Now, I have registered with the correct details. After successful registration, you will be redirected to a dashboard page.

Here, I have logged in and I am on the dashboard page. So, when, I tried to go to the homepage there was the only Dashboard option. That means, if you are logged in then you won’t have an option to login and register. This is really a cool feature of the Jetstream auth.

Recommended: Laravel 7 Yajra DataTable with Server-Side Processing

Avatar in Profile Section

Here, in the profile section, we have a nice avatar section. By default, it creates the profile image using the first character of the First Name and the first character of the Last name. This is really an amazing feature.

When you click on the profile, you will see the below user interface.

In the above screen, there are lots of options to manage the profile. The options like –

• Profile Information
• Profile Picture
• Password Update
• Two-factor authentication
• Browser session
• Delete account

You can update the profile and change the profile picture.

Recommended: How to Use HTTP Client For Request Handling in Laravel

Enable Two-Factor Authentication in Laravel

In the profile option, you can enable the two-factor authentication. It will prompt you to confirm the password before enabling it.

Once it has enabled, you will have the option to show the recovery codes.

Now, I will show you how it works. First of all, I have copied these recovery codes and logged out of the profile. So, I am on the login screen.

User Login with Laravel 8 Jetstream

Here, we will try to login into the dashboard by email and password. Firstly, I will show by an incorrect email and password. In the result, we have the error message that is credentials do not match.

So, this works for the validation. Now, I will try to login with the correct email and password.

Two Factor Authentication

After the validating email and password, you will have a screen for two-factor authentication. You can authenticate by either an authenticator app or the recovery code.

We have copied out the recovery code from the two-factor authentication. That’s why, we will choose the option to authenticate by the recovery code.

Now, I will paste one of the recovery codes from the list. The most important thing to be noticed is that the recovery code will be used once. This means a single recovery code cannot be used twice for authentication.

Therefore, I entered a recovery code and clicked on login.

As a result, I have logged in successfully and redirected again to the dashboard.

Create and Manage a Team in Laravel 8 Jetstream

Jetstream provides the feature to create and manage the team. By default, there is a team that will be created by your name. So, here a team name is Umesh’s Team. Also, you can create a new team.

Recommended: How to Send Email Using Gmail SMTP in Laravel 7

After clicking on Create New Team, you will have a new screen. Enter the team name and click on the Create button.

I have created a new team named Programming Fields.

You can add someone else to your team as well. To add someone to your team and to manage the team settings, click on Team Settings.

Team Settings

You can add a team member to your current team. Also, you can manage the privileges of the team members. You can set the team member role as well.

You will find the above role functionality inside the app/Providers/JetstreamServiceProvider.php file.

You can set the privileges by here. Like, if you don’t want to give the permission update to the editor then remove it. Admin has all the permissions like create, read, update, and delete.

Conclusion

Finally, we have gone through each functionality of the jetstream, fortify, livewire, and tailwind CSS. This is just an overview of creating an auth using the Laravel jetstream. After a long time, Laravel has added this kind of feature which is really very powerful. I hope, this tutorial will guide you to set up the Auth for users. If you are stuck in any step then don’t forget to write in the comment section. Definitely, I will help you with a possible solution.