Auth Scaffolding Using Jetstream with Intertia Js in Laravel 10

Laravel Jetstream is a package that provides a starting point for Laravel web applications. It includes a pre-built authentication system, user management, and team management. On the other hand, Inertia.js is a library that allows you to build single-page applications (SPAs) using Laravel and Vue.js or React. When used together, Laravel Jetstream and Inertia.js provide seamless integration between server-side and client-side functionality. This help to make it easier to build modern web applications. With Jetstream and Inertia.js, you can quickly build authentication scaffolding with a Vue.js or React frontend. That communicates with the backend using JSON responses. Laravel Jetstream with Inertia.js is a powerful combination. It enables developers to create modern web applications with minimal setup and maximum productivity. This post will consist of the Laravel 10 Jetstream auth scaffolding using intertia js.

It provides a streamlined development workflow that allows you to focus on building your application rather than setting up the infrastructure.

Prerequisites

We are going to implement Jetstream auth using Intertia js. functionality in Laravel 10. Therefore, you will need a Laravel 10 application. But, to work with Laravel 10, you must have the below tools.

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

Let’s set up a new project once you are ready with the tools and configurations. You may skip this step if you already have the project setup.

Step 1 – Create a Project For Jetstream Auth Using Intertia JS

You have to open the command line or terminal at the initial stage. Then hit the below command.

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

The application will be installed in a couple of seconds.

After the application setup, you have to configure the database for this.

Step 2 – Connect a Database For Laravel 10 Application

Initially, you need to have a database. You have to create it in MySQL. Then navigate to the project folder and look at the .env file. Search for the DB section and add the database credentials as shown below.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE={{ DATABASE_NAME }}
DB_USERNAME={{ DATABASE_USERNAME }}
DB_PASSWORD={{ DATABASE_PASSWORD }}

You have to replace the DB credentials in the placeholder. The application is synced with the database now.

Step 3 – Install Jetstream Auth in Laravel 10

You have to install the Laravel Jetstream Auth package using Composer. In order to proceed with this, open the terminal and hit the below command.

composer require laravel/jetstream

The installation will add the Jetstream auth scaffolding. After installing the Jetstream, it will add the tailwind.config.js and the webpack.mix.js in the project folder.

Step 4 – Install Livewire For Jetstream Auth Scaffolding

In this step, you will have to install the Intertia js to run the scaffolding. While installing Intertia js with Jetstream, you have to keep in mind for one thing. Jetstream has a new additional feature for Team Management. This is optional, which means if you want then you can install it.

php artisan jetstream:install intertia

OR

php artisan jetstream:install intertia --teams

After installing the inertia auth scaffolding, you have to install the front-end dependencies.

Step 5 – Install npm For Front End Dependencies

In order to install front-end dependencies, you have to hit the below command.

npm install && npm run dev

In order to run the auth scaffolding with full-fledged then it is possible only after installing the front-end dependencies. Without front-end dependencies, the Auth UI won’t work as expected.

Step 6 – Migrate Database

The inertia js auth scaffolding has added the migrations as well. It will be required for managing the authentication of the application. Therefore, you need to migrate these migrations.

php artisan migrate

After the successful migration, you will have some additional tables in the database.

That’s it for the functionality implementation. Now, your application is ready to serve and use the Jetstream Auth functionality.

Now, it’s result time. So, check out to the browser and visit the application URL.

In the homepage option, you will have the Auth links. From here, you can Register and Login the application.

After successful Registration, you will be redirected to the Dashboard page automatically.

In the profile section, you will have the option to manage the Profile. You can update the password, enable the 2FA, Multiple browser sessions, etc.

You can explore these all functionalities which are provided by the Jetstream auth scaffolding.

Final Words

So, we have completed the Auth scaffolding using Jetstream with intertia js. The Intertia js stack will work on the component-based architecture. In this, you will have one index component that will be primary. Also, we saw the advanced features of the Auth scaffolding. This contained profile management, team management, and other features. However, you can use livewire also with the Jetstream auth. In the functionality wise nothing will be changed only the changes will be on code base architecture. We discussed all these functionalities hence, we can wrap up this post. Thank you.