Laravel 9 Authentication Using Inertia JS

Websolutionstuff | Dec-05-2022 | Categories : Laravel

In this article, we will see laravel 9 authentication using inertia js. Here, you can learn how to authenticate using jetstream inertia js in laravel 8/9. Laravel jetstream provides login, register, email verification, two-factor authentication, and team management features. You can authenticate using livewire and inertia JS using laravel jetstream.

Jetstream is designed using Tailwind CSS and offers your choice of Livewire or Inertia scaffolding. Here, we will use inertia js for authentication in laravel 9. 

Inertia.js lets you quickly build modern single-page React, Vue, and Svelte apps using classic server-side routing and controllers. Inertia isn't a framework, nor is it a replacement for your existing server-side or client-side frameworks.

The inertia  JS uses vue.js as templating language which is provided by the jetstream. Inertia.js gives you the full power of Vue.js without the complexity of client-side routing.

So, let's see jetstream inertia js authentication in laravel 9, laravel 8/9 jetstream inertia js authentication, and laravel 9 inertia auth example.

 

Step 1: Install Laravel 9

In this step, we will install the laravel 9 application using the following command.

composer create-project laravel/laravel laravel_9_auth_inertia_js

 

 

Step 2: Install Jetstream

In this step, we will install laravel jetstream using the composer command.

composer require laravel/jetstream

 

Step 3: Create Authentication with Inertia

Now, we will create auth with help of the jetstream inertia js package. you can create basic login, register, and email verification is given the composer command. In advance, you can create team management if pass the inertia with the --team parameter.

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

Now, we will install the npm package using the following command.

npm install

After that, run the npm package using the following command.

npm run dev

Now, we will migrate the default table using the migration command.

php artisan migrate

 

Laravel 9 Jetstream Features

Laravel jetstreams are customized or configurable. When Jetstream is installed, the config/fortify.php configuration file is installed into your application. Within this configuration file, you can customize various aspects of Fortify's behavior. Within the fortify configuration file, you can also disable entire features of Fortify.

config/fortify.php

'features' => [
        Features::registration(),
        Features::resetPasswords(),
        Features::emailVerification(),
        Features::updateProfileInformation(),
        Features::updatePasswords(),
        Features::twoFactorAuthentication(),
    ],

config/jetstream.php

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

 

 

Step 4: Run Laravel 9 Inertia Application

Now, we will run the laravel 9 application using the following command.

php artisan serve

 

Output:

laravel_jetstream_inertia_js_login_page

laravel_jetstream_inertia_js_register_page

 


You might also like:

Recommended Post
Featured Post
How To Preview Image Before Upload In jQuery
How To Preview Image Before Up...

In this article, we will see how to preview an image before uploading it in jquery. You can use the JavaScript...

Read More

Jul-15-2022

How To Two Factor Authentication Using Email In Laravel 10
How To Two Factor Authenticati...

In this article, we will see how to two-factor authentication using email in laravel 10. Here, we will learn about...

Read More

Apr-14-2023

How To Disable Future Date In jQuery Datepicker
How To Disable Future Date In...

In this tutorial, we will see how to disable future dates in jquery datepicker. In the date picker, today's dat...

Read More

Jun-17-2022

Carbon diffForHumans Laravel Example
Carbon diffForHumans Laravel E...

In this article, we will see carbon diffForHumans in laravel. Carbon diffForHumans function in carbon provides the...

Read More

Dec-14-2020