Security is hard, but it doesn’t have to be! I’m going to outline a framework agnostic approach to securing your API.

Image for post
Image for post
Photo by Jason Blackeye on Unsplash

I have been trying to model a “best of both worlds” approach to API Authentication specific to SPAs. These types of applications run entirely in the clients browser and use asynchronous API calls to pull in the data for each page or action. This is great for the user experience because things appear to be faster and the page never has to reload.

However, it does become a logistical nightmare when handling API keys. A common approach to this scenario is using an OAuth server to authenticate and issue tokens. There are many different types of tokens, but most common are the Access Token/Refesh Token model. …


Image for post
Image for post

I will demonstrate how you can get all client requests (even authentication) to go through your single GraphQL endpoint. This will allow you to only need one client package for handling communication to your API from your web app. I will migrate the Laravel Authentication scaffolding to GraphQL and will be using Passport to handle the API tokens. Then I will convert my VueJS frontend to use only GraphQL. I am utilizing Lighthouse GraphQL for the server-side graphql endpoint.

You can find the full code example here on Github. Be sure to use the graphql-demo branch.

I am building this demo off of another article. If you need the basics on GraphQL check it out! …


Image for post
Image for post

I will be covering how to covert your Laravel Controllers, Resources, and Form Requests into a single GraphQL endpoint. After the conversion you will find that the amount of boilerplate needed per Model will be drastically reduced. My demo consists of a Ticket System and I am using VueJS to power the frontend.

So what is GraphQL?

To quote the GraphQL website,

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. …


Image for post
Image for post

Hold on to your hats and get ready to build a multi-tenant app. Something that can scale to your customers needs and potentially generate some revenue. Multi-tenant infrastructure is a great way to utilize one code base for all of your tenants and save your time in the process.

I will be going over the setup of a multi-tenant application from scratch with Laravel. I will be using MySQL and Ubuntu. Most of these steps will be applicable to other Linux-based distros as well.

Background

The whole point of a multi-tenant app is to give each tenant an individualized experience while using the same code base. I will be leveraging the Hyn\Multi-Tenant package to handle most of these functions. With this we can give each tenant its own database and this database is resolved during the beginning of the request life cycle. For instance, each tenant could use a different sub-domain (i.e. test.app.itplog.com). There is middleware built-in to the package that will automatically resolve to the Tenant’s database. …


Image for post
Image for post

This is about the day I spent optimizing my tests instead of my app. I just couldn’t take it anymore. My API tests would take over 10min to run. My first attempt at optimizing this process was separating the tests into groups, but this got out of hand quickly. So I finally sat down and figured out why the tests were slow and learned a lot along the way!

Check this article about my first attempt at getting this to work here.

Background

A little background on this app, I am utilizing the hyn\multi-tenant package for Laravel. …


Image for post
Image for post

I have recently run into a problem where I needed to validate the uniqueness of a text input real-time. This is pretty common in registration forms when you need to create a username. It would be pretty annoying for the user to have to constantly submit the form to see if their input will be accepted. This is where server-side validation comes into play.

In my project I am already utilizing Vuetify and VeeValidate so I will craft my solution around that. The concepts discussed here can be used with other packages, but might take some tinkering.

I will be using my demo project from a series I am making about multi-tenant web applications. You can find the link to Part 1 of the series and the github repo below. …


Image for post
Image for post

This is a topic alot of people (including myself) struggle with. I see the same question posted to forums everywhere. Trying to get Laravel Passport to work with VueJS is kind of a nightmare. This is why I prefer web authentication when building SPAs. Laravel has some very convenient middleware that handles all of the tokens, but the only catch is users need to authenticate using web auth. I will cover this specific scenario

This article will focus on moving the Laravel Auth views completely to VueJS with the exception of Login. …


Here we go again! I will be going over feature and unit tests for a multi-tenant application. It took me a while to actually get this working since I couldn’t find much material online. So I will be passing this knowledge onto you!

This article is part of a series. Check out the rest below!

Part 0 — Laravel Multi-Tenant App Setup

Part 1 — Laravel Passport and Hyn\Tenancy

Part 2 — VueJS and Laravel API

Part 3 — Laravel Multi-Tenant Testing←You are Here

You can find the full code example below. Make sure to use the Main branch.

I spent a long time trying to piece this all together. Granted this was my first experience writing tests, but adding in API authentication and per-tenant testing scenarios didn’t help. To solve this particular issue, I used testing examples from the hyn\multi-tenant package and various examples from the internet. …


Image for post
Image for post
Now that’s a Vue!

I’ll be creating a basic admin dashboard using VueJS. I am trying the Vuetify component package to make development easier. This was my first experience with Vuetify and it made creating this a breeze!

Edit — There is an updated article that revamps and builds upon this article. Check out Part 2.5

This article is part of a series. Check out the rest below!

Part 0 — Laravel Multi-Tenant App Setup

Part 1 — Laravel Passport and Hyn\Tenancy

Part 2 — VueJS and Laravel API ←You are Here

Part 3 — Laravel Multi-Tenant Testing

Here is the demo repo I am building on. Make sure to use the Main branch. …


Image for post
Image for post

This is the post you have all been waiting for. I have been working on building my SaaS application for three months and most of this time has been spent going into what seems like uncharted territory. There are three main packages I was trying to get working together: Laravel, Tenancy, and Passport.

Edit — This will work with Laravel 5.7 and Hyn\Multi-tenant 5.3

This article is part of a Series. Check out the others below!

Part 0 — Laravel Multi-Tenant App Setup

Part 1 — Laravel Passport and Hyn\Tenancy←You are Here

Part 2 — VueJS and Laravel API

Part 3 — Laravel Multi-Tenant…

About

Josh Krawczyk

Systems Engineer by day, Programmer by night. Just doing my best to juggle life, family, career, and passion.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store