Best Laravel + Vue Authentication Practice Using JWT Auth

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 unauthorised 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.

Dependencies

• Node.js
• Laravel 7.9
• JWT Auth
• NPM 6.4.1
• Vue.js 2.0
• Vue-router
• Vue-axios
• Vuex

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

After Creating Laravel Project, Go to the project directory by running the following command.

and install NPM for Vue.js Dependencies.

#2: Configure Database

Now, Next step is to create a database using phpmyadmin or any other tools and change some configuration in your .env file to use the database by providing the database name and credential as shown below.

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

#3: Install Vue Libraries

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

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

#4: Create Vue Components

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

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

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

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.

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.

#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.

#4.2: Create a Login Component

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

• 

#4.3: Create a Dashboard Component

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

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 new file called store.js inside resources >> js and put the following code inside it.

Then, Replace the content of the app.js file which was created before.

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 meta option true to dashboard route which indicates that route will not be able to access without login.

I have also handled a method called router.beforeEach() which will check 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.

#5: Install jwt-auth library for Laravel

Now, I am starting the server side implementation of our authentication. First of all, You need to install jwt-auth library for your laravel application.

This library is used to handle token for authentication over api. You can know more about jwt-auth library.

Then, Publish the configuration file by typing the following command for versions 5.5 or above.

Next, after installing the library you need to generate a secret key using the following command which will update your .env file with JWT_SECRET key.

Make sure to use jwt guard authentication in config >> auth.php file like below.

#6: Register jwt-auth Middleware

Now, Make sure to register the middleware, which comes up with JWT Auth package in Kernel.php file located inside app >> Http folder like below.

#7 Update User Model

Here, I am going to update the User Model by implementing the Tymon\JWTAuth\Contracts\JWTSubject interface.

This interface requires implementing two methods getJWTIdentifier and getJWTCustomClaims like below.

#8: Create API Routes

Now, Create api routes for authentication system in routes >> api.php file

#9: Create a Controller

Above, I have added api routes for register and login page. Now, I am implementing a controller for that routes.

So, Create a AuthController using below command.

This command will create a new file under app >> Http >> Controllers folder. Add the below code inside AuthController file.

Finally, 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 next application. Thank you.