Skip to content

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

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

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.

Shell

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:

Shell

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.

Shell

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

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

PHP

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

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

PHP

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

Shell

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

Laravel Passport Vue

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

JS

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.

Shell

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

HTML
Gary Woodfine
Latest posts by Gary Woodfine (see all)