Tutorial 4: How to Build a Laravel 5.4 JWT-Powered Mobile App API. (Part 1)

This API was built for the Quotes app at the repo below.

React Native/Redux Quotes App

Please note that this tutorial assumes you have some PHP experience, this tutorial does not explain each line of the code instead it presents you with the code and gives you an overview of what the code does and points out the important parts of the code. I have made the code as simple as possible, if you have any questions, please do not hesitate to leave a comment.

View project on Github

Step 1: Create new project and install jwt-auth

Create Laravel project

laravel new JWTAuthentication

Install jwt-auth

Open composer.json and update the require object to include jwt-auth

composer.json

Then run

composer update

Step 2: Add JWT Provider and Facades

Open up config/app.php, find the providers array and add the jwt-auth provider:

Tymon\JWTAuth\Providers\JWTAuthServiceProvider::class,

Find the aliases array and add the jwt-auth facades:

'JWTAuth' => Tymon\JWTAuth\Facades\JWTAuth::class, 
'JWTFactory' => Tymon\JWTAuth\Facades\JWTFactory::class

We also need to publish the assets for this package. From the command line:

After you run this command you will see a new file in the config folder called jwt.php. This file contains settings for jwt-auth, one of which we need to change right away. We need to generate a secret key, from the command line, run:

php artisan jwt:generate

You’ll see that after running this command we get a new value next to’secret’ where “changeme” was before.

Register the jwt.auth and jwt.refresh middleware in app/http/Kernel.php

Step 3: Set Up Routes

Open up routes/api.php.

routes/api.php

Step 4: Set Up Database

Since we are going to allow users to create their accounts within the application, we will need a table to store all of our users. Thankfully, Laravel already ships with a migration to create a basic users table, so we do not need to manually generate one. The default migration for the users table is located in the database/migrations directory.

We need to add an extra column to the users table. Open up the users migration file located in the migrations folder and update the up function.

database/migrations/create_users_table.php

Update app/User.php

Update .env file

Next, we need to update our database settings, update the .env file,

.env

If you are using MAMP be sure to add the unix_socket key with a value of the path that the mysql.sock resides in MAMP. Open config/database.php

And run migration

php artisan migrate

if you get the error below

[Illuminate\Database\QueryException] SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 767 bytes (SQL: alter table `users` add unique `users_email_unique`(`email`))
SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 767 bytes

Open up Providers/AppServiceProvider.php and update the boot function

Providers/AppServiceProvider.php

Step 5: Register

Create a new controller

php artisan make:controller AuthController

This will create AuthController.php in the app/Http/Controllers directory, paste the code below.

Register

Step 6: Log User In and Out

Login and Logout

Step 7: Recover Password

Step 8: Testing

If you are creating the API for the Quotes App tutorial, test with the app, if not use Chrome plugin Postman to test.

Register and Verify
Create a POST request to api/register with form-data under Body tab. Make sure to enter a valid email address so you can receive the recover password email.

http://localhost:8888/QuotesAPI/public/api/register

Login
Create a POST request to api/login with form-data under Body tab.

http://localhost:8888/QuotesAPI/public/api/login

For both test, you should receive a response similar to the one below

Register and Login Response

Logout
Create a GET request to api/logout.

http://localhost:8888/QuotesAPI/public/api/logout?token=[token_goes_here]

Recover Password
Create a POST request to api/recover with form-data under Body tab.

http://localhost:8888/QuotesAPI/public/api/recover

Unique Username and Email
Attempt to register with the username and/or email address you used in the previous test.

Thats all folks!

Show your support

Clapping shows how much you appreciated Moses Esan’s story.