OAuth2 Server with Laravel Passport

Laravel makes it almost a trvial task of enabling your application to provide OAuth2 authentication. For the most part this mainly involves installing and configuring Laravel Passport in your application.

In this article, we'll provide a guide on how to implement and use this great Laravel package to create your own OAuth2 server. This article continues to build on the project we started in building a VUE SPA with laravel and Material Component Framework with Laravel and Vue.

What is OAuth?

OAuth is an open standard for authorization which provides the freedom for anyone to implement. OAuth provides a standard that applications can use to provide client applications with secure delegated access over HTTPS to provide authorized devices, APIs, servers, and applications with access tokens rather than credentials.

There are two distinct versions of OAuth: namely OAuth 1.0a and OAuth 2.0. The specifications are completely different from one another, and cannot be used together: there is no backwards compatibility between them.

OAuth2 is the most widely used and popular of the OAuth standards and probably most confusingly when people refer to OAuth in most cases they are actually referring to the OAuth 2.0 standard.

Why OAuth

OAuth was created in a response to the direct authentication pattern. This pattern was made famous by HTTP Basic Authentication, where the user is prompted for a username and password is a primitive form of API authentication for server-side applications. Sites implementing Basic Authentication would prompt a user to enter their username and password directly into a form and they would login to your data. Once the user is identified and authorized for access the user details are often stored in a HTTP Cookie and stored within the user Browser and subsequently resent on every request the user makes. This approach is not only cumbersome but it is also poses a number of security vulnerablities

OAuth is a delegated authorization framework for REST/APIs. It enables applications to obtain limited access (scopes) to a userâ€™s data without giving away a userâ€™s password. It decouples authentication from authorization and supports multiple use cases addressing different device capabilities.

OAuth2 works by delegating user authentication to the service that hosts the user account, and authorizing third-party applications to access the user account.

Implementing OAuth2 with Laravel

Laravel makes it fairly easy to implement the OAuth2 but it still requires some configuration and integration. We will also need to make use of the out of the box full featured Laravel User model and authentication system.

A default Laravel application will by default already contain a User Table migration and User Model. If we take a quick look at database/migrations/2014_10_12_000000_create_users_table.php which is the User Table definition

<?php

use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateUsersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('name');
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password');
            $table->rememberToken();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('users');
    }
}

Typically I don't change any details to this table, I know other developers tend to add additional columns to store more information about the user. I prefer not to do this and if I need to add additional information will rather create an additional table and Model. We will also leave the default User model untouched.

<?php

namespace App;

use Illuminate\Notifications\Notifiable;
use Illuminate\Foundation\Auth\User as Authenticatable;

class User extends Authenticatable
{
  use Notifiable;

  protected $fillable = [
    'name', 'email', 'password',
  ];

  protected $hidden = [
    'password', 'remember_token',
  ];
}

This will suffice for our purpose all we need to do now is add Passport to our application and to do so we simply use the Laravel terminal commands.

composer require laravel/passport

This will install the Laravel Passport composer package to our Laravel application, now if you are using Laravel 5.5 or higher then that is all you need to do to configure Laravel Passport.

We now need to run the migration that will create all the required database tables that Laravel Passport will need. To do this run:

 php artisan migrate

Once complete then we can install passport and generate an encryption key. This encryption key will let passport securely generate access tokens. The command will also create a personal access client and a password client for us.

php artisan passport:install

Warning

If you are using Homestead then you will need to SSH into your Vagrant box to run these commands. To do so you should use vagrant ssh from your project root directory then once you have logged into your vagrant machine change directory into your project directory i.e. cd code

We now need to add the Laravel\Passport\HasApiTokens trait to the App\User model. This trait will provide some helper methods which allow you to inspect the authenticated userâ€™s token and scopes:

<?php

namespace App;

use Illuminate\Notifications\Notifiable;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Laravel\Passport\HasApiTokens;

class User extends Authenticatable
{
    use HasApiTokens, Notifiable;

    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name', 'email', 'password',
    ];

    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password', 'remember_token',
    ];

    /**
     * The attributes that should be cast to native types.
     *
     * @var array
     */
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];
}

Open the AuthServiceProvider and inside the register method of the class make a call to Passport::routes

<?php

namespace App\Providers;

use Illuminate\Support\Facades\Gate;
use Illuminate\Foundation\Support\Providers\AuthServiceProvider as ServiceProvider;
use Laravel\Passport\Passport;

class AuthServiceProvider extends ServiceProvider
{
    /**
     * The policy mappings for the application.
     *
     * @var array
     */
    protected $policies = [
        // 'App\Model' => 'App\Policies\ModelPolicy',
    ];

    /**
     * Register any authentication / authorization services.
     *
     * @return void
     */
    public function boot()
    {
        $this->registerPolicies();

        Passport::routes();
    }
}

Now, to the last part of configuring Laravel Passport. Open the ./config/auth.php file. Set the driver option of the api authentication guard to â€œpassportâ€. This will make sure your application uses Passportâ€™s TokenGuard while authenticating incoming API requests:

<?php

.....

'guards' => [
        'web' => [
            'driver' => 'session',
            'provider' => 'users',
        ],

        'api' => [
            'driver' => 'passport',
            'provider' => 'users',
            'hash' => false,
        ],
    ],

We need to edit app/Http/Kernel.php to include the line highlighted.

<?php

namespace App\Http;

use Illuminate\Foundation\Http\Kernel as HttpKernel;

class Kernel extends HttpKernel
{
    /**
     * The application's global HTTP middleware stack.
     *
     * These middleware are run during every request to your application.
     *
     * @var array
     */
    protected $middleware = [
        \App\Http\Middleware\CheckForMaintenanceMode::class,
        \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
        \App\Http\Middleware\TrimStrings::class,
        \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
        \App\Http\Middleware\TrustProxies::class,
    ];

    /**
     * The application's route middleware groups.
     *
     * @var array
     */
    protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
            \Laravel\Passport\Http\Middleware\CreateFreshApiToken::class,
        ],

        'api' => [
            'throttle:60,1',
            'bindings',
        ],
    ];

We have finished configuring Laravel Passport and we are ready to start using it in our application.

Adding User Interface for managing OAuth clients and tokens

We now need to create some component views that we will use to manage our tokens. Fortunately, Laravel Passport makes this really easy for us to do so!

If you have previously logged into vagrant box via SSH, should now exit to get back to the project root directory in your terminal window to run the following command

php artisan vendor:publish --tag=passport-components   # the --tag is a double dash!

This command will publish some Vue components fro plug-and-play usage to ~/resources/assets/js/components/passport

We now need to add these views to our ~/resources/js/app.js

import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbvue/build/css/mdb.css';
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter);

import App from './views/App'
import About from './views/About'
import Home from './views/Home'

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

Vue.component(
    'passport-authorized-clients',
    require('./components/passport/AuthorizedClients.vue')
);

Vue.component(
    'passport-clients',
    require('./components/passport/Clients.vue')
);

Vue.component(
    'passport-personal-access-tokens',
    require('./components/passport/PersonalAccessTokens.vue')
);


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

We register the Vue components published using the artisan vendor publish command and make them available throughout our application. We can now simply run yarn install or npm install and yarn watch to have our code activated.

Create Login Screens

Lets now create a login screen to be able to login into our application, to do so we'll create a Login View page so using the terminal create a new vue component.

touch resources/js/views/Login.vue

We will create a simple login screen, I will be making use of MDB Vue : A Material Design Component for Vue Pro is which is a Material Component Framework for Laravel and Vue so the mark up is dependent on that but should be fairly straight forward to understand

<template>
    <div class="mt-5 p-5">
        <mdb-container fluid grid-list-xl>
            <mdb-row>
                <mdb-col col="4"></mdb-col>
                <mdb-col col="4">
                    <form>
                        <input type="hidden" name="_token" :value="csrf_token">
                        <p class="h4 text-center mb-4">Sign in</p>
                        <div class="grey-text">
                            <mdb-input v-model="email" label="Your email" icon="envelope" type="email"/>
                            <mdb-input v-model="password" label="Your password" icon="lock" type="password"/>
                        </div>
                        <div class="text-center">
                            <mdb-btn @click.native.prevent="login">Login</mdb-btn>
                        </div>
                    </form>

                </mdb-col>
                <mdb-col col="4"></mdb-col>
            </mdb-row>
        </mdb-container>
    </div>

</template>

<script>
     import {
        mdbContainer,
        mdbRow,
        mdbCol,
        mdbInput,
        mdbBtn
    } from 'mdbvue';

    export default {
        name: 'Login',
        components: {
            mdbContainer,
            mdbRow,
            mdbCol,
            mdbBtn,
            mdbInput,
        },
      }
</script>

About
Latest Posts

Gary Woodfine

Technical Director at threenine.co.uk

Gary is Technical Director at threenine.co.uk, an independent software vendor specialising in IoT, Field Service and associated managed services,enabling customers to be efficient, productive, secure and scale-able.