JWT Authentication for SPA with Laravel and Vue.js: Part 2


I will discuss how to set up JWT Authentication system in Laravel Application step by step.

1. Install Laravel: I think this part is easy. Just follow the instruction of Laravel Documentation. Even then I am telling. If you don't install composer, then firstly install composer from here. Then goto xampp/wamp folder, in htdocs run termical and write this code.

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



2. Go to the project folder

cd jwtlaravel



3. Let's install all dependencies by running the below command.

npm install



4. Now we will need run our migration to create users table but before that ensure you provide your database credentials in your .env file and create a database.

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


5. Then run the below command to make tables in database.

php artisan migrate

Now JWT Authentication is starting. Step by step I will do that. I will follow this link to do that.

6. Run the following command to pull in the latest version:

composer require tymon/jwt-auth



7. Go to config/jwt.php and publish the config with below code:

php artisan vendor:publish --provider="Tymon\JWTAuth\Providers\LaravelServiceProvider"



8. Generate a secret key which will update .env file with something like this: JWT_SECRET=secret_key

php artisan jwt:secret



9. Update User.php. Becareful to add JWTSubject in header and implements JWTSubject with class User. Finally add those two functions.

namespace App;

use Tymon\JWTAuth\Contracts\JWTSubject;
use Illuminate\Notifications\Notifiable;
use Illuminate\Foundation\Auth\User as Authenticatable;

class User extends Authenticatable implements JWTSubject
{
use Notifiable;

// Rest omitted for brevity

public function getJWTIdentifier()
{
return $this->getKey();
}

public function getJWTCustomClaims()
{
return [];
}
}

10. Inside the config/auth.php file you will need to make a few changes to configure Laravel to use the jwt guard to power your application authentication.

'defaults' => [
'guard' => 'api',
'passwords' => 'users',
],

...

'guards' => [
'api' => [
'driver' => 'jwt',
'provider' => 'users',
],
],

11. Add some basic routes in routes/api.php for register, login etc.

Route::group([
'middleware' => 'api',
'prefix' => 'auth'
], function ($router) {
Route::post('register', 'AuthController@register');
Route::post('login', 'AuthController@login');
Route::post('logout', 'AuthController@logout');
Route::post('refresh', 'AuthController@refresh');
Route::post('me', 'AuthController@me');
});

12. Then create the AuthController, either manually or by running the artisan command:

php artisan make:controller AuthController



13. Now I will write code for registration in AuthController


public function register(Request $request)
{
$this->validate($request, [
'name'=> 'required',
'email' => 'required',
'password' => 'required'
]);

$user = new User();
$user->name = $request->name;
$user->email = $request->email;
$user->password = bcrypt($request->password);
$user->save();
return response()->json(['user' => $user]);
}


14. In this step I will create a form of Registration in Vue Components. I will not show how to create a Components and do any style here. Just a simple form with Vue.js. And here I will submit this form with Ajax. In vuejs, ajax request is called withaxios. I have to install axios with this command: npm install --save axios vue-axios


15. You have to install Vue-Router for routing with Vue.js. Run this command to install vue-router: npm install vue-router --save

Now add this to app.js

import VueRouter from 'vue-router'
Vue.use(VueRouter)


16. Now, Add register route to app.js:

Vue.component('app-main', require('./components/AppMain.vue').default);
const routes = [
{
path: '/register',
component: require('./components/auth/Registration.vue').default
},
]

const router = new VueRouter({
routes,
mode: 'history'
})

const app = new Vue({
el: '#app',
router
});

17. I have to attach vue js with Laravel. But how? Create a new blade file in the same location of welcome.blade.php and paste the below code.

18. AppMain.vue file will be like the below. Please remind it, I am not doing any design. Just the work flow. I think many design we can find in online.




I think this is the finish of Registration with Laravel and Vue.js. Next we will see the Login Part. See you later.