Best Laravel + Vue Authentication Practice Using JWT Authentication

Best Laravel-Vue.js Authentication using JWT Auth: In Today’s world, Authentication is a primary concern for any web application because it will secure your web application from unauthorized users. In this tutorial, you will learn about Vue authentication using Laravel JWT package. I have also used Vuex as global state management.

Here, you can see a live demo on Laravel + Vue Authentication

Here, I am going to show you the process of implementing authentication for Vue Single Page Application with Laravel API.

Best Vue.js Authentication using Laravel – JWT Auth

Laravel is the most popular PHP framework for developing a robust and secure web application, and Vue.js is a lightweight front-end framework. Laravel framework provides built-in support for Vue.js to build a great app without refreshing a webpage.

I am going to give you a demo of authentication in

Vue – Laravel using JWT Auth.

Content Index

Dependencies

Node.js
Laravel 5.8
JWT Auth 0.5.12
NPM 6.4.1
Vue.js 2.0
Vue-router
Vue-axios

First of all, You need to create a new laravel project using composer. Make sure you have installed composer in your machine.

#1: Create a new Laravel Project

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

1	composer create-project --prefer-dist laravel/laravel laravel-vue-auth

After Creating Laravel 5.8 Project, Go to the project directory and install NPM for Vue.js Dependencies.

npm install

1	npm install

#2: Configure Database

Now, Next step is to create a database and provide the database name and credential in the .env file.

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

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=laravel_vue_auth

DB_USERNAME=root

DB_PASSWORD=

After, Configure the database in the .env file type the following command to run the migration.

php artisan migrate

1	php artisan migrate

#3: Install Vue Libraries

Install some necessary Vue libraries such as Vue-Router, Vue-axios, and Vuex.

npm install vue-router vue-axios vuex --save

1	npm install vue-router vue-axios vuex --save

You need to import and use those dependencies in the app.js file which located inside resources >> js folder.

import Vue from 'vue';
import VueRouter from 'vue-router';
import axios from 'axios';
import VueAxios from 'vue-axios';
import App from './App.vue';

Vue.use(VueRouter);
Vue.use(VueAxios, axios);

import Vue from 'vue';

import VueRouter from 'vue-router';

import axios from 'axios';

import VueAxios from 'vue-axios';

import App from './App.vue';

Vue.use(VueRouter);

Vue.use(VueAxios, axios);

#4: Create Vue Components

Create a file called App.vue in resources >> assets >> js folder and write below code in App.vue file.

<template>
    <div>
        <nav>
            <div class="container">
                <div class="nav-wrapper">
                    <ul id="nav-mobile" class="left hide-on-med-and-down">
                        <li>
                            <router-link :to="{ name: 'home' }">Home</router-link>
                        </li>
                    </ul>
                    <ul id="nav-mobile2" class="right">
                        <li v-if="!this.$store.state.isLoggedIn">
                            <router-link :to="{ name: 'login' }">Login</router-link>
                        </li>

                        <li v-if="!this.$store.state.isLoggedIn">
                            <router-link :to="{ name: 'register' }">Register</router-link>
                        </li>
                        <li v-if="this.$store.state.isLoggedIn">
                            <a href="#" class="" @click="logout()">Logout</a>
                        </li>
                        <li>
                            <a href="https://www.google.com" target="_blank" class="github"><i class="fa fa-github"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <transition name="fade" mode="out-in">
            <router-view></router-view>
        </transition>
        <footer class="page-footer">
            <div class="footer-copyright">
                <div class="container">
                    <span>&copy; 2018</span>  <a href="https://artixun.com" target="_blank" style="color:white;text-decoration:none">Artixun Softwares.</a>
                </div>
            </div>
        </footer>
    </div>
</template>

<div>

<nav>

<li>

<router-link :to="{ name: 'home' }">Home</router-link>

</li>

</ul>

<router-link :to="{ name: 'login' }">Login</router-link>

</li>

<router-link :to="{ name: 'register' }">Register</router-link>

</li>

<a href="#" class="" @click="logout()">Logout</a>

</li>

<li>

</li>

</ul>

</div>

</nav>

<router-view></router-view>

</transition>

</div>

</footer>

</div>

</template>

Create another file called Home.vue inside resources >> assets >> js >> components folder and write the following code.

<template>
    <h4>Laravel 5.8 Vue SPA Authentication</h4>
</template>

<h4>Laravel 5.8 Vue SPA Authentication</h4>

</template>

Then, write the below code in the app.js file.

import Vue from 'vue';
import VueRouter from 'vue-router';
import axios from 'axios';
import VueAxios from 'vue-axios';
import App from './App.vue';
import Home from './components/Home.vue';

Vue.use(VueRouter);
Vue.use(VueAxios, axios);

const router = new VueRouter({
    mode: 'history',
    routes: [
    {
        path: '/',
        name: 'home',
        component: Home
    },
});

new Vue({
    router,
    el: '#app',
    render: h => h(App)
});

import Vue from 'vue';

import VueRouter from 'vue-router';

import axios from 'axios';

import VueAxios from 'vue-axios';

import App from './App.vue';

import Home from './components/Home.vue';

Vue.use(VueRouter);

Vue.use(VueAxios, axios);

const router = new VueRouter({

mode: 'history',

routes: [

{

path: '/',

component: Home

});

new Vue({

router,

el: '#app',

render: h => h(App)

});

In this tutorial, I have used materialize CSS framework. I have put CSS CDN in the welcome.blade.php file which found inside resources >>views directory. You can also include more external CSS and JS file inside the same data.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Laravel</title>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body style="background: #f5f5f5;">
{{--<div class="container">--}}
    <div id="app"></div>
{{--</div>--}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<script src="/js/app.js"></script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Laravel</title>

</head>

</body>

</html>

Then, Run the following command in your terminal. Every time it will compile the latest and existing CSS and JS files code when changes occur.

npm run watch

1	npm run watch

#4.1: Create a Register Component

Create a file called Register.vue file inside resources >> assets >> js >> components folder and put the following code in Register.vue file.

<template>
    <div class="row" style="margin:2% auto; width:420px; margin-bottom:90px;">
        <div class="container col s12">
            <div class="heading">
                <center><h5>Sign Up</h5></center>
            </div>
            <div class="progress" v-if="isProgress">
                <div class="indeterminate"></div>
            </div>
            <div class="login-form">
                <div class="row">
                    <div class="input-field col s12">
                        <input id="name" type="text" class="validate" v-model="name">
                        <label for="name">Name</label>
                        <span class="text text-danger" v-if="error && errors.name">{{ errors.name[0] }}</span>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <input id="email" type="text" class="validate" v-model="email">
                        <label for="email">Email</label>
                        <span class="text text-danger" v-if="error && errors.email">{{ errors.email[0] }}</span>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <input id="password" type="password" class="validate" v-model="password">
                        <label for="password">Password</label>
                        <span class="text text-danger" v-if="error && errors.password">{{ errors.password[0] }}</span>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <input id="confirm_password" type="password" class="validate" v-model="confirmPassword">
                        <label for="confirm_password">Confirm Password</label>
                        <span class="text text-danger" v-if="error && errors.confirmPassword">{{ errors.confirmPassword[0] }}</span>
                    </div>
                </div>
                <button class="btn btn-block waves-effect waves-light submit" type="button" name="action" @click.prevent="register()">Register</button>
            </div>
        </div>
    </div>
</template>

</div>

</div>

<span class="text text-danger" v-if="error && errors.name">{{ errors.name[0] }}</span>

</div>

<label for="email">Email</label>

<span class="text text-danger" v-if="error && errors.email">{{ errors.email[0] }}</span>

</div>

<label for="password">Password</label>

<span class="text text-danger" v-if="error && errors.password">{{ errors.password[0] }}</span>

</div>

<label for="confirm_password">Confirm Password</label>

<span class="text text-danger" v-if="error && errors.confirmPassword">{{ errors.confirmPassword[0] }}</span>

</div>

<button class="btn btn-block waves-effect waves-light submit" type="button" name="action" @click.prevent="register()">Register</button>

</div>

</template>

#4.2: Create a Login Component

Create another file called Login.vue inside the same directory and put the below code.

<template>
    <div class="row" style="margin:2% auto; width:420px;margin-bottom:30px;">
        <div class="container col s12">
            <div class="heading">
                <center><h5>Sign In</h5></center>
            </div>
            <div class="progress" v-if="isProgress">
                <div class="indeterminate"></div>
            </div>
            <div class="alert alert-danger" v-if="loginError && errors.message">
                <span>{{ errors.message[0] }}</span>
            </div>
            <div class="login-form">
                <div class="row">
                    <div class="input-field col s12">
                        <input id="email" type="text" class="validate" v-model="email">
                        <label for="email">Email</label>
                        <span class="text text-danger" v-if="loginError && errors.email">{{ errors.email[0] }}</span>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <input id="password" type="password" class="validate" v-model="password">
                        <label for="password">Password</label>
                        <span class="text text-danger" v-if="loginError && errors.password">{{ errors.password[0] }}</span>
                    </div>
                </div>
                <button class="btn btn-block waves-effect waves-light submit" type="button" name="action" @click="login()">Login</button>
            </div>
        </div>
    </div>
</template>

</div>

</div>

<span>{{ errors.message[0] }}</span>

</div>

<label for="email">Email</label>

<span class="text text-danger" v-if="loginError && errors.email">{{ errors.email[0] }}</span>

</div>

<label for="password">Password</label>

<span class="text text-danger" v-if="loginError && errors.password">{{ errors.password[0] }}</span>

</div>

<button class="btn btn-block waves-effect waves-light submit" type="button" name="action" @click="login()">Login</button>

</div>

</template>

#4.3: Create a Dashboard Component

Make a Dashboard.vue file inside the same directory and write the below code in it.

<template>
    <h4>Welcome to Dashboard</h4>
</template>

<h4>Welcome to Dashboard</h4>

</template>

Here, I have also used Vuex as state management, which will store JWT token in local storage and manage it for the overall application.

To use Vuex create a file called store.js inside resources >> js and put the following code inside it.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        isLoggedIn: !!localStorage.getItem('token'),
        token: localStorage.getItem('token')
    },
    mutations: {
        LoginUser (state, data) {
            state.isLoggedIn = true;
            let token = data.access_token;
            state.token = token;
            localStorage.setItem('token', token)
        },
        LogoutUser (state) {
            state.isLoggedIn = false;
            state.token = localStorage.removeItem('token')
        },
        tokenStored (state) {
            state.token = localStorage.getItem('token')
        }
    }
})

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

state: {

isLoggedIn: !!localStorage.getItem('token'),

token: localStorage.getItem('token')

mutations: {

LoginUser (state, data) {

state.isLoggedIn = true;

let token = data.access_token;

state.token = token;

localStorage.setItem('token', token)

LogoutUser (state) {

state.isLoggedIn = false;

state.token = localStorage.removeItem('token')

tokenStored (state) {

state.token = localStorage.getItem('token')

}

})

Then, Replace the content of the app.js file.

import Vue from 'vue';
import VueRouter from 'vue-router';
import axios from 'axios';
import VueAxios from 'vue-axios';
import App from './App.vue';
import Dashboard from './components/Dashboard.vue';
import Home from './components/Home.vue';
import Register from './components/Register.vue';
import Login from './components/Login.vue';
import store from './store';

Vue.use(VueRouter);
Vue.use(VueAxios, axios);

//vue-toaster
import Toaster from 'v-toaster';
import 'v-toaster/dist/v-toaster.css';

Vue.use(Toaster, {timeout: 2000});

const router = new VueRouter({
    mode: 'history',
    routes: [
    {
        path: '/',
        name: 'home',
        component: Home
    },

    {
        path: '/register',
        name: 'register',
        component: Register,
        meta: {
            auth: false
        }
    },

    {
        path: '/login',
        name: 'login',
        component: Login,
        meta: {
            auth: false
        }
    },

    {
        path: '/dashboard',
        name: 'dashboard',
        component: Dashboard,
        meta: { requiresAuth: true }
    }]
});

router.beforeEach((to, from, next) => {

    // check if the route requires authentication and user is not logged in
    if (to.matched.some(route => route.meta.requiresAuth) && !store.state.isLoggedIn) {
        // redirect to login page
        next({ name: 'login' })
        return
    }

    // if logged in redirect to dashboard
    if(to.path === '/login' && store.state.isLoggedIn) {
        next({ name: 'dashboard' })
        return
    }

    next()
});

// new Vue(App).$mount('#app');
new Vue({
    router,
    store,
    el: '#app',
    render: h => h(App)
});

import Vue from 'vue';

import VueRouter from 'vue-router';

import axios from 'axios';

import VueAxios from 'vue-axios';

import App from './App.vue';

import Dashboard from './components/Dashboard.vue';

import Home from './components/Home.vue';

import Register from './components/Register.vue';

import Login from './components/Login.vue';

import store from './store';

Vue.use(VueRouter);

Vue.use(VueAxios, axios);

//vue-toaster

import Toaster from 'v-toaster';

import 'v-toaster/dist/v-toaster.css';

Vue.use(Toaster, {timeout: 2000});

const router = new VueRouter({

mode: 'history',

routes: [

{

path: '/',

component: Home

{

path: '/register',

component: Register,

meta: {

auth: false

}

{

path: '/login',

component: Login,

meta: {

auth: false

}

{

path: '/dashboard',

component: Dashboard,

meta: { requiresAuth: true }

}]

});

router.beforeEach((to, from, next) => {

// check if the route requires authentication and user is not logged in

if (to.matched.some(route => route.meta.requiresAuth) && !store.state.isLoggedIn) {

// redirect to login page

next({ name: 'login' })

return

}

// if logged in redirect to dashboard

if(to.path === '/login' && store.state.isLoggedIn) {

next({ name: 'dashboard' })

return

}

next()

});

// new Vue(App).$mount('#app');

new Vue({

router,

store,

el: '#app',

render: h => h(App)

});

In the above code, I have added register component, login component, and dashboard component routers with meta option and auth property, which will determine which router needs authentication.

Here, I have given requiresAuth true to dashboard route. So, dashboard route will not be able to access without login.

I have also handled a router.beforeEach() method which will check and match each route for authentication if requireAuth and isLogging are false then it will automatically redirect to the login page. Otherwise, it will redirect to the dashboard route.

I have completed Laravel + Vue Authentication Practice Using JWT Auth tutorial with example. I hope you have learned from this tutorial and will implement JWT Auth in your application. Thank you.

2 Comments

Nick7 says:

September 8, 2019 at 6:35 pm

Hi,
second step: data base
php artisan migrate =>Nothing to migrate

There is no make:migration. what about the user table??

- Siddharth Ghedia says:
  
  September 9, 2019 at 5:31 am
  
  Hi,
  
  For the second step, the user’s table migration is already provided by the Laravel, so we dont need to write that make:migration for the user’s table.
  
  Let me know if you got any other query.

Best Laravel + Vue Authentication Practice Using JWT Auth

Best Vue.js Authentication using Laravel – JWT Auth

Vue – Laravel using JWT Auth.

Dependencies

#1: Create a new Laravel Project

#2: Configure Database

#3: Install Vue Libraries

#4: Create Vue Components

#4.1: Create a Register Component

#4.2: Create a Login Component

#4.3: Create a Dashboard Component

About the author

Parth Vakil

2 Comments

Leave a Comment X