DEV Community: StefanT123

Basic Git commands explained

StefanT123 — Thu, 11 Jun 2020 10:59:18 +0000

What's Git
Most common Git commands
- git clone
- git init
- git remote add
- git add
- git commit
- git log
- git push
- git branch
- git branch {branch-name}
- git branch -d {branch-name}
- git branch -D {branch-name}
- git push {remote-name} --delete {branch-name}
- git merge
- git fetch
- git pull
- git checkout
- git checkout -b {branch-name}
- git checkout {commit-hash}
- git checkout {commit-hash} {file-name}
- git reset
- git reset --hard {commit-hash}
- git revert

What's git

Git is distributed version-control system for tracking changes in files. It was originally created by Linus Torvalds in 2005 for development of the linux kernel as an open-source project. Current maintainer of git is Junio Hamano. Having a distributed architecture, Git is an example of Distributed Version Control System. That means that rather than having only one single place for the full version history of the software as is common in once-popular version control systems like CVS or Subversion (also known as SVN), in Git, every developer's working copy of the code is also a repository that can contain the full history of all changes.

Most common Git commands

Here are the most common Git commands and their explanation.

NOTE: As Git hosting I'm going to reffer to GitHub, but it's the same for every other Git hosting (GitLab, BitBucket, etc.)

`git clone`

COMMAND:

git clone {url-of-the-project}
git clone -b {some-specific-branch} {url-of-the-project} # clone from specific branch
git clone {url-of-the-project} {folder-in-which-to-clone} # clone in specific folder

DESCRIPTION:

It initializes Git, adds new remote and clones some existing project from GitHub to your computer

NOTE:

This command is used only once per project
That project can be empty, or it can already have some files in it
When cloning a project, by default it will clone the master branch, if not specified otherwise

USAGE:

If we want to get some project from GitHub and start working on it

`git init`

COMMAND:

git init

DESCRIPTION:

It initializes Git in the folder in which we're calling the command

NOTE:

This command is used only once per project and this is usualy the first command you'll run in a new project
When initializing Git in a project, by default it will initialize it on master branch

USAGE:

Convert an existing, unversioned project to a Git repository or initialize a new, empty Git repository

`git remote add`

COMMAND:

git remote add {name} {url-of-the-project}

DESCRIPTION:

It adds new remote
It takes two arguments:
- a remote name eg. origin
- a remote url eg. https://github.com/{username}/{repo}.git

NOTE:

At the begining of the project, we should set new remote
We can add many remotes, as long as they have different names (origin, upstream, etc.)
If the remote name already exists, Git will throw an error

USAGE:

We want to add new remote, so we can push our local repository to GitHub

`git add`

COMMAND:

git add {files-to-add}
git add . # add every change

DESCRIPTION:

It adds a change in our working directory to the staging area
Basically it tells Git that we want to include these changes to some file in the next commit

NOTE:

It doesn't really affect the repository until we make a commit

USAGE:

We've made some changes in our working directory (our project), and we want to include these changes in our next commit

`git commit`

COMMAND:

git commit # it will open some editor so you can write your commit message
git commit -m "some message" # commit message is written inline

DESCRIPTION:

It records every change that we've made in our working directory (that we've added with git add) as an object in our local repository

NOTE:

It will save the changes in our local repository, not on GitHub

USAGE:

We've made some progress in our project, and we want to save our project in this exact state
It's sort of like a backup for a project

`git log`

COMMAND:

git log

DESCRIPTION:

It will show all the commits in the project

USAGE:

We've want to see all previous commits that occured in the project

`git push`

COMMAND:

git push -u {remote-name} {branch} # it pushes to GitHub, and sets the branch as upstream so that next time you won't have to specify the branch on which to push
git push {remote-name} # if you have already set an upstream branch

DESCRIPTION:

It will push (copy) all your local repository content to GitHub

NOTE:

Once we push to GitHub, we can see all our work on the remote repository (GitHub)
You have to set remote name first with git remote add {name} {url}, so that Git will know what the remote is

USAGE:

We want to be sure that the commits we've made, won't be lost
We want to be able to access the project from multiple computers
We want to be able to collaborate with other people on a project

`git branch`

COMMAND:

git branch

DESCRIPTION:

It will show as all our local branches

USAGE:

We want to see what branches do we have locally

`git branch {branch-name}`

COMMAND:

git branch {branch-name}

DESCRIPTION:

It will create new branch

NOTE:

The branch will be created, but you will remain on the same branch (it won't switch you to the newly created branch)

USAGE:

We want to create a new branch

`git branch -d {branch-name}`

COMMAND:

git branch -d {branch-name}

DESCRIPTION:

It will delete a branch that's already merged

NOTE:

This is safest way to delete a branch

USAGE:

We want to delete a branch that's been merged and we don't need that branch anymore

`git branch -D {branch-name}`

COMMAND:

git branch -D {branch-name}

DESCRIPTION:

It will force delete a branch even if it's not already merged

NOTE:

Do this if you are 100% sure that you don't need that branch

USAGE:

We want to force delete a branch, and we don't care if it's merged or not

`git push {remote-name} --delete {branch-name}`

COMMAND:

git push {remote-name} --delete {branch-name}

DESCRIPTION:

It will delete a remote branch (a branch that's on GitHub)

NOTE:

We can delete a remote branch directly from GitHub

USAGE:

We want to delete some remote branch

`git merge`

COMMAND:

git merge {branch-name}

DESCRIPTION:

It will merge the specified branch on the current branch

NOTE:

If there are conflicts when you merge, you'll have to fix the conflicts first, remove the part you don't need and leave the part that you need
The current branch will be updated to reflect the merge, but the target branch will be completely unaffected

USAGE:

We want to combine work that's been done on two separate branches

`git fetch`

COMMAND:

git fetch {remote-name} {branch-name}

DESCRIPTION:

It will copy the contents from a remote repository branch into your local repository

NOTE:

Git will automatically make local branch with the same name as the remote branch
It won't affect your current branch or any other branch
If you run git branch it won't show you the newly created branch, to see it you will have to run git branch -r, however you can checkout to that branch with git checkout {branch-name}

USAGE:

We want see the work that's been done on some remote branch
We want to review the commits before merging them into our local repository

`git pull`

COMMAND:

git pull {remote-name} {branch-name}

DESCRIPTION:

It will copy the contents from a remote repository branch and merge all the changes into the current branch
Basically it will do git fetch and git merge

NOTE:

When you run git pull, it will automatically merge the branch you are pulling with the branch you are currently on

USAGE:

We want to update our local repository with a version from remote repository

`git checkout`

COMMAND:

git checkout {branch-name}

DESCRIPTION:

It will switch to some branch

NOTE:

Git checkout has many uses

USAGE:

We've created some branch with git branch {name}, and now we want to switch to that branch

`git checkout -b {branch-name}`

COMMAND:

git checkout -b {branch-name}

DESCRIPTION:

It will create and switch to that branch

NOTE:

It basically does git branch {branch-name} and git checkout {branch-name}

USAGE:

We've created some branch with git branch {name}, and now we want to switch to that branch

`git checkout {commit-hash}`

COMMAND:

git checkout {commit-hash}

DESCRIPTION:

It will go back to some commit so we can inspect the files at that point in time (when we commited)

USAGE:

We've want to see how the project looked like at some point in time (when we commited)

`git checkout {commit-hash} {file-name}`

COMMAND:

git checkout {commit-hash} {file-name}

DESCRIPTION:

It will get the version of some file and it will put it in place of our current file

USAGE:

We want to revert back some file as it was at some point in time (when we commited)

`git reset`

COMMAND:

git reset {commit-hash}

DESCRIPTION:

It will go back to some commit, but it will delete all commits that were after the specified commit

NOTE:

All commits that were after the specified commit will be deleted
It won't make any changes in the working directory (files will be preserved as they were)

USAGE:

We started working on something, and then we realized that we are doing something wrong and we want to fix that

`git reset --hard {commit-hash}`

COMMAND:

git reset --hard {commit-hash}

DESCRIPTION:

It will go back to some commit, but it will delete all commits that were after the specified commit and it will revert all the files as they were at the specified commit

NOTE:

All commits that were after the specified commit will be deleted
All the files will be reverted as they were at the commit that we've specified

USAGE:

We started working on something, and then we realized that we are doing something wrong and we want to start all over again

`git revert`

COMMAND:

git revert {commit-hash}

DESCRIPTION:

It will go back to some commit, but it will create new commit while doing this

NOTE:

All commits will be preserved
It will create new commit
Git revert is the safest command if we want to go back to some commit

USAGE:

When we want to return to some point in time (to some commit), but we want to be sure that no commit will be lost

If you think you have found any misleading information or a typo in this post, please comment below

PKCE authenticaton for Nuxt SPA with Laravel as backend

StefanT123 — Tue, 07 Apr 2020 09:53:16 +0000

In this post I will show you how you can use PKCE(Proof Key for Code Exchange) for authentication. I will use Nuxt.js, because that's what I use in my day to day workflow, but I will try to make it as generic as possible so that it can be implemented in other frameworks or even in vanilla javascript.

The Proof Key for Code Exchange extension is a technique for public clients to mitigate the threat of having the authorization code intercepted. The technique involves the client first creating a secret, and then using that secret again when exchanging the authorization code for an access token. This way if the code is intercepted, it will not be useful since the token request relies on the initial secret.

The basic workflow of the PKCE is this:

User requests to login
The SPA makes a random string for state and for code_verifier, then it hashes the code_verifier (we will use SHA256 as hashing algorithm), and it converts it to base64 url safe string, that's our code_challenge. Then it saves the state and code_verifier.
Make a GET request to the backend with the query parameters needed: client_id, redirect_uri, response_type, scope, state, code_challenge and code_challenge_method (there can be other required paramateres)
The user is redirected to the backend login page
The user submits it's credentials
The backend validates the submited credentials and authenticates the user
The backend then proceeds to the intended url from step 3
It returns a response containing code and state
SPA then checks if the returned state is equal as the state that was saved when we made the initial request (in step 2)
If it is the same, the SPA makes another request with query parameters grant_type, client_id, redirect_uri, code_verifier(that we saved in step 2) and code(that was returned by the backend) to get the token

For those who are lazy and don't want to read yet another post. Here are the links for the github repositories:

Backend
- Setting Laravel Passport
- Setting CORS
- Creating the API
Frontend

Backend

I will assume that you already have Laravel application set up, so I will go directly to the important parts of this post.

Setting Laravel Passport

We will use Laravel Passport which provides a full OAuth2 server implementation for your Laravel application. Specifically we will use the Authorization Code Grant with PKCE. As stated in the passport documentation

The Authorization Code grant with "Proof Key for Code Exchange" (PKCE) is a secure way to authenticate single page applications or native applications to access your API. This grant should be used when you can't guarantee that the client secret will be stored confidentially or in order to mitigate the threat of having the authorization code intercepted by an attacker. A combination of a "code verifier" and a "code challenge" replaces the client secret when exchanging the authorization code for an access token.

We are going to require the passport through composer
composer require laravel/passport

Run the migrations
php artisan migrate

And install passport
php artisan passport:install

Next we should add HasApiTokens trait to the User model

namespace App;

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

class User extends Authenticatable
{
    use HasApiTokens, Notifiable;

    // [code]
}

Register the Passport routes that we need within the boot method of AuthServiceProvider, and set the expiration time of the tokens

// [code]

use Laravel\Passport\Passport;

class AuthServiceProvider extends ServiceProvider
{
    // [code]

    public function boot()
    {
        $this->registerPolicies();

        Passport::routes(function ($router) {
            $router->forAuthorization();
            $router->forAccessTokens();
            $router->forTransientTokens();
        });
        Passport::tokensExpireIn(now()->addMinutes(5));
        Passport::refreshTokensExpireIn(now()->addDays(10));
    }
}

Set the api driver to passport in config/auth.php

// [code]

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

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

// [code]

And the last step is to create PKCE client
php artisan passport:client --public

You are then going to be prompted some questions, here are my answers:
Which user ID should the client be assigned to? -> 1
What should we name the client? -> pkce
Where should we redirect the request after authorization? -> http://localhost:3000/auth (your SPA domain)

Setting CORS

For laravel version < 7

Manually install fruitcake/laravel-cors and follow along, or you can create your own CORS middleware.

For laravel version > 7

Change your config/cors.php, so that you add the oauth/token in your paths, and your SPA origin in allowed_origins. My config looks like this

return [
    'paths' => ['api/*', 'oauth/token'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['http://localhost:3000'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => false,

];

Creating the API

Create the routes in routes/web.php, now this is important, the routes MUST be placed in routes/web, all the other routes can be in routes/api, but the login route must be in routes/web, because we will need session.

Route::view('login', 'login');
Route::post('login', 'AuthController@login')->name('login');

Now, create the login view and the AuthController.

In the resources/views create new login.blade.php file and in there we will put some basic form. I won't apply any style to it.

<form method="post" action="{{ route('login') }}">
    @csrf

    <label for="email">Email:</label>
    <input type="text" name="email">

    <label for="password">Password:</label>
    <input type="password" name="password">
    <button>Login</button>
</form>

Make AuthController and create login method in there

// [code]

public function login(Request $request)
{
    if (auth()->guard()->attempt($request->only('email', 'password'))) {
        return redirect()->intended();
    }

    throw new \Exception('There was some error while trying to log you in');
}

In this method we attempt to login the user with the credentials he provided, if the login is successfull we are redirecting them to the intended url, which will be the oauth/authorize with all the query parameters, if not, it will throw an exception.

Ok, that was it for the backend, now let's make the SPA.

Frontend

Create new nuxt application and select the tools you want to use, I will just use the axios module
npx create-nuxt-app <name-of-your-app>

Then we are going to need the crypto package for encryption
npm install crypto-js

Now replace all the code in pages/index.vue with this

<template>
  <div class="container">
    <button @click.prevent="openLoginWindow">Login</button>
  </div>
</template>

<script>

import crypto from 'crypto-js';

export default {
  data() {
    return {
      email: '',
      password: '',
      state: '',
      challenge: '',
    }
  },

  computed: {
    loginUrl() {
      return 'http://your-url/oauth/authorize?client_id=1&redirect_uri=http://localhost:3000/auth&response_type=code&scope=*&state=' + this.state + '&code_challenge=' + this.challenge + '&code_challenge_method=S256'
    }
  },

  mounted() {
    window.addEventListener('message', (e) => {
      if (e.origin !== 'http://localhost:3000' || ! Object.keys(e.data).includes('access_token')) {
        return;
      }

      const {token_type, expires_in, access_token, refresh_token} = e.data;
      this.$axios.setToken(access_token, token_type);

      this.$axios.$get('http://passport-pkce.web/api/user')
        .then(resp => {
          console.log(resp);
        })
    });

    this.state = this.createRandomString(40);
    const verifier = this.createRandomString(128);

    this.challenge = this.base64Url(crypto.SHA256(verifier));
    window.localStorage.setItem('state', this.state);
    window.localStorage.setItem('verifier', verifier);
  },

  methods: {
    openLoginWindow() {
      window.open(this.loginUrl, 'popup', 'width=700,height=700');
    },

    createRandomString(num) {
      return [...Array(num)].map(() => Math.random().toString(36)[2]).join('')
    },

    base64Url(string) {
      return string.toString(crypto.enc.Base64)
        .replace(/\+/g, '-')
        .replace(/\//g, '_')
        .replace(/=/g, '');
    }
  }
}
</script>

Let me explain what's going on in here

Creating the template, nothing fancy going on in here, we are creating a button and attaching onClick event that will trigger some function.
In the mounted event, we are binding an event listener to the window that we are going to use later, we are setting state to be some random 40 characters string, we are creating verifier that will be some random 128 character string, and then we are setting the challenge. The challenge is SHA256 encrypted verifier string converted to base64 string. And we are setting the state and the verifier in the localStorage.
Then we have some methods that we've defined.

Now the flow look like this

User clicks on the login button
On click it triggers a openLoginWindow function, which opens new popup window for the provided url
- this.loginUrl is a computed property that holds the url on which we want to authorize our app. It consist of base url (http://your-url/), the route for the authorization (oauth/authorize - this is the route that passport provides for us) and query parameters that we need to pass (you can look for them in the passports documentation): client_id, redirect_uri, response_type, scope, state, code_challenge and code_challenge_method.
The popup opens, and since we are not logged in and the oauth/authorize route is protected by auth middleware, we are redirected to the login page, but out intended url is saved in session.
After we submit our credentials and we are successfully logged in, we are the redirected to out intended url (which is the oauth/authorize with all the query parameters).
And if the query parameters are good, we are redirected to the redirect_url that we specified (in my case http://localhost:3000/auth), with state and code in the response.
On the auth page, that we are going to create, we need to check if the state returned from Laravel is the same as the state that we've saved in the localStorage, if it is we are going to make a post request to http://your-url/oauth/token with query parameters: grant_type, client_id, redirect_uri, code_verifier (this is the verifier that we stored in the localStorage) and code (that was returned by laravel).
If everything is ok, we're going to emmit an event (we're listening for that event in our index page) with the response provided by laraavel, in that response is our token.
The event listener function is called and we are setting the token on our axios instance.

Let's make our auth page so that everything becomes more clear. In pages create new page auth.vue and put this inside

<template>
  <h1>Logging in...</h1>
</template>

<script>
  export default {
    mounted() {
      const urlParams = new URLSearchParams(window.location.search);
      const code = urlParams.get('code');
      const state = urlParams.get('state');

      if (code && state) {
        if (state === window.localStorage.getItem('state')) {
          let params = {
            grant_type: 'authorization_code',
            client_id: 1,
            redirect_uri: 'http://localhost:3000/auth',
            code_verifier: window.localStorage.getItem('verifier'),
            code
          }

          this.$axios.$post('http://pkce-back.web/oauth/token', params)
            .then(resp => {
              window.opener.postMessage(resp);
              localStorage.removeItem('state');
              localStorage.removeItem('verifier');
              window.close();
            })
            .catch(e => {
              console.dir(e);
            });
        }
      }
    },
  }
</script>

Everything in here is explained in the 6th and 7th step. But once again, we are getting the state and code from the url, we are checking if the state from the url and the state we've stored in the localStorage are the same, if they are, make a post request to oauth/token with the required parameters and on success, emit an event and pass the laravel response which contains the token.

That's it, that's all you have to do, of course this is a basic example, your access_token should be short-lived and it should be stored in the cookies, and your refresh_token should be long-lived and it should be set in httponly cookie in order to secure your application. This was relatively short post to cover all of that, but if you want to know more, you can look at my other post Secure authentication in Nuxt SPA with Laravel as back-end, where I cover these things.

If you have any questions or suggestions, please comment below.

Create filters in Laravel with OOP best practices

StefanT123 — Tue, 31 Mar 2020 11:58:36 +0000

In this post I'll show you how can you create filters in Laravel following good Object-oriented programming principles.

Before we begin, keep in mind that you need to have a good understanding of Laravel, OOP and SOLID principles, also you'll need to have Laravel installed on your computer.

Create Laravel project

From the command line go to your apps folder (I keep mine in ~/Documents/apps) and create new Laravel project and cd into it.
laravel new filters
cd filters

Set up the environment

For this kind of applications I like to use sqlite as my database, because it's so easy to set it up, but you can use some other database provider if you want to.

To set up sqlite, edit the DB_CONNECTION in the .env file to sqlite (you can delete all other DB related fields like DB_HOST, DB_PORT, etc.) and make database.sqlite file in the app/database/ folder.

To create this file, run
touch database/database.sqlite

NOTE: By default sqlite connection in Laravel is looking for this file, but if you want to change the name of your database, you can override the default by setting DB_DATABASE in the .env file.

Set up the application

Next step is to set up the application. For simplicity this app will only have posts, categories and tags.

TIP: When creating a model in laravel, if you pass -a as argument at the end, it will generate a migration, seeder, factory, and resource controller for the model. Also there are various parameters that you can pass, if you want to see them just run php artisan make:model --help.

To create a model for post and all the other files, run
php artisan make:model Post -a

We will do the same for the categories and for the tags.
php artisan make:model Category -a
php artisan make:model Tag -a

Because one post can have many tags, and one tag can belong to many posts, we are going to need a pivot table between those two models.
php artisan make:migration create_post_tag_table

Migrations

Ok, now we have everything we need. We can now modify the migrations to suit our needs.

In the posts table we'll have title, body, views, user_id so that we can set up a relationship between Post and a User, and category_id because post belongs to a Category.

Schema::create('posts', function (Blueprint $table) {
    $table->id();
    $table->string('title');
    $table->text('body');
    $table->integer('views');
    $table->bigInteger('user_id')->unsigned();
    $table->bigInteger('category_id')->unsigned();
    $table->timestamps();

    $table->foreign('user_id')
        ->references('id')
        ->on('users')
        ->onDelete('cascade');

    $table->foreign('category_id')
        ->references('id')
        ->on('categories')
        ->onDelete('cascade');
});

categories table will only have a name.

Schema::create('categories', function (Blueprint $table) {
    $table->id();
    $table->string('name');
    $table->timestamps();
});

The tags table will also have only a name.

Schema::create('tags', function (Blueprint $table) {
    $table->id();
    $table->string('name');
    $table->timestamps();
});

And our post_tag pivot table will look like this

Schema::create('post_tag', function (Blueprint $table) {
    $table->primary(['post_id', 'tag_id']);
    $table->bigInteger('post_id')->unsigned();
    $table->bigInteger('tag_id')->unsigned();
    $table->timestamps();

    $table->foreign('post_id')
        ->references('id')
        ->on('posts')
        ->onDelete('cascade');

    $table->foreign('tag_id')
        ->references('id')
        ->on('tags')
        ->onDelete('cascade');
});

We can now migrate our tables
php artisan migrate

Models

Next step is to define the relaions in our models.

Our Post model belongs to a User and a Category, and it have many to many relationship with Tag. Let's write that

// ... [namespace and imports]

class Post extends Model
{
    public function user()
    {
        return $this->belongsTo(User::class);
    }

    public function category()
    {
        return $this->belongsTo(Category::class);
    }

    public function tags()
    {
        return $this->belongsToMany(Tag::class);
    }
}

The User can have many Post

// ... [namespace and imports]

class User extends Authenticatable
{
    use Notifiable;

    // ... [class properties]

    public function posts()
    {
        return $this->hasMany(Post::class);
    }
}

Tag belongs to many Post

// ... [namespace and imports]

class Tag extends Model
{
    public function posts()
    {
        return $this->belongsToMany(Post::class);
    }
}

Category can have many Post

// ... [namespace and imports]

class Category extends Model
{
    public function posts()
    {
        return $this->belongsToMany(Post::class);
    }
}

Now our relationships are all set up.

Factories

In order to quickly generate some dummy data, we will make use of Laravel factories that we've created when we made our models. We can find them in the database/factories folder. We can see there that we have factory for each model. If you don't know what factories are, you can read more in the Laravel documentation.

In the categories table we have only a name column, so the CategoryFactory will look like this

// ... [namespace and imports]

$factory->define(Category::class, function (Faker $faker) {
    return [
        'name' => $faker->word,
    ];
});

NOTE: Laravel factories are using $faker to generate fake data.

The posts table must have user_id and category_id (it belongs to a User and it belongs to a Category), so we must represent that in the factory. So for each Post that we're going to make, we are also going to make a User and a Category and assign their id to the posts table. This is the PostFactory

// ... [namespace and imports]

$factory->define(Post::class, function (Faker $faker) {
    return [
        'title' => $faker->word,
        'body' => $faker->text(),
        'views' => $faker->numberBetween(1000, 9999),
        'user_id' => factory(\App\User::class), // make User and assign the id
        'category_id' => factory(\App\Category::class), // make Category and assign the id
    ];
});

The TagFactory

// ... [namespace and imports]

$factory->define(Tag::class, function (Faker $faker) {
    return [
        'name' => $faker->word,
    ];
});

The UserFactory is already provided by Laravel, so we don't have to change anything there.

We've made our factories. Now if we want to create a 50 post records, all we need to do is call our post factory

factory(\App\Post::class, 50)->create();

NOTE: if we want to override some value in the factory, we can do that in the create() method, we can pass array of key and values. For example:

factory(\App\Post::class, 2)->create(['title' => 'Some title']);

This will create 2 posts that will have Some title as title.

Seeders

To seed our database with data, we'll use database seeders. We've created them when we created our model. We can find them in database/seeds folder. We have a seeder for each of our models (except for User because we didn't create that model, it comes with Laravel buy default). All we need to do is to set the factory we want to run for each seeder. We are only going to make seeder for Post and Tag models, because in the PostFactory we've set the factory so that it'll generate a User and a Category for each Post that we make.

In the PostSeeder

// ... [namespace and imports]

class PostSeeder extends Seeder
{
    public function run()
    {
        factory(\App\Post::class, 20)->create();
    }
}

In the TagSeeder

// ... [namespace and imports]

class TagSeeder extends Seeder
{
    public function run()
    {
        factory(\App\Tag::class, 20)->create();
    }
}

And we have to instruct Laravel to use this seeders when seeding the default data. In the DatabaseSeeder put this

// ... [namespace and imports]

class DatabaseSeeder extends Seeder
{
    public function run()
    {
        // $this->call(UserSeeder::class);
        $this->call(PostSeeder::class);
        $this->call(TagSeeder::class);
    }
}

We can now seed our database with data
php artisan db:seed

This will create 20 posts, 20 users, 20 categories and 20 tags.

Making filters

Ok, so now we've come to the most important part of this article, making the filters.

What we want to do here is to filter the posts, so let's begin with that. In my Post model I'll add new method filterBy, and because we know that we're going to use Laravel query builder, we can make that method local scope. If you don't know what local scope is you can read the documentation about local scopes.

In a nutshell, it's just a way to add a constraint to the existing query. To set a method as a scope, all we need to do is to prefix it with scope.

So our filterBy method will now be scopeFilterBy and the first argument of this function is the $query, then we can pass whatever we want as an argument. In our case we want to pass all the filters, so our second argument will be $filters.

Now in that method I will write how I want my API to look like. Keep in mind that none of this that I'm going to write doesn't exist yet. It's just a way for me to know how I want to interact with my API. And I know that I want to get my filters from the request.

I will have something like this http://some.url/posts?title=something, so the filters will be passed as array [title => something]

class Post extends Model
{
    public function scopeFilterBy($query, $filters)
    {
        $namespace = 'App\Utilities\PostFilters';
        $filter = new FilterBuilder($query, $filters, $namespace);

        return $filter->apply();
    }
}

Basically I want to have a class with a name FilterBuilder that will accept $query, $filters and $namespace (this will be the folder in which I will put all my filters) and in that class I'll have a method called apply() where I will do the filtering and I'll return the query builder.

Ok, now we know how our API should look like, let's build it.

In the app directory create a new folder, I'll name that folder Utilities, but you can name it whatever you want, it doesn't matter, in the end it all comes down to preference.

In that folder create FilterBuilder.php

namespace App\Utilities;

class FilterBuilder
{
    protected $query;
    protected $filters;
    protected $namespace;

    public function __construct($query, $filters, $namespace)
    {
        $this->query = $query;
        $this->filters = $filters;
        $this->namespace = $namespace;
    }

    public function apply()
    {

    }
}

Let's think how do we want our filter to work, but we must keep in mind that we want our filter to be made according to SOLID principles. Ultimately I want to make this class, and make sure to never touch it again. We can do that if make the abstraction good enough. At the end what we want this class to do, is to just loop through various classes that represent our filters. That way if we want to add some filter, all we need to do is to make new class. That's it. Let's make that.

// ... [other code in the class]

public function apply()
{
    foreach ($this->filters as $name => $value) {
        $normailizedName = ucfirst($name);
        $class = $this->namespace . "\\{$normailizedName}";

        if (! class_exists($class)) {
            continue;
        }

        if (strlen($value)) {
            (new $class($this->query))->handle($value);
        } else {
            (new $class($this->query))->handle();
        }
    }

    return $this->query;
}

Let me explain what's going on in that method:

Loop through each filters that we passed (we are going to get the filters from the request as array [title => something])
Capitalize the first letter of the name of the filter (title -> Title) and append it to the provided namespace (App\Utilities\PostFilters\Title)
Check if that class exist, if not, continue
If the class exist, check if $value is provided (?title=something),
- if it is, instantiate the class with the query, and call handle() method with the $value as parameter
- if not, instantiate the class and call handle() without any parameter (this is for sorting, for example if we want to sort them by popularity http://some.url/posts?title=something&popular)
Return the query

We have defined how this class should filter. Now we need to make the filters and make them adhere to the same contract.

In the app/Utilities make new file that will be our interface FilterContract.php

namespace App\Utilities;

interface FilterContract
{
    public function handle($value): void;
}

Make new folder in app/Utilities called PostFilters, that's the namespace that we passed in the FilterBuilder, App\Utilities\PostFilters, remember?!

In there we can now add our filters, each as separate class. We want to filter our posts by title, ok, we just have to create new file in app/Utilities/PostFilters called Title.php that will implement FilterContract and put our filtering logic in there.

namespace App\Utilities\PostFilters;

use App\Utilities\FilterContract;

class Title implements FilterContract
{
    protected $query;

    public function __construct($query)
    {
        $this->query = $query;
    }

    public function handle($value): void
    {
        $this->query->where('title', $value);
    }
}

That's all we have to do, we have to accept the query in the constructor, and make a handle method that will filter the posts by some logic. Very simple. And the best part is that if we want to add another filter, all we have to do is to add another class. We can use our filter like this

App\Post::filterBy(request()->all())->get();

The url should look something like this http://some.url/post?title=something

What if we want to filter posts by category or by tag? No big deal, just make new file Tag.php and put your filtering logic there.

namespace App\Utilities\PostFilters;

use App\Utilities\FilterContract;

class Tag implements FilterContract
{
    protected $query;

    public function __construct($query)
    {
        $this->query = $query;
    }

    public function handle($value): void
    {
        $this->query->whereHas('tags', function ($q) use ($value) {
            return $q->where('name', $value);
        });
    }
}

Now we can filter posts by tag, just eager load them, and call the filterBy()

App\Post::with('tags')->filterBy(request()->all())->get();

The url should look something like this http://some.url/post?tag=some-tag

That's it, we're done.

Last thing we could do is to extract that repeating logic in the filter classes into abstract class.

Make QueryFilter.php file in app/Utilities and add only the constructor

namespace App\Utilities;

abstract class QueryFilter
{
    protected $query;

    public function __construct($query)
    {
        $this->query = $query;
    }
}

Now Title and Tag class won't have a consturctor on their own, but they will extend the QueryFilter class.

Title class

namespace App\Utilities\PostFilters;

use App\Utilities\QueryFilter;
use App\Utilities\FilterContract;

class Title extends QueryFilter implements FilterContract
{
    public function handle($value): void
    {
        $this->query->where('title', $value);
    }
}

Tag class

namespace App\Utilities\PostFilters;

use App\Utilities\QueryFilter;
use App\Utilities\FilterContract;

class Tag extends QueryFilter implements FilterContract
{
    public function handle($value): void
    {
        $this->query->whereHas('tags', function ($q) use ($value) {
            return $q->where('name', $value);
        });
    }
}

And there we go, we now have a working filter.

If you want to add filter to some other model, just create app/Utilities/[Model]Filters folder, and add your filters there. Then make filterBy method in your model, and done.

All the code is available on github on this link

Thank you for reading and if you have any questions or if you think that something can be improved, please comment below.

Secure authentication in Nuxt SPA with Laravel as back-end

StefanT123 — Wed, 15 Jan 2020 14:17:51 +0000

This past period I was working on some project that included building Single Page Application in Nuxt that was on one domain, and building API in Laravel that was on some other sub-domain. When the API was built, and it was time to make the front-end I was trying to make the authentication system properly and with security in mind. There are many articles out there on this subject, but I couldn't find any that was touching security of the application.

TL;DR Please don't store your tokens in LocalStorage, or any other sensitive information, as it can be accessed by any javascript code on your page and that makes you vulnerable to XSS attack.

TL;DR If you just want to see the code, here are github links

The authentication flow will be as follow:

The user enters his username and password.
If the credentials are valid, we are saving the refresh token in an httponly cookie.
The user sets the access token in the cookie, please note that this is normal cookie, which has expiration time of 5 minutes.
After the access token has been expired, we will refresh the access token if the user has the valid refresh token set.
Access token is refreshed, and new access token and refresh token are assigned to the user.

In this post I will give you a complete guidance on how to make securely authentication system for Single Page Applications.

Making the Laravel back-end

I assume that you have composer and laravel installed on your machine, if you don't, just follow their documentation.

Setting Laravel Passport

Create new laravel project and cd into it laravel new auth-api && cd auth-api.

We will use Laravel Passport which provides a full OAuth2 server implementation for your Laravel application. I know that Passport might be overkill for some small to medium applications, but I think it's worth it.

Next we'll install Passport with composer composer require laravel/passport.

Set your .env variables for the database. For this example I'll use sqlite.

If you follow along, change the DB_CONNECTION variable to use the sqlite in .env like this:



...
DB_CONNECTION=sqlite
...

Make the database.sqlite file with touch database/database.sqlite.

Run the migrations with php artisan migrate. The Passport migrations will create the tables your application needs to store clients and access tokens.

Next, run the php artisan passport:install command. This command will create the encryption keys needed to generate secure access tokens. After you run this command you will see that "personal access" and "password grant" clients are created and you can see their Client ID and Client secret, we will store these in .env file. In this post we will use only the password grant client, but we will store both of them for convenience.



...
PERSONAL_CLIENT_ID=1
PERSONAL_CLIENT_SECRET={your secret}

PASSWORD_CLIENT_ID=2
PASSWORD_CLIENT_SECRET={your secret}
...

Then we will add the "password client" id and secret to the config/services.php so we can use them later in our code:



...
'passport' => [
    'password_client_id' => env('PASSWORD_CLIENT_ID'),
    'password_client_secret' => env('PASSWORD_CLIENT_SECRET'),
],

In the config/auth.php set the api guard driver as passport



...

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

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

...

Next step is to add Laravel\Passport\HasApiTokens trait to your App\User model



<?php

namespace App;

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

class User extends Authenticatable
{
    use Notifiable, HasApiTokens;

    ...
}

Don't forget to import the trait at the top.

The last step is to register passport routes. In the AuthServiceProvider in the boot method add this and import Laravel\Passport\Passport at the top.



public function boot()
{
    $this->registerPolicies();

    Passport::routes(function ($router) {
        $router->forAccessTokens();
        $router->forPersonalAccessTokens();
        $router->forTransientTokens();
    });
}

We are only registering the routes that we need, if for some reason you want to register all passport routes, don't pass a closure, just add Passport::routes().

If you run php artisan route:list | grep oauth you should see the oauth routes. It should look like this

Now this is very important, we're going to set the expiration time for the tokens. In order to properly secure our app, we'll set the access token expiration time to 5 minutes, and the refresh token expiration time to 10 days.

In the AuthServiceProvider in boot method we add the expirations. Now the boot method should look like this:



public function boot()
{
    $this->registerPolicies();

    Passport::routes(function ($router) {
        $router->forAccessTokens();
        $router->forPersonalAccessTokens();
        $router->forTransientTokens();
    });
    Passport::tokensExpireIn(now()->addMinutes(5));
    Passport::refreshTokensExpireIn(now()->addDays(10));
}

That's all we have to do regarding the Passport. Next thing we are going to do, is we are going to set our API.

Setting CORS

In order to access our API from our front-end that is on different domain, we need to set CORS middleware.

Run php artisan make:middleware Cors.

Then in app/Http/Middleware/Cors.php change the handle method like this



public function handle($request, Closure $next)
{
    $allowedOrigins = [
        'http://localhost:3000',
    ];
    $requestOrigin = $request->headers->get('origin');

    if (in_array($requestOrigin, $allowedOrigins)) {
        return $next($request)
            ->header('Access-Control-Allow-Origin', $requestOrigin)
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE')
            ->header('Access-Control-Allow-Credentials', 'true')
            ->header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    }

    return $next($request);
}

Here we are checking if the request origin is in the array of the allowed origins, if it is, we are setting the proper headers.

Now we just need to register this middleware. In app/Http/Kernel.php add the middleware



...

protected $middleware = [
    \App\Http\Middleware\TrustProxies::class,
    \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\Cors::class,
];

...

That's it, pretty simple.

Making the API

In the routes/api.php file we are going to register the routes that we are going to use. Delete everything there, and add this:



<?php

Route::middleware('guest')->group(function () {
    Route::post('register', 'AuthController@register')->name('register');
    Route::post('login', 'AuthController@login')->name('login');
    Route::post('refresh-token', 'AuthController@refreshToken')->name('refreshToken');
});

Route::middleware('auth:api')->group(function () {
    Route::post('logout', 'AuthController@logout')->name('logout');
});

We need to create the AuthController run php artisan make:controller AuthController.

In the App\Http\Controllers\AuthController we will add the methods that we need. It should look like this:



<?php

namespace App\Http\Controllers;

class AuthController extends Controller
{
    public function register()
    {
    }

    public function login()
    {
    }

    public function refreshTo()
    {
    }

    public function logout()
    {
    }
}

In order for this to work we need to make a proxy that will make request to our own API. It might seems confusing at first but once we're done it will make perfect sense.

We'll make new folder in the app directory called Utilities. In the app/Utilities make new php file ProxyRequest.php



<?php

namespace App\Utilities;

class ProxyRequest
{

}

Now we need to inject the App\Utilities\ProxyRequest in the constructor of the App\Http\Controllers\AuthController



<?php

namespace App\Http\Controllers;

use App\Utilities\ProxyRequest;

class AuthController extends Controller
{
    protected $proxy;

    public function __construct(ProxyRequest $proxy)
    {
        $this->proxy = $proxy;
    }

...

In the App\Utilities\ProxyRequest we will add some methods for granting token and for refreshing the token. Add the following and then I'll explain what each method does



<?php

namespace App\Utilities;

class ProxyRequest
{
    public function grantPasswordToken(string $email, string $password)
    {
        $params = [
            'grant_type' => 'password',
            'username' => $email,
            'password' => $password,
        ];

        return $this->makePostRequest($params);
    }

    public function refreshAccessToken()
    {
        $refreshToken = request()->cookie('refresh_token');

        abort_unless($refreshToken, 403, 'Your refresh token is expired.');

        $params = [
            'grant_type' => 'refresh_token',
            'refresh_token' => $refreshToken,
        ];

        return $this->makePostRequest($params);
    }

    protected function makePostRequest(array $params)
    {
        $params = array_merge([
            'client_id' => config('services.passport.password_client_id'),
            'client_secret' => config('services.passport.password_client_secret'),
            'scope' => '*',
        ], $params);

        $proxy = \Request::create('oauth/token', 'post', $params);
        $resp = json_decode(app()->handle($proxy)->getContent());

        $this->setHttpOnlyCookie($resp->refresh_token);

        return $resp;
    }

    protected function setHttpOnlyCookie(string $refreshToken)
    {
        cookie()->queue(
            'refresh_token',
            $refreshToken,
            14400, // 10 days
            null,
            null,
            false,
            true // httponly
        );
    }
}

ProxyRequest methods:

grantPasswordToken - not much happens in this method, we are just setting the parameters needed for Passport "password grant" and make POST request.
refreshAccessToken - we are checking if the request contains refresh_token if it does we are setting the parameters for refreshing the token and make POST request, if the refresh_token does not exist we abort with 403 status.
makePostRequest - this is the key method of this class.
- We are setting client_id and client_secret from the config, and we are merging additional parameters that are passed as argument
- Then we are making internal POST request to the Passport routes with the needed parameters
- We are json decoding the response
- Set the httponly cookie with refresh_token
- Return the response
setHttpOnlyCookie - set the httponly cookie with refresh_token in the response.

In order to queue the cookies for the response we need to add middleware. In app/Http/Kernel.php add \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class like this



...

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,
    \App\Http\Middleware\Cors::class,
    \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
];

...

Now to make the App\Http\Controllers\AuthController methods. Don't forget to import the App\User.

In the register method, add this



...

public function register()
{
    $this->validate(request(), [
        'name' => 'required',
        'email' => 'required|email',
        'password' => 'required',
    ]);

    $user = User::create([
        'name' => request('name'),
        'email' => request('email'),
        'password' => bcrypt(request('password')),
    ]);

    $resp = $this->proxy->grantPasswordToken(
        $user->email,
        request('password')
    );

    return response([
        'token' => $resp->access_token,
        'expiresIn' => $resp->expires_in,
        'message' => 'Your account has been created',
    ], 201);
}

...

In the login method, add this



...

public function login()
{
    $user = User::where('email', request('email'))->first();

    abort_unless($user, 404, 'This combination does not exists.');
    abort_unless(
        \Hash::check(request('password'), $user->password),
        403,
        'This combination does not exists.'
    );

    $resp = $this->proxy
        ->grantPasswordToken(request('email'), request('password'));

    return response([
        'token' => $resp->access_token,
        'expiresIn' => $resp->expires_in,
        'message' => 'You have been logged in',
    ], 200);
 }

...

The refreshToken method



...

public function refreshToken()
{
    $resp = $this->proxy->refreshAccessToken();

    return response([
        'token' => $resp->access_token,
        'expiresIn' => $resp->expires_in,
        'message' => 'Token has been refreshed.',
    ], 200);
}

...

The logout method



...

public function logout()
{
    $token = request()->user()->token();
    $token->delete();

    // remove the httponly cookie
    cookie()->queue(cookie()->forget('refresh_token'));

    return response([
        'message' => 'You have been successfully logged out',
    ], 200);
}

...

Ok, that's everything we have to do in our back-end. I think that the methods in the AuthController are self explanatory.

Making the Nuxt front-end

Nuxt is, as stated in the official documentation, a progressive framework based on Vue.js to create modern web applications. It is based on Vue.js official libraries (vue, vue-router and vuex) and powerful development tools (webpack, Babel and PostCSS). Nuxt goal is to make web development powerful and performant with a great developer experience in mind.

To create nuxt project run npx create-nuxt-app auth-spa-frontend. If you don't have npm install it first.

It will ask you some questions like project name, description, package manager, etc. Enter and choose whatever you like. Just make sure that custom server framework is set to none and you add axios nuxt module. Note that I will be using bootstrap-vue.

We will also install additional package js-cookie, run npm install js-cookie.

I won't bother you with structuring the front-end and how the things should look like. The front-end will be pretty simple but functional.

In the nuxt.config.js set the axios baseUrl



export default {
  ...

  axios: {
    baseURL: 'http://auth-api.web/api/',
    credentials: true, // this says that in the request the httponly cookie should be sent
  },

  ...
}

Next we will activate the vue state management library vuex. In order to do that we only need to make new js file in store folder.

If you are not familiar how vuex works, I would suggest to read the documentation, it's pretty straightforward.

Add index.js file in the store folder, and add the following



import cookies from 'js-cookie';

export const state = () => ({
  token: null,
});

export const mutations = {
  SET_TOKEN(state, token) {
    state.token = token;
  },

  REMOVE_TOKEN(state) {
    state.token = null;
  }
};

export const actions = {
  setToken({commit}, {token, expiresIn}) {
    this.$axios.setToken(token, 'Bearer');
    const expiryTime = new Date(new Date().getTime() + expiresIn * 1000);
    cookies.set('x-access-token', token, {expires: expiryTime});
    commit('SET_TOKEN', token);
  },

  async refreshToken({dispatch}) {
    const {token, expiresIn} = await this.$axios.$post('refresh-token');
    dispatch('setToken', {token, expiresIn});
  },

  logout({commit}) {
    this.$axios.setToken(false);
    cookies.remove('x-access-token');
    commit('REMOVE_TOKEN');
  }
};

I will explain the actions one by one:

setToken - it sets the token in axios, in the cookie and calls the SET_TOKEN commit
refreshToken - it send POST request to the API to refresh the token and dispatches setToken action
logout - it removes the token form axios, cookie and from the state

In the pages folder, add these vue files: register.vue, login.vue, secret.vue.

Then in the pages/register.vue add this



<template>
  <div class="container">
    <b-form @submit.prevent="register">
      <b-form-group
        id="input-group-1"
        label="Email address:"
        label-for="input-1"
      >
        <b-form-input
          id="input-1"
          v-model="form.email"
          type="email"
          required
          placeholder="Enter email"
        ></b-form-input>
      </b-form-group>

      <b-form-group id="input-group-2" label="Your Name:" label-for="input-2">
        <b-form-input
          id="input-2"
          v-model="form.name"
          required
          placeholder="Enter name"
        ></b-form-input>
      </b-form-group>

      <b-form-group id="input-group-3" label="Password:" label-for="input-3">
        <b-form-input
          id="input-3"
          type="password"
          v-model="form.password"
          required
          placeholder="Enter password"
        ></b-form-input>
      </b-form-group>

      <b-button type="submit" variant="primary">Submit</b-button>
    </b-form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          email: '',
          name: '',
        },
      }
    },
    methods: {
      register() {
        this.$axios.$post('register', this.form)
          .then(({token, expiresIn}) => {
            this.$store.dispatch('setToken', {token, expiresIn});
            this.$router.push({name: 'secret'});
          })
          .catch(errors => {
            console.dir(errors);
          });
      },
    }
  }
</script>

pages/login.vue is pretty similar to register, we just need to make some slight changes



<template>
  <div class="container">
    <b-form @submit.prevent="login">
      <b-form-group
        id="input-group-1"
        label="Email address:"
        label-for="input-1"
      >
        <b-form-input
          id="input-1"
          v-model="form.email"
          type="email"
          required
          placeholder="Enter email"
        ></b-form-input>
      </b-form-group>

      <b-form-group id="input-group-3" label="Password:" label-for="input-3">
        <b-form-input
          id="input-3"
          type="password"
          v-model="form.password"
          required
          placeholder="Enter password"
        ></b-form-input>
      </b-form-group>

      <b-button type="submit" variant="primary">Submit</b-button>
    </b-form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          email: '',
          name: '',
        },
      }
    },
    methods: {
      login() {
        this.$axios.$post('login', this.form)
          .then(({token, expiresIn}) => {
            this.$store.dispatch('setToken', {token, expiresIn});
            this.$router.push({name: 'secret'});
          })
          .catch(errors => {
            console.dir(errors);
          });
      },
    }
  }
</script>

In the pages/secret.vue add this



<template>
  <h2>THIS IS SOME SECRET PAGE</h2>
</template>

<script>
  export default {
    middleware: 'auth',
  }
</script>

We must make route middleware for auth, in the middleware folder add new auth.js file, and add this



export default function ({ store, redirect }) {
  if (! store.state.token) {
    return redirect('/');
  }
}

Now we will make the navbar. Change layouts/deafult.vue like this



<template>
  <div>
    <div>
      <b-navbar toggleable="lg" type="dark" variant="info">
        <b-navbar-brand href="#">NavBar</b-navbar-brand>

        <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

        <b-collapse id="nav-collapse" is-nav>
          <b-navbar-nav class="ml-auto" v-if="isLoggedIn">
            <b-nav-item :to="{name: 'secret'}">Secret Page</b-nav-item>
            <b-nav-item href="#" right @click="logout">Logout</b-nav-item>
          </b-navbar-nav>

          <b-navbar-nav class="ml-auto" v-else>
            <b-nav-item :to="{name: 'login'}">Login</b-nav-item>
          </b-navbar-nav>
        </b-collapse>
      </b-navbar>
    </div>
    <nuxt />
  </div>
</template>

<script>
  export default {
    computed: {
      isLoggedIn() {
        return this.$store.state.token;
      }
    },

    methods: {
      logout() {
        this.$axios.$post('logout')
          .then(resp => {
            this.$store.dispatch('logout');
            this.$router.push('/');
          })
          .catch(errors => {
            console.dir(errors);
          });
      }
    }
  }
</script>

...

And in order for the access token to be refreshed, we will add another middleware that will be applied to every route. To do this, in nuxt.config.js add this



export default {
  ...

  router: {
    middleware: 'refreshToken',
  },

  ...
}

And create that middleware. In the middleware folder add new file refreshToken.js and add this



import cookies from 'js-cookie';

export default function ({ store, redirect }) {
  const token = cookies.get('x-access-token');

  if (! token) {
    store.dispatch('refreshToken')
      .catch(errors => {
        console.dir(errors);
        store.dispatch('logout');
      });
  }
}

Here we check if the user has token in the cookies, if he doesn't, we will try to refresh his token, and assign him a new access token.

And that's it. Now we have authentication system that's secure, because even if someone is able to steal the access token of some user, he won't have much time to do anything with it.

This was a long post, but I hope that the concepts are clear and concise. If you have any questions or if you think that something can be improved, please comment below.

DEV Community: StefanT123

Basic Git commands explained

Table of contents

What's git

Most common Git commands

git clone

git init

git remote add

git add

git commit

git log

git push

git branch

git branch {branch-name}

git branch -d {branch-name}

git branch -D {branch-name}

git push {remote-name} --delete {branch-name}

git merge

git fetch

git pull

git checkout

git checkout -b {branch-name}

git checkout {commit-hash}

git checkout {commit-hash} {file-name}

git reset

git reset --hard {commit-hash}

git revert

PKCE authenticaton for Nuxt SPA with Laravel as backend

Table of contents

Backend

Setting Laravel Passport

Setting CORS

For laravel version < 7

For laravel version > 7

Creating the API

Frontend

Create filters in Laravel with OOP best practices

Create Laravel project

Set up the environment

Set up the application

Migrations

Models

Factories

Seeders

Making filters

Secure authentication in Nuxt SPA with Laravel as back-end

Making the Laravel back-end

Setting Laravel Passport

Setting CORS

Making the API

Making the Nuxt front-end

`git clone`

`git init`

`git remote add`

`git add`

`git commit`

`git log`

`git push`

`git branch`

`git branch {branch-name}`

`git branch -d {branch-name}`

`git branch -D {branch-name}`

`git push {remote-name} --delete {branch-name}`

`git merge`

`git fetch`

`git pull`

`git checkout`

`git checkout -b {branch-name}`

`git checkout {commit-hash}`

`git checkout {commit-hash} {file-name}`

`git reset`

`git reset --hard {commit-hash}`

`git revert`