Laravel 8 Auth with Inertia JS Jetstream Tutorial

In this tutorial you will learn about the Laravel 8 Auth with Inertia JS Jetstream Tutorial and its application with practical example.

In this Laravel 8 Auth with Inertia JS and Jetstream Tutorial will show how to create user authentication system using Inertia JS and Jetstream in laravel 8. In this tutorial you will learn to create user authentication in laravel using Inertia JS and Jetstream package. We will create login, register, logout, forget password, profile and reset password page using laravel Inertia JS and Jetstream authentication scaffolding without using laravel 8 make:auth command. Jetstream auth with Inertia JS package that enable us to generate default laravel authentication scaffolding. Laravel Inertia JS and Jetstream auth includes fully functional login, register, logout, reset password, forget password, email verification, two-factor authentication, session management.

Table Of Contents−

Laravel 8 Auth with Inertia JS Jetstream Tutorial

In this article, you will learn to create Authentication using Inertia JS and Jetstream. In this step by step tutorial you will understand Laravel 8 Authentication using Inertia JS and Jetstream:

Step 1: Install Laravel 8

First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command

composer create-project --prefer-dist laravel/laravel blog

1	composer create-project --prefer-dist laravel/laravel blog

Setup Database Credentials

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

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

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=lara8blog

DB_USERNAME=root

DB_PASSWORD=

Step 2: Create Auth with Jetstream Inertia JS

In this step, we will install Jetstream Package via the composer dependency manager. Use the following command to install Jetstream.

composer require laravel/jetstream

1	composer require laravel/jetstream

Now, install jetstream inertia authentication to create authentication using bellow command.

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

php artisan jetstream:install inertia

php artisan jetstream:install inertia --teams

Install node js package:

npm install

1	npm install

Now, run package:

npm run dev

1	npm run dev

Now, run following command to migrate database schema.

php artisan migrate

1	php artisan migrate

Step 3: Create Migration and Model

Now, in this step we will create migration file. Please run the following command:

php artisan make:migration create_posts_table

1	php artisan make:migration create_posts_table

Migration:

<?php
  
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
  
class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('body');
            $table->timestamps();
        });
    }
  
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

<?php

use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

class CreatePostsTable extends Migration

{

/**

* Run the migrations.

* @return void

public function up()

{

Schema::create('posts', function (Blueprint $table) {

$table->id();

$table->string('title');

$table->text('body');

$table->timestamps();

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::dropIfExists('posts');

}

php artisan migrate

1	php artisan migrate

Then create Post model by using following command:

php artisan make:model Post

1	php artisan make:model Post

App/Models/Post.php

<?php
  
namespace App\Models;
  
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
  
class Post extends Model
{
    use HasFactory;
  
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'title', 'body'
    ];
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;

use Illuminate\Database\Eloquent\Model;

class Post extends Model

{

use HasFactory;

/**

* The attributes that are mass assignable.

* @var array

protected $fillable = [

'title', 'body'

];

}

Step 4: Create Route

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

<?php
   
use Illuminate\Support\Facades\Route;
   
use App\Http\Controllers\PostController;
  
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
   
Route::resource('posts', PostController::class);

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\PostController;

|--------------------------------------------------------------------------

| Web Routes

|--------------------------------------------------------------------------

| Here is where you can register web routes for your application. These

| routes are loaded by the RouteServiceProvider within a group which

| contains the "web" middleware group. Now create something great!

Route::resource('posts', PostController::class);

Step 5: Create Controller

Now, lets create a controller named PostController using command given below –

app/Http/Controllers/PostController.php

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use Inertia\Inertia;
use App\Models\Post;
use Illuminate\Support\Facades\Validator;
  
class PostController extends Controller
{
    /**
     * Show the form for creating a new resource.
     *
     * @return Response
     */
    public function index()
    {
        $data = Post::all();
        return Inertia::render('posts', ['data' => $data]);
    }
  
    /**
     * Show the form for creating a new resource.
     *
     * @return Response
     */
    public function store(Request $request)
    {
        Validator::make($request->all(), [
            'title' => ['required'],
            'body' => ['required'],
        ])->validate();
  
        Post::create($request->all());
  
        return redirect()->back()
                    ->with('message', 'Post Created Successfully.');
    }
  
    /**
     * Show the form for creating a new resource.
     *
     * @return Response
     */
    public function update(Request $request)
    {
        Validator::make($request->all(), [
            'title' => ['required'],
            'body' => ['required'],
        ])->validate();
  
        if ($request->has('id')) {
            Post::find($request->input('id'))->update($request->all());
            return redirect()->back()
                    ->with('message', 'Post Updated Successfully.');
        }
    }
  
    /**
     * Show the form for creating a new resource.
     *
     * @return Response
     */
    public function destroy(Request $request)
    {
        if ($request->has('id')) {
            Post::find($request->input('id'))->delete();
            return redirect()->back();
        }
    }
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use Inertia\Inertia;

use App\Models\Post;

use Illuminate\Support\Facades\Validator;

class PostController extends Controller

{

/**

* Show the form for creating a new resource.

* @return Response

public function index()

{

$data = Post::all();

return Inertia::render('posts', ['data' => $data]);

}

/**

* Show the form for creating a new resource.

* @return Response

public function store(Request $request)

{

Validator::make($request->all(), [

'title' => ['required'],

'body' => ['required'],

])->validate();

Post::create($request->all());

return redirect()->back()

->with('message', 'Post Created Successfully.');

}

/**

* Show the form for creating a new resource.

* @return Response

public function update(Request $request)

{

Validator::make($request->all(), [

'title' => ['required'],

'body' => ['required'],

])->validate();

if ($request->has('id')) {

Post::find($request->input('id'))->update($request->all());

return redirect()->back()

->with('message', 'Post Updated Successfully.');

}

/**

* Show the form for creating a new resource.

* @return Response

public function destroy(Request $request)

{

if ($request->has('id')) {

Post::find($request->input('id'))->delete();

return redirect()->back();

}

In this step we will share ‘message’ and ‘errors’ variable for success message and validation error. Lets share this variables on appservices provider as following:

app/Providers/AppServiceProvider.php

<?php
   
namespace App\Providers;
  
use Illuminate\Support\ServiceProvider;
use Illuminate\Support\Facades\Session;
use Inertia\Inertia;
  
class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
          
    }
  
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Inertia::share([
            'errors' => function () {
                return Session::get('errors')
                    ? Session::get('errors')->getBag('default')->getMessages()
                    : (object) [];
            },
        ]);
  
        Inertia::share('flash', function () {
            return [
                'message' => Session::get('message'),
            ];
        });
    }
}

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;

use Illuminate\Support\Facades\Session;

use Inertia\Inertia;

class AppServiceProvider extends ServiceProvider

{

/**

* Register any application services.

* @return void

public function register()

{

}

/**

* Bootstrap any application services.

* @return void

public function boot()

{

Inertia::share([

'errors' => function () {

return Session::get('errors')

? Session::get('errors')->getBag('default')->getMessages()

: (object) [];

]);

Inertia::share('flash', function () {

return [

'message' => Session::get('message'),

];

});

}

Step 7: Create Vue Page

Now, create posts page vue file to list posts and create and update. so, let’s create it and add bellow code on it.

resources/js/Pages/posts.vue

<template>
    <app-layout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Manage Post - (Laravel 8 Inertia JS CRUD with Jetstream & Tailwind CSS)
            </h2>
        </template>
        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg px-4 py-4">
                    <div class="bg-teal-100 border-t-4 border-teal-500 rounded-b text-teal-900 px-4 py-3 shadow-md my-3" role="alert" v-if="$page.flash.message">
                      <div class="flex">
                        <div>
                          <p class="text-sm">{{ $page.flash.message }}</p>
                        </div>
                      </div>
                    </div>
                    <button @click="openModal()" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded my-3">Create New Post</button>
                    <table class="table-fixed w-full">
                        <thead>
                            <tr class="bg-gray-100">
                                <th class="px-4 py-2 w-20">No.</th>
                                <th class="px-4 py-2">Title</th>
                                <th class="px-4 py-2">Body</th>
                                <th class="px-4 py-2">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="row in data">
                                <td class="border px-4 py-2">{{ row.id }}</td>
                                <td class="border px-4 py-2">{{ row.title }}</td>
                                <td class="border px-4 py-2">{{ row.body }}</td>
                                <td class="border px-4 py-2">
                                    <button @click="edit(row)" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Edit</button>
                                    <button @click="deleteRow(row)" class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Delete</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="fixed z-10 inset-0 overflow-y-auto ease-out duration-400" v-if="isOpen">
                      <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
                        
                        <div class="fixed inset-0 transition-opacity">
                          <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
                        </div>
                        <!-- This element is to trick the browser into centering the modal contents. -->
                        <span class="hidden sm:inline-block sm:align-middle sm:h-screen"></span>
                        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full" role="dialog" aria-modal="true" aria-labelledby="modal-headline">
                          <form>
                          <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                            <div class="">
                                  <div class="mb-4">
                                      <label for="exampleFormControlInput1" class="block text-gray-700 text-sm font-bold mb-2">Title:</label>
                                      <input type="text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="exampleFormControlInput1" placeholder="Enter Title" v-model="form.title">
                                      <div v-if="$page.errors.title" class="text-red-500">{{ $page.errors.title[0] }}</div>
                                  </div>
                                  <div class="mb-4">
                                      <label for="exampleFormControlInput2" class="block text-gray-700 text-sm font-bold mb-2">Body:</label>
                                      <textarea class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="exampleFormControlInput2" v-model="form.body" placeholder="Enter Body"></textarea>
                                      <div v-if="$page.errors.body" class="text-red-500">{{ $page.errors.body[0] }}</div>
                                  </div>
                            </div>
                          </div>
                          <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                            <span class="flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto">
                              <button wire:click.prevent="store()" type="button" class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 bg-green-600 text-base leading-6 font-medium text-white shadow-sm hover:bg-green-500 focus:outline-none focus:border-green-700 focus:shadow-outline-green transition ease-in-out duration-150 sm:text-sm sm:leading-5" v-show="!editMode" @click="save(form)">
                                Save
                              </button>
                            </span>
                            <span class="flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto">
                              <button wire:click.prevent="store()" type="button" class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 bg-green-600 text-base leading-6 font-medium text-white shadow-sm hover:bg-green-500 focus:outline-none focus:border-green-700 focus:shadow-outline-green transition ease-in-out duration-150 sm:text-sm sm:leading-5" v-show="editMode" @click="update(form)">
                                Update
                              </button>
                            </span>
                            <span class="mt-3 flex w-full rounded-md shadow-sm sm:mt-0 sm:w-auto">
                              
                              <button @click="closeModal()" type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-base leading-6 font-medium text-gray-700 shadow-sm hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue transition ease-in-out duration-150 sm:text-sm sm:leading-5">
                                Cancel
                              </button>
                            </span>
                          </div>
                          </form>
                          
                        </div>
                      </div>
                    </div>
                </div>
            </div>
        </div>
    </app-layout>
</template>
<script>
    import AppLayout from './../Layouts/AppLayout'
    import Welcome from './../Jetstream/Welcome'
    export default {
        components: {
            AppLayout,
            Welcome,
        },
        props: ['data', 'errors'],
        data() {
            return {
                editMode: false,
                isOpen: false,
                form: {
                    title: null,
                    body: null,
                },
            }
        },
        methods: {
            openModal: function () {
                this.isOpen = true;
            },
            closeModal: function () {
                this.isOpen = false;
                this.reset();
                this.editMode=false;
            },
            reset: function () {
                this.form = {
                    title: null,
                    body: null,
                }
            },
            save: function (data) {
                this.$inertia.post('/posts', data)
                this.reset();
                this.closeModal();
                this.editMode = false;
            },
            edit: function (data) {
                this.form = Object.assign({}, data);
                this.editMode = true;
                this.openModal();
            },
            update: function (data) {
                data._method = 'PUT';
                this.$inertia.post('/posts/' + data.id, data)
                this.reset();
                this.closeModal();
            },
            deleteRow: function (data) {
                if (!confirm('Are you sure want to remove?')) return;
                data._method = 'DELETE';
                this.$inertia.post('/posts/' + data.id, data)
                this.reset();
                this.closeModal();
            }
        }
    }
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

<app-layout>

Manage Post - (Laravel 8 Inertia JS CRUD with Jetstream & Tailwind CSS)

</h2>

</template>

<div>

<p class="text-sm">{{ $page.flash.message }}</p>

</div>

<button @click="openModal()" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded my-3">Create New Post</button>

<thead>

<th class="px-4 py-2">Title</th>

<th class="px-4 py-2">Action</th>

</tr>

</thead>

<tbody>

<td class="border px-4 py-2">{{ row.title }}</td>

<button @click="deleteRow(row)" class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Delete</button>

</td>

</tr>

</tbody>

</table>

</div>

<form>

<label for="exampleFormControlInput1" class="block text-gray-700 text-sm font-bold mb-2">Title:</label>

<div v-if="$page.errors.title" class="text-red-500">{{ $page.errors.title[0] }}</div>

</div>

<div v-if="$page.errors.body" class="text-red-500">{{ $page.errors.body[0] }}</div>

</div>

Save

</button>

</span>

Update

</button>

</span>

Cancel

</button>

</span>

</div>

</form>

</div>

</app-layout>

</template>

import AppLayout from './../Layouts/AppLayout'

import Welcome from './../Jetstream/Welcome'

export default {

components: {

AppLayout,

Welcome,

props: ['data', 'errors'],

data() {

return {

editMode: false,

isOpen: false,

form: {

title: null,

body: null,

}

methods: {

openModal: function () {

this.isOpen = true;

closeModal: function () {

this.isOpen = false;

this.reset();

this.editMode=false;

reset: function () {

this.form = {

title: null,

body: null,

}

save: function (data) {

this.$inertia.post('/posts', data)

this.reset();

this.closeModal();

this.editMode = false;

edit: function (data) {

this.form = Object.assign({}, data);

this.editMode = true;

this.openModal();

update: function (data) {

data._method = 'PUT';

this.$inertia.post('/posts/' + data.id, data)

this.reset();

this.closeModal();

deleteRow: function (data) {

if (!confirm('Are you sure want to remove?')) return;

data._method = 'DELETE';

this.$inertia.post('/posts/' + data.id, data)

this.reset();

this.closeModal();

}

</script>

Run npm watch command below.

npm run watch

1	npm run watch

Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

//localhost:8000/post

1	//localhost:8000/post

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel 8 Auth with Inertia JS Jetstream Tutorial