Create Auth Using Jetstream and Intertia js in Laravel 8

Hello guys, I am back with another tutorial in the Laravel 8 series. As we know, after releasing Laravel 8, some cool features are added to the new packages. The jetstream is one of the very powerful features in this list. By using this Jetstream package, you can create authentication for the user. This package comes up with two sub-packages. That is Livewire and Intertia js. You can use anyone to create a complete authentication. In the previous tutorial, I implemented the auth using the jetstream and livewire in Laravel 8. I explained each and every feature there. So, if you are not familiar with the Jetstream features. Then I recommend you go through the previous post first. Today, in this post, I will create the authentication using the intertia.js.

Before creating the project, I will explain to you about the inertia js.

Inertia Js

The inertia js has been introduced with the jetstream package. This is a stack that is used to create and manage authentication, database migrations, UI scaffolding, validation, modal dialog, and many more. For the templating engine, this stack uses the Vue js. But the most important thing is you can use a Laravel router instead of a Vue router. Because Vue js has its own router control. But, here inertia js provides the option to manage the router.
So, overall, the Inertia js is a library that renders the Vue component as per the component name. The component contains the data as well. So, it will render the component and the data by the component name.

If you are good at Vue js, then definitely you will feel the powerful feature of Inertia js. So, this is a basic concept of the Inertia js and its features. Now, let’s continue to the next step.

Prerequisites

You will have to fulfill the below requirements for creating this Laravel 8 project.

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

Create Project For Jetstream Auth Using Intertia

As we know, the Jetstream can be installed in two ways. In the first way, you can use the Laravel installer with the –jet option. This will create a new project with this package.

In the second way, you can create a Laravel 8 project. Then install the package inside the project.

I am going with the second step. So, firstly, I will create a new project in Laravel 8.

composer create-project --prefer-dist laravel/laravel user-auth

Here, it will take a couple of minutes to create this project.

Once, the project is ready, let’s add the jetstream package for the authentication.

Recommended:Laravel 8 Ajax CRUD Application Tutorial For Beginners

Install Jetstream Package in Laravel 8 Project

We will be installing the package using the composer command. So, move to the command prompt or terminal and hit the below command.

composer require laravel/jetstream

This will add the core package for the authentication in the project.

In the next step, we will have to install the auth and UI scaffolding. So, let’s do it.

Recommended:React Login and Registration App Using Laravel 7 API

Install Inertia js in Laravel 8 Jetstream

The inertia js provides the feature to create and manage the team. But this feature is disabled by default. That means if you add the team during the installation of this package, then only the feature will be enabled. So, it is our choice whether we want or not.

php artisan jetstream:install inertia

OR

php artisan jetstream:install inertia --teams

Here, I am going to create with the team functionality. So, let’s create it.

After installing the Inertia js, let’s add the npm.

Recommended: Create a CRUD App in React.js Using Laravel 7 RESTful API

Install NPM

In the next step, Inertia js is required to run the NPM. Hence, we will have to install and run it by hitting the below command.

npm install && npm run dev

you can take a look at the composer.json file.

Here, you will have the packages like Jetstream package, Inertia js, Sanctum, etc. These packages have been added to our project.

Now, let’s take a look at the folder structure for the changes has done.

Recommended: Laravel 8 CRUD Application Tutorial From Scratch

Folder Structure After Adding Jetstream and Inertia

At the very first, in the root of your project files, you will find these two files.

• tailwind.config.js
• webpack.mix.js

The webpack.mix.js file includes the tailwind CSS. Basically, it imports the tailwind CSS that is required for the Jetstream authentication layouts. As I already discussed, Jetstream uses the Tailwind CSS for the template design.

Secondly, the tailwind.config.js file executes the Tailwinds CSS. Here, you will find the theme, font family, variants, etc. These all will be used in the templates.

Now, move to the app folder, you will see there is a new folder named Actions. Inside the actions directory, you will have two more directories which are Fortify and Jetstream.

Here, you can see which features are provided by which packages. Like fortify provides the Create user, password validation rules, update user password, profile information, etc. Similarly, Jetstream provides Team functionality to create and manage a team. Also, the delete user functionality is managed by the Jetstream. These files are not configuration files. These are the actual Class files that contain the functionalities.

Also, there is the Policies directory that contains the for the TeamPolicy. In the model, there is an extra default model for the Team.

Providers

Now, take a look at the Providers folder. You will find the service providers like FortifyServiceProvider.php and the JetstreamServiceProvider.php.

<?php

namespace App\Providers;

use App\Actions\Fortify\CreateNewUser;
use App\Actions\Fortify\ResetUserPassword;
use App\Actions\Fortify\UpdateUserPassword;
use App\Actions\Fortify\UpdateUserProfileInformation;
use Illuminate\Support\ServiceProvider;
use Laravel\Fortify\Fortify;

class FortifyServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Fortify::createUsersUsing(CreateNewUser::class);
        Fortify::updateUserProfileInformationUsing(UpdateUserProfileInformation::class);
        Fortify::updateUserPasswordsUsing(UpdateUserPassword::class);
        Fortify::resetUserPasswordsUsing(ResetUserPassword::class);
    }
}

In the FortifyServiceProvider.php you will find the services in the boot function.

Similarly, go to the JetstreamServiceProvider.php file. You will the services which are provided by the Jetstream package.

<?php

namespace App\Providers;

use App\Actions\Jetstream\AddTeamMember;
use App\Actions\Jetstream\CreateTeam;
use App\Actions\Jetstream\DeleteTeam;
use App\Actions\Jetstream\DeleteUser;
use App\Actions\Jetstream\UpdateTeamName;
use Illuminate\Support\ServiceProvider;
use Laravel\Jetstream\Jetstream;

class JetstreamServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        $this->configurePermissions();

        Jetstream::createTeamsUsing(CreateTeam::class);
        Jetstream::updateTeamNamesUsing(UpdateTeamName::class);
        Jetstream::addTeamMembersUsing(AddTeamMember::class);
        Jetstream::deleteTeamsUsing(DeleteTeam::class);
        Jetstream::deleteUsersUsing(DeleteUser::class);
    }

    /**
     * Configure the roles and permissions that are available within the application.
     *
     * @return void
     */
    protected function configurePermissions()
    {
        Jetstream::defaultApiTokenPermissions(['read']);

        Jetstream::role('admin', 'Administrator', [
            'create',
            'read',
            'update',
            'delete',
        ])->description('Administrator users can perform any action.');

        Jetstream::role('editor', 'Editor', [
            'read',
            'create',
            'update',
        ])->description('Editor users have the ability to read, create, and update.');
    }
}

Configuration of Jetstream and Fortify

Navigate to the config folder and you will see lots of configuration files. Basically, we will see the jetstream, and fortify configuration.

Firstly, click on the config/jetstream.php file. Here, you will see the inertia stack for the authentication. Also, in the features section, you will see the list of features that are enabled.

Now, move to the Fortify configuration file and you will see the list of features provided by the fortify. By default, the email verification functionality is disabled. So, if you want then you can enable it.

After installing the auth and the team options in Jetstream, we have the migrations files. The migration files will generate the tables inside the database.

Therefore, to migrate all these migrations, we will be required to create and configure a database.

Recommended: Laravel 8 Multiple Images Upload with Validation

Create and Configure Database For Laravel 8

To create a database, I am using the MySQL command line. So, create a database in MySQL.

CREATE DATABASE laravel8_user_auth;

Here, the database has been created. Now, let’s configure it for the Laravel 8 project.

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

Now, we have a database connection with the project. So, let’s migrate all the tables.

php artisan migrate

The above command will migrate all the tables in the database.

After the successful migration of the tables, our project is ready to serve.

But, first of all, take a look at the route. Because every URL will run on the specified route. Therefore, navigate to the routes/web.php file then you will have the below snippet.

Route::middleware(['auth:sanctum', 'verified'])->get('/dashboard', function () {
    return Inertia\Inertia::render('Dashboard');
})->name('dashboard');

The above route function uses the middleware. Also, for the authentication of the route it is using the sanctum. If the auth is verified, the dashboard page will be rendered by the Inertia. So, this is really cool. Now, check the result.

Recommended: Laravel 8 Form Validation Tutorial For Beginners

Run the Laravel 8 User Auth Application

Run the project and let’s go with step-by-step results. So, I am running the application on the default port of 8000. And this is the default homepage of Laravel 8.

Here, we have the Login and Register option.

Register User

After clicking on the registration option, you will have the below screen.

This form has validation rules. The create user functionality is managed by the fortify. Here, I have entered the different passwords in both fields. As a result, I got the validation error message.

Dashboard Page in Jetstream

After registration, you will be redirected to the dashboard page.

Here, we have the beautiful avatar in the profile. This avatar has been created by using the First character of the First Name and the first character of the Last Name.

When you click on the avatar (profile section), you will have the following options.

• Profile
• API Tokens
• Manage Team
• Team Settings
• Create New Team
• Switch Teams
• Umesh’s Team (The current team based on the first name)

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

Profile Settings in Jetstream

After clicking on the profile option, you will have the below screen. Here, you have the option to manage your profile. This contains –

• Basic profile information
• Update password
• Two-factor authentication
• Browser sessions and
• Delete account

Two-factor authentication

The two factor authentication in Jetstream inertia provides the authentic login. By default the two factor authentication is disabled. We have the option to enable it.

When you try to enable it, it will ask you to confirm the password in a prompt.

I have confirmed the password and the two factor authentication has been enabled. In the result, you will have the options of QR code and recovery codes.

If you want to use the QR code then you will require the authenticator app. When you will scan it, you will have the numeric recovery code.

But, when you will choose the recovery code options you will have to enter the recovery codes during the login. So, just copy the recovery codes, because, we will have to log out of the profile to check the two-factor authentication. After logging out, I was redirected to the Login page.

User Login

On the login page, you will have the below layout. Enter the email and password. Then try to log in.

Now, you will have the new prompt to confirm the authentication code. By default, it opens the authenticator code option.

If you have the authenticator app then enter the code. Otherwise, choose the Recovery code option.

I have chosen the recovery code option then it opened the recover code prompt. Now, I have entered a recovery code from the generated recovery codes. After that, I clicked on Login.

After the successful login, you will be redirected again to the dashboard.

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

Browser Sessions

The browser session monitors the number of the logged-in device for this application. Currently, it is showing one device which is Windows – Chrome.

You can try logging in through the incognito window or through the other browser.

I have logged in through the incognito window and navigated to the profile section. Now, in the browser sessions tab, it is showing the two devices.

You can log out of all the browser sessions excluding the current one.

Delete Account

You can delete the account by clicking on the Delete Account option. It will ask you to confirm the password before deleting the account.

Now, let’s move to the next features over there.

API Tokens

You can create API tokens for the user. There are certain options to manage the permissions. The API tokens allow third-party services to authenticate with our application.

The next feature in the profile is the team settings.

Team Settings

The team settings allow us to manage the team members in the current team. You can add and remove other team members in your team. Also, you can set the permissions as a privilege for the specific team member.

Create Team

You can create a new team in this option. You can have multiple teams. And in every team, you can add the team members. Also, you can set the privileges for the team members.

Conclusion

We covered all the features of the Jetstream and Inertia js. We got amazing features from these packages in Laravel 8. In this project, we have installed packages like Jetstream and Inertia for creating user authentication. The new UI scaffolding has been added. The inertia js uses the Vue.js for the templating engine and the Vue router for the URL. But the Inertia js allows us to manage the router. There are lots of configurations of the Jetstream, inertia, and fortify. The fortify runs as a backend for authentication. It provides validation rules, etc. So, I hope this post will be helpful for you. For any kind of issue or suggestion, don’t hesitate to put your comments. Thank you.