Quick Prototyping ( Building realtime apps with Laravel and Vue) Part 2

Adding some Auth with axios and Passport

Just thinking of the perfect combo

Last time, we worked on setting up our components and getting our project’s architecture, for those just joining the series, you can find the last post here 👇

Quick Prototyping (Building realtime apps with Vue and Laravel) part1

The Objective

we are building an application from scratch using Laravel and Vue combined with extended Libraries (axios, passport, pusher and vuex) for realtime functionalities and better state management.

basically its as follows

• Set up components and base architecture. Part 1
• Set up api authentication and apiconsumption. Part 2 (we are here)
• Set up realtime functionalities. Part 3
• Set up scalable state management system. Part 4

In this section, we are going to add authentication via passport and set up axios to connect and communicate with our api. its as simple as that, pretty much a no brainer, so lets roll.

The Process

So at the moment we have our app running well and fine, just one problem, there’s no backend (api, database etc), so lets break it down.

For the backend we are going to use Sqlite, you can pretty much configure for MySql if you are in the mood, or when you are in the mood.

so

• Database — Sqlite (Sql based)
• Api requests — axios, (json response, jsend formated)
• Api Authentication — Laravel Passport based

To get, conversant with the jsend format.

check out

JSend

as mentioned in part 1, we have 3 major components in this application.

The NoteApp Components containing the other two, NoteSidebar and NoteEditor. the current structure of the NoteApp Components initialized its own data.

As this implies on creating a component we want to initialize its data from our api. so lets build our rest api.

Building the Api

To build our api we first set up our database. Since we are using sqlite, we are going to simply configure it in our config/database.php file.

In this file we are going to reference our database.sqlite file (we create this file in the storage directory, seems like a good place to put it)

'default' => 'sqlite', //we set the default to sqlite
/********************/
'sqlite' => [
    'driver' => 'sqlite',
    'database'=> storage_path('database.sqlite'),
    'prefix' => '',
],

Next we proceed to create users and notes tables in the database. Laravel already comes with a user migration

so we proceed to create the note table using the make migration command.

php artisan make:migration CreateNoteTable

This creates a scaffold which we filling to create our migrati0n, checking the database/migrations folder, we should see our new migration file prefixed with a number pattern. Filling in the migration Schema with the column names and attributes, title and content.

so we proceed to run our migration.

php artisan migrate

Now we proceed to set out our Controller functions to handle potential operations.

• The notes function returns all notes (mass retrieval), these are returned as json responses with respect to the jsend format.
• The createNote function creates notes. based on the parameters and returns a json response with the associated message.
• The deleteNote function deletes notes based on the id parameter passed in the url
• The updateNote Function updates the notes based on the sent parameters.

please note: this api is a simple implementation, in comparism to what a full scale application might need, but its best to follow the KISS principle (Keep It Simple Stupid !!) 😄

Next, we build up our routes to reference these functions.

In the routes/api.php file we structure our routes without middleware for now.

Its a pretty simple set up.

• ‘/notes’ retrieves notes from note function in NoteController
• ‘/notes/create’ creates new note from the createNote function
• ‘/notes/delete/{id}’ removes a note from the database using the id parameter
• ‘/notes/update/{id}’ updates the note corresponding to the id parameter with the method parameters sent. (these are obtained using the Illuminate\Http\Request class.

Note: all routes in the api.php file are prefixed with ‘api/’

Testing API

In order to test apis, you can use Postman, the tool allows you to send a request without the need of a web interface.

Postman

to get a clear understanding of postman 👆 check that out.

here’s a view of the postman interface, we can send our api requests with the appropriate methods and test the functionality.

Setting Up Axios

Now, we proceed to set up axios on our vue components to perform api requests.

So starting with our top component NoteApp we are going to make a call on create to obtain all notes and assign them to the data attribute.

In the process, there would usually be the problem of a data attribute being used before its instantiated in the created function, therefore we add a v-if directive binding on the data attributes, this is done on the child components called.

<note-sidebar v-if="notes" :initialnotes="notes" @noteChosen="noteSelected"></note-sidebar>
<note-editor v-if="firstNote" :note="firstNote"/>

With this set, we now collect the entire application state on creation from the note end point.

Now lets see about creating new notes on clicking the new note button.

Here we wrap the create Note push operation in this.notes in the axios promise call after sending a request containing two major attributes title and content, creating a new note.

Also we setup to deleteNote using the remove method, on clicking the remove option, a call is made to remove the object from database, then on success, we splice the prop.

This removes the object from the state, now we set up our update functionality on the NoteEditor Component.

In this case, on mounted we create a setInterval timing function that implements a save request every 4 miliseconds, this function performs a call to save the note using its attributes, we could perform, this operation on keyup event, but this would result in 429 error (to many requests). and we dont want to the user to keep pressing enter to save. So this is a good way to go.

Setting Up Passport

Now its time to set up Laravel passport, this would require setting up our auth process,

laravel is well equiped and comes with an auth scaffold so lets run the command to set up our basic auth

php artisan make:auth

this scaffolds and authentication system authentication routes are both

• /login
• /register

These routes are called in the Auth::routes() function, just added to your web.php routes. The entire authentication already works off the box, we are going to integrate it with passport, ( I’ll be covering the inner workings of the scaffolded auth system in a later post).

Integrating Passport

In order to integrate passport effectively we have to install its library

$ composer require laravel/passport

next we register the service provider in the config/app.php provider array

Laravel\Passport\PassportServiceProvider::class

next we run the migrations to create oauth tables in our database,

$ php artisan migrate

( we can use passport in building our oauth server, if we are that mean 😃)

Next we run the commands to create encryption keys for our token generation.

$ php artisan passport:install

Its time to Link passport with our user model and hook the routes to our AuthServiceProvider

After in the config/auth.php we set up passport as the driver for api routes

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

in order to consume our api with passport authentication we simply add this to the web array in the Kernel.php file

'web' => [
    // Other middleware...
    \Laravel\Passport\Http\Middleware\CreateFreshApiToken::class,
],

In order to perform logout we call the /logout route with a post method, Auth::routes() implement several authentication routes, /logout included.

so we hook on its operations by creating a logout method in the sidebar and calling it to operate

Logout:function(){
   axios.post('/logout').then(response => {
                location.reload();
            }).catch(error => {
                location.reload();
            });
  },
.....
// in our case we hooked this method in the NoteSidebar on a div
<div class="col-md-12"><span class="user-logged" style="cursor:pointer" @click="Logout">Logout</span></div>
//this calls Logout on click

Locking Down with Middleware

To lock down our api paths into our api auth model we simply call the auth middleware on it

Route::group(['middleware'=>'auth:api'],function(){
 // all routes go here
})

Conclusion

With all these set, we get to see our application run with an authentication interface all set. Simply serve with the command

php artisan serve

The Login Interface

Application on Logging in.

Now that we have authentication is time to set up with pusher for realtime functionality so that two users can update the notes at the same time.

By Part 3 we would be integrating these features, and exploring more on our application set up and flow.

to review our current flow checkout the project on github under the axios-passport branch.

Mozartted/RealNotes

Thanks for sticking this far. Feel free to send me feedback. If this was of help, feel free to clap 😃