DEV Community

Cover image for Vue App with Lumen Passport API (Part I)
Ezichi Ebere Ezichi
Ezichi Ebere Ezichi

Posted on

Vue App with Lumen Passport API (Part I)

Why Lumen?

Lumen is a stripped down version of Laravel for building APIs. This makes it a lightweight framework. I'm currently using Lumen in a project and I want to use this opportunity to share some of the things I've learnt.

What we'll build

We will build a Vue app for users to save their contacts. This will cover mainly authentication and CRUD operations. For the styling we'll use Tailwindcss. For this Part I, we will be setting up lumen passport.

Without further ado...

Install Lumen

Visit Lumen and follow installation instruction.

Install Lumen Generator

As pointed out earlier, a lot of things in Laravel are missing in Lumen. This package brings in some of Laravel artisan commands to Lumen. Run the following command in your terminal at the root of the project.

composer require flipbox/lumen-generator

In bootstrap/app.php add the following:

Enter fullscreen mode Exit fullscreen mode

Now we have some artisan commands. We can generate app key.

php artisan key:generate

It's always good practice to use version control to keep track of your changes.

You can also use postman to check that your endpoint is working.

Install Lumen Passport

We'll be using a package by Dusterio. You can visit the Github link here to follow the installation or continue with the tutorial.

composer require dusterio/lumen-passport

Enable Laravel Passport and Lumen Passport

File path: bootstrap/app.php

Uncomment these lines to enable facade, eloquent and routeMiddleware



    'auth' => App\Http\Middleware\Authenticate::class,
Enter fullscreen mode Exit fullscreen mode

Uncomment the service providers as well

Enter fullscreen mode Exit fullscreen mode

Register the Passport providers

Enter fullscreen mode Exit fullscreen mode

Laravel Passport ^7.3.2 and newer

In bootastrap/app.php comment this out

$app = new Laravel\Lumen\Application(
Enter fullscreen mode Exit fullscreen mode

Use this instead

$app = new \Dusterio\LumenPassport\Lumen7Application(
Enter fullscreen mode Exit fullscreen mode

Migrate and install Laravel Passport

Create new tables for Passport

Create database and fill the details in .env

php artisan migrate

Configure Authentication (DO THIS BEFORE ‘php artisan passport:install’)
Edit config/auth.php (You may have to create the config folder and auth.php file if they are not there)
In your config/auth.php, you can add the following

return [
    'defaults' => [
        'guards' => 'api'
    'guards' => [
        'api' => [
            'driver' => 'passport',
            'provider' => 'users', // default
    'providers' => [
        'users' => [
            'driver' => 'eloquent',
            'model' => \App\Models\User::class
Enter fullscreen mode Exit fullscreen mode

Load the config since Lumen doesn't load config files automatically:
In bootstrap/app.php add the code below.
(Preferably below $app->configure(‘app’). Follow the pattern)

Enter fullscreen mode Exit fullscreen mode

Install encryption keys and other stuff for Passport

php artisan passport:install

It will output the Personal access client ID and secret, and the Password grand client ID and secret. You may store these in your .env file or somewhere safe. Password grant client id and secret will be used for generating access token for user.

Registering Routes

In app/Providers/AuthServiceProvider.php
Add the routes inside the boot method (preferably before any other code)

Enter fullscreen mode Exit fullscreen mode

Don't forget to add use Dusterio\LumenPassport\LumenPassport;

User model

Add HasApiTokens trait to your user model.

use Laravel\Passport\HasApiTokens;

class User extends Model implements AuthenticatableContract, AuthorizableContract
    use HasApiTokens, Authenticatable, Authorizable, HasFactory;

    /* rest of the model */
Enter fullscreen mode Exit fullscreen mode

Add ‘password’ to fillable array in user model.

Create a user migration

php artisan make:migration create_users_table

Modify migration table to add the fields: name, email and password.

Schema::create('users', function (Blueprint $table) {
Enter fullscreen mode Exit fullscreen mode

Then migrate.

php artisan migrate

Finally, create a user with email and a hashed password. You will need this to generate a key. You can use tinker for this.

>>> use App\Models\User
>>> use Illuminate\Support\Facades\Hash
>>> User::create(['name'=>'John Doe', 'email'=>'', 'password'=>Hash::make('password')])
Enter fullscreen mode Exit fullscreen mode

Generate token with Postman

Open Postman and make a POST request to http://your_base_url/oauth/token. Enter the fields as in the image above. The username is the email of the user we created. Client secret and client id is the one we generated earlier. Be sure to make use of the correct password grant id and secret.

When you send the request, access token will be generated. We did it! In part two, we will continue with registration and login.

Discussion (0)