LARAVEL 10 Auth with Livewire Jetstream step by step example

Spread the love

Hello Guys,

In this article, we’ll explore how to implement authentication in Laravel 10 using Auth with Livewire Jetstream. Discover the power of Livewire Jetstream in Laravel 10 as we walk you through the process of setting up authentication.

Laravel 10, powered by Tailwind CSS, introduces Jetstream, a robust scaffolding tool that seamlessly integrates Livewire and Inertia. Jetstream provides essential features such as login, registration, email confirmation, two-factor authentication, session management, API access via Laravel Sanctum, and team management tools for your Laravel application.

Leveraging Laravel Livewire, Blade templates, Controllers, and Validation, you can effortlessly create modern, dynamic, and responsive interfaces. Livewire allows you to harness the capabilities of a JavaScript framework while keeping your code within the Laravel ecosystem, complete with built-in validation.

Let’s dive into the step-by-step process of setting up authentication using Laravel 10 and Livewire Jetstream:

Follow these steps to implement Auth with Livewire Jetstream:

Step 1: Install Laravel 10:

In this context, it is essential to utilize the composer command for installing the Laravel 10 application.

Also Read: How to Create Custom Helper Functions in LARAVEL 10

composer create-project laravel/laravel example-app

Step 2: Install Jetstream:

Now that we’ve progressed to this point, it’s essential to proceed with the installation of Jetstream using the Composer command. Let’s go ahead and execute the following command to install the respective library.

composer require laravel/jetstream

Step 3: Create Auth with Livewire:

The following step involves establishing authentication through the provided command. We offer straightforward login, signup, and email verification forms for your convenience. To enable team management functionality, simply include an extra option. Below, you can find the relevant commands:

Create authentication using the following command to enable straightforward login, signup, and email verification forms. If you want to add team management capabilities, remember to include the necessary additional option. Check out the commands below for reference:

Also Read: How to Add Foreign Key in MIGRATION using Laravel?

php artisan jetstream:install livewire
  
OR
  
php artisan jetstream:install livewire --teams

Let’s proceed with the installation of the Node.js package:

npm install

Let’s initiate the package execution:

npm run dev

In order to create a database table, it’s essential to execute the migration command:

Also Read: How to Rollback Migration in Laravel?

php artisan migrate

Feel free to proceed and explore. They have meticulously configured each view, action, and component within your Laravel 10 application.

Step 4: Laravel 10 Jetstream Features:

Laravel 10 Jetstream introduces a range of customizable features. You have the flexibility to enable or disable these features by adjusting the settings in the configuration files fortify.php and jetstream.php, as demonstrated below:

config/fortify.php
....
  
'features' => [
        Features::registration(),
        Features::resetPasswords(),
        Features::emailVerification(),
        Features::updateProfileInformation(),
        Features::updatePasswords(),
        Features::twoFactorAuthentication(),
    ],
...
config/jetstream.php

Also Read: How to Drop Soft Delete from Table using Migration in LARAVEL?

....
  
'features' => [
        Features::profilePhotos(),
        Features::api(),
        Features::teams(),
    ],
...

Run Laravel App:

Once you’ve successfully completed all the essential steps, it’s time to execute the following command and hit Enter to initiate the launch of your Laravel application:

php artisan serve

To access the application’s results, simply input the provided URL into your web browser.

Also Read: Laravel 10 CRUD Example step by step

http://localhost:8000/

Your quest for the best Laravel blog ends here, where expert knowledge meets curated excellence.

Leave a Comment