Auth Scaffolding Using Jetstream with Livewire in Laravel 10

Laravel Jetstream is a full-stack application starter kit. It provides various features such as authentication, email verification, two-factor authentication, session management, etc. We will be discussing all these features of Jetstream Auth scaffolding in this post. This package comes up from the Laravel community itself. That means it is managed by the Laravel team. This advanced Auth scaffolding package in Laravel solves various problems related to auth management. It has features of
API support and optional team management feature out of the box. If we talk about the front-end management then it supports Livewire and Intertia Js as well. Today, we will see the Jetstream auth scaffolding using Livewire.

Before moving to the example, let’s take a look at the screenshot that we are going to implement.

This is a Dashboard page of the Jetstream Authentication. We will discuss more on this in this example.

Prerequisites

We are going to implement this functionality in Laravel 10. Therefore, you will need a Laravel 10 application. But, for working with Laravel 10, you must have the below tools.

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

Now, let’s start by creating a new project setup in Laravel 10. However, if you already have a fresh setup of the Laravel 10 application then you can skip this.

Step 1 – Create a Project For Laravel 10 Jetstream Auth

At the initial stage, you have to open the command line or terminal. Then hit the below command.

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

The application will be installed in a couple of seconds.

In the second step, you have to configure a database for it.

Step 2 – Connect a Database For Laravel 10 Application

Firstly, create a database in MySQL. Then come back to the project. Now, look at the .env file and configure 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. Now, the application is synced with the database.

Step 3 – Install Jetstream Auth in Laravel 10

You can install the Laravel Jetstream Auth package using Composer. Hence, inside the project folder open the terminal and hit the below command.

composer require laravel/jetstream

The package will add the Jetstream auth scaffolding.

After installing the package, Jetstream will add the tailwind.config.js and the webpack.mix.js in the project folder.

Step 4 – Install Livewire For Jetstream Auth Scaffolding

After adding the Jetstream package, you have to install Livewire in order to run the scaffolding. As I already said, we are going to implement Auth scaffolding using Jetstream with Livewire.

While installing Livewire with Jetstream, you have to keep in mind for one thing. Jetstream has a new additional feature for Team Management. Hence, if you want to include this feature then you need to install it with Livewire as shown in the below command.

php artisan jetstream:install livewire

OR

php artisan jetstream:install livewire --teams

The above command will install Livewire auth scaffolding dependencies in Laravel.

After adding the livewire scaffolding, you will have to install front-end dependencies using npm.

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 

The necessary front-end dependencies for the auth scaffolding will be installed. So, that the application UI will be running smoothly.

Step 6 – Migrate Database

The livewire scaffolding has added the migrations as well for managing the application. Hence, you need to migrate these migrations.

We already configured the database for the application. Therefore, you can run the migrate command to migrate the schema.

php artisan migrate

A couple of tables will be created with the default migrations.

That’s it. Now, you can run the application in order to check the result.

You will have the default homepage of Laravel 10 with auth links.

By clicking on Register, you will be redirected to the Register page.

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

Profile Management

In the dashboard, you will have various options like Team Management, Profile Section, Password updation option, and many more.

You can enable Two Factor Authentication and Logout Other Browser Sessions as well. So, at a time there will be only one browser session on login.

Team Management Features

You can manage the team from the Dashboard itself. There is an option to create a team and you can add a team member to your team as well.

So, that’s it from this post. I hope you will find it helpful for implementing the Laravel 10 Jetstream Auth scaffolding using Livewire.