After updating the 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, in Laravel 8, it uses the laravel/jetstream package. So, in this post, we will be learning out the Laravel 8 Jetstream. This package has 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.
- 1 Laravel 8 Jetstream
- 2 Laravel Livewire
- 3 Intertia
- 4 Prerequisites
- 5 Create a New Project in Laravel 8
- 6 Install Laravel 8 Jetstream
- 7 Install NPM Dependencies in Laravel 8
- 8 Create and Configure Database
- 9 Features of Laravel 8 Jetstream
- 10 Run the Laravel 8 Jetstream Auth project
- 11 Avatar in Profile Section
- 12 Enable Two-Factor Authentication in Laravel
- 13 User Login with Laravel 8 Jetstream
- 14 Create and Manage Team in Laravel 8 Jetstream
- 15 Conclusion
Laravel 8 Jetstream
Laravel Jetstream has designed for creating the auth scaffolding. The Jetstream package provides the functionality for the following –
- 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 highly customizable, low level CSS framework.
Laravel Livewire is a library that is used to create modern, reactive, dynamic interfaces using Laravel Blade. You can use in Laravel blade as your templating language.
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 Vue router. This is very small library that can be managed to load Vue component through the backend as Laravel.
I am not going to discuss these all functionality in a 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.
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
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.
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 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
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 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.
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.
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.
Features of Laravel 8 Jetstream
Jetstream features are really advance 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 the user validations like validation rules, password, email, etc.
When you will 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 showing 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 that is 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. In the homepage, you will see the Login and Register option at top right corner.
Let’s try to register first. I have 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.
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 then there is 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.
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 will click on the profile, you will have 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.
Enable Two-Factor Authentication in Laravel
In the profile option, you can enable the two factor authentication. It will prompt to confirm the password before enabling it.
When it has enabled, you will have 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 the email and password. Firstly, I will show by a incorrect email and password. In the result, we have the error message that is credentials do not match.
So, this works the validation. Now, I will try to login with the correct email and password.
After the validating email and password, you will have the 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 code 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 have 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 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.
After clicking on Create new team, you will have a new screen. Enter the team name and click on create button.
I have created a new team named Programming Fields.
You can add someone else to your team as well. For adding someone into your team and to manage the team settings, click on the Team Settings.
You can add a team member to your current team. Also, you can manage the privileges of the team member. You can set the team member role as well.
You will find out 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 of update to the editor then remove it. Admin has all the permissions like create, read, update and delete.
Finally, we have gone through each functionality of the jetstream, fortify, livewire, and the 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 stuck in any step then don’t forget to write in the comment section. Definitely, I will help you with a possible solution.