DEV Community: Ezichi Ebere Ezichi

Persist data with Vue Pinia

Ezichi Ebere Ezichi — Fri, 15 Mar 2024 14:30:00 +0000

Introduction

As a Software Developer who spends more time on the Backend, every now and then I try to do some things on the frontend occassionally. I wanted to explore Pinia and experience some of its features. In this post, I will share how I persisted data using Pinia and localStorage.

The App

To create the Vue 3 app, we run the command below and follow the prompt. Be sure to add Pinia for state management.

npm create vue@latest

You can run the commands to install dependencies and start the app.

cd project-name
npm install
npm run dev

Open the App with an editor(I use Vscode).

Create a file named authStore.js inside the src/stores folder. Add this code to the file.

import { defineStore } from "pinia";
import { ref, computed } from "vue";

export const useAuthStore = defineStore("auth", () => {
  const user = ref(null);

  const getUser = computed(() => user.value);

  const setUser = (newUser) => {
    user.value = newUser;
  };

  return {
    user,
    setUser,
    getUser,
  };
});

We can now use the store values in our views. I had to clean up the default codes in the view files.

src/App.vue

<script setup>
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <header>
    <nav>
      <RouterLink to="/">Home</RouterLink>
      <RouterLink to="/about">About</RouterLink>
    </nav>
  </header>

  <RouterView />
</template>

<style scoped>
</style>

src/Home.vue

<script setup>
import { ref } from 'vue';
import { useAuthStore } from '@/stores/authStore';

const authStore = useAuthStore();
const name = ref(null);

const login = () => {
  authStore.setUser(name.value);
};
</script>

<template>
  <main>
    <h1>Home</h1>
    <p v-if="authStore.user !== null">Welcome, {{ authStore.getUser }}</p>
    <div>
      <h3>Enter your name</h3>
      <form @submit.prevent="login">
        <input type="text" v-model="name">
        <button type="submit">Login</button>
      </form>
    </div>
  </main>
</template>

src/About.vue

<script setup>
import { useAuthStore } from '@/stores/authStore';

const authStore = useAuthStore();
</script>
<template>
  <div class="about">
    <h1>This is an about page</h1>
    <p v-if="authStore.user !== null">Welcome, {{ authStore.getUser }}</p>
  </div>
</template>

<style>
</style>

In the App.vue, I removed all the unnecessary codes. In the home and about, I mimicked a login and the user value was saved to the store. So, in a real login system we can have data from API and save it to the store and use across pages.

The Issue

If you notice, when the page is refreshed, the user value in the store resets to null. This is because Pinia stores are not persisted across refreshes.

The fix

There are different ways to fix this particular issue. I will use localstorage to solve this in the store. We have to make a few changes.

Update the login method in Home.vue. This stores the value in the localstorage.

const login = () => {
  authStore.setUser(name.value);
  localStorage.setItem('app_user', name.value);
};

Update the authStore to load value from localstorage if the value exists.

import { defineStore } from "pinia";
import { ref, computed } from "vue";

export const useAuthStore = defineStore("auth", () => {
  const user = ref(null);

  if (localStorage.getItem("app_user")) {
    user.value = localStorage.getItem("app_user");
  }

  const getUser = computed(() => user.value);

  const setUser = (name) => {
    user.value = name;
  };

  return {
    user,
    setUser,
    getUser,
  };
});

With these changes, even with page reload, the data persists! Be sure to drop comments, questions or suggestions.

Vue App with Lumen Passport API (Part II)

Ezichi Ebere Ezichi — Sun, 21 Aug 2022 02:42:50 +0000

Auth or Auth?

Typically in Software development, there's need for some level of security wherever there is data involved. Authentication is the process of identifying who wants to access the data. Authorization on the other hand involves checking the access level of the person. With Passport we can achieve that.

What we'll build

As stated in Part I, the finished app will be a contacts app for users to save their contacts. In this part we will set up the API's with login and registration.

Without further ado...

Setup Auth Controller and Routes

Before creating the controller, let's create a common success response in our base controller.

<?php

namespace App\Http\Controllers;

use Laravel\Lumen\Routing\Controller as BaseController;

class Controller extends BaseController
{
    public function return_success($message, $data = [], $status = 200)
    {
        return [
            "message" => $message,
            "data" => $data,
            "status" => $status
        ];
    }
}

Now let's create the controller with the command.

php artisan make:controller AuthController

We will add a registration and login methods to this controller.

<?php

namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Str;
use Symfony\Component\HttpFoundation\Response;

class AuthController extends Controller
{
    public function login(Request $request)
    {
        $this->validate($request, [
            'email' => 'required',
            'password' => 'required'
        ]);

        $user = User::where('email', $request->email)->first();
        if ($user) {
            if (Hash::check($request->password, $user->password)) {
                $token = $user->createToken('Laravel Password Grant Client')->accessToken;

                return $this->return_success("Login successful", ["token" => $token], Response::HTTP_OK);
            } else {
                $response = ["message" => "Password mismatch"];
                return response($response, 422);
            }
        } else {
            $response = ["message" => 'User does not exist'];
            return response($response, 422);
        }
    }

    public function register(Request $request)
    {
        $this->validate($request, [
            'name' => 'required|string|max:255',
            'email' => 'required|string|email|max:255|unique:users',
            'password' => 'required|string|min:6|confirmed',
        ]);

        $request['password'] = Hash::make($request['password']);
        $request['remember_token'] = Str::random(10);
        $user = User::create($request->toArray());
        $token = $user->createToken('Laravel Password Grant Client')->accessToken;

        return $this->return_success("User created successfully", ["user" => $user, "token" => $token], Response::HTTP_CREATED);
    }
}

We have our login and registration methods in our controller, we can create the corresponding routes in our routes file i.e routes/web.php.

$router->group(['prefix' => 'auth'], function() use ($router) {
    $router->post('login', 'AuthController@login');
    $router->post('register', 'AuthController@register');
});

Test auth routes with postman

We register a user with postman

Registration is successful!!!

Let's try to login with the email and password we registered with.

Now, with the generated token after login, we can access authorized routes. Next, we will create the Contact model, migration and routes.

Setup Contacts

We'll use the command to create model, migration and controller for contacts.

php artisan make:model Contact -mc

Add necessary fields in migration.

Schema::create('contacts', function (Blueprint $table) {
    $table->id();
    $table->foreignId('owner_id');
    $table->string('name');
    $table->string('email')->nullable();
    $table->string('phone_number')->unique();
    $table->date('birthday')->nullable();
    $table->timestamps();
});

The model will look like this:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Relations\BelongsTo;

class Contact extends Model
{
    protected $fillable = [
        'name',
        'email',
        'phone_number',
        'birthday',
        'owner_id'
    ];

    public function owner(): BelongsTo
    {
        return $this->belongsTo(User::class, 'owner_id');
    }
}

For the controller, we will add the crud methods needed.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ContactController extends Controller
{
    public function index()
    {
        return $this->return_success("My contacts", auth('api')->user()->contacts, 200);
    }

    public function show($id)
    {
        /** @var User $user */
        $user = auth('api')->user();

        return $this->return_success("My contact", $user->contacts()->where('id', $id)->first(), 200);
    }

    public function store(Request $request)
    {
        $this->validate($request, [
            'name' => 'required',
            'phone_number' => 'required'
        ]);

        /** @var User $user */
        $user = auth('api')->user();

        $user->contacts()->create([
            'name' => $request->get('name'),
            'phone_number' => $request->get('phone_number'),
            'birthday' => $request->get('birthday'),
            'email' => $request->get('email')
        ]);

        return $this->return_success("My contacts", $user->contacts()->latest()->get(), 200);
    }

    public function update(Request $request, $id)
    {
        $this->validate($request, [
            'name' => 'required',
            'phone_number' => 'required'
        ]);

        /** @var User $user */
        $user = auth('api')->user();
        $contact = $user->contacts()->find($id);

        $contact->update([
            'name' => $request->get('name'),
            'phone_number' => $request->get('phone_number'),
            'birthday' => $request->get('birthday'),
            'email' => $request->get('email')
        ]);

        return $this->return_success("Contact updated", $contact, 200);
    }

    public function destroy($id)
    {
        /** @var User $user */
        $user = auth('api')->user();
        $contact = $user->contacts()->find($id);

        $contact->delete();

        return $this->return_success("Contact deleted", NULL, 200);
    }
}

Let's run our migration.

php artisan migrate

Add contacts relationship in User model.

public function contacts(): HasMany
{
    return $this->hasMany(Contact::class, 'owner_id');
}

Finally, we add the routes.

$router->group(['middleware' => 'auth:api'], function() use ($router) {
    $router->get('contacts', 'ContactController@index');
    $router->get('contacts/{id}', 'ContactController@show');
    $router->post('contacts', 'ContactController@store');
    $router->patch('contacts/{id}', 'ContactController@update');
    $router->delete('contacts/{id}', 'ContactController@destroy');
});

Test with Postman

First, you have to login. Copy the token generated and we will use it to create a contact.

Provide necessary fields for creating a contact.

Congratulations, you have created a contact for a logged user.

In the next tutorial, we'll finish up the app and push it to Github.

Vue App with Lumen Passport API (Part I)

Ezichi Ebere Ezichi — Sat, 25 Jun 2022 10:50:45 +0000

Why Lumen?

Lumen is a stripped down version of Laravel for building APIs. This makes it a lightweight framework. I'm currently using Lumen in a project and I want to use this opportunity to share some of the things I've learnt.

What we'll build

We will build a Vue app for users to save their contacts. This will cover mainly authentication and CRUD operations. For the styling we'll use Tailwindcss. For this Part I, we will be setting up lumen passport.

Without further ado...

Create Lumen Project

Visit Lumen and follow installation instruction.

Install Lumen Generator

As pointed out earlier, a lot of things in Laravel are missing in Lumen. This package brings in some of Laravel artisan commands to Lumen. Run the following command in your terminal at the root of the project.

composer require flipbox/lumen-generator

In bootstrap/app.php add the following:

$app->register(Flipbox\LumenGenerator\LumenGeneratorServiceProvider::class);

Now we have some artisan commands. We can generate app key.

php artisan key:generate

It's always good practice to use version control to keep track of your changes.

You can also use postman to check that your endpoint is working.

Install Lumen Passport

We'll be using a package by Dusterio. You can visit the Github link here to follow the installation or continue with the tutorial.

composer require dusterio/lumen-passport

Enable Laravel Passport and Lumen Passport

File path: bootstrap/app.php

Uncomment these lines to enable facade, eloquent and routeMiddleware

$app->withFacades();

$app->withEloquent();

$app->routeMiddleware([
    'auth' => App\Http\Middleware\Authenticate::class,
]);

Uncomment the service providers as well

$app->register(App\Providers\AppServiceProvider::class);
$app->register(App\Providers\AuthServiceProvider::class);
$app->register(App\Providers\EventServiceProvider::class);

$app->register(Laravel\Passport\PassportServiceProvider::class);
$app->register(Dusterio\LumenPassport\PassportServiceProvider::class);

Laravel Passport ^7.3.2 and newer

In bootastrap/app.php comment this out

$app = new Laravel\Lumen\Application(
    dirname(__DIR__)
);

Use this instead

$app = new \Dusterio\LumenPassport\Lumen7Application(
    dirname(__DIR__)
);

Migrate and install Laravel Passport

Create new tables for Passport in your database (eg. MySQL)

Create database and fill the details in .env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=lumen_passport_blog
DB_USERNAME=root
DB_PASSWORD=root

php artisan migrate

Configure Authentication

Add the following to config/auth.php (You may have to create the config folder and auth.php file if they are not there)

<?php
return [
    'defaults' => [
        'guards' => 'api'
    ],
    'guards' => [
        'api' => [
            'driver' => 'passport',
            'provider' => 'users', // default
        ],
    ],
    'providers' => [
        'users' => [
            'driver' => 'eloquent',
            'model' => \App\Models\User::class
        ]
    ],
];

Load the config since Lumen doesn't load config files automatically:
In bootstrap/app.php add the code below.
(Preferably below $app->configure(‘app’). Follow the pattern)

$app->configure(‘auth’)

Install encryption keys and other stuff for Passport

php artisan passport:install

It will output the Personal access client ID and secret, and the Password grand client ID and secret. You may store these in your .env file or somewhere safe. Password grant client id and secret will be used for generating access token for user.

Registering Routes

In app/Providers/AuthServiceProvider.php
Add the routes inside the boot method (preferably before any other code)

use Dusterio\LumenPassport\LumenPassport;

LumenPassport::routes($this->app);

User model

Add HasApiTokens trait to your user model.

use Laravel\Passport\HasApiTokens;

class User extends Model implements AuthenticatableContract, AuthorizableContract
{
    use HasApiTokens, Authenticatable, Authorizable, HasFactory;

    /* rest of the model */
}

Add ‘password’ to fillable array in user model.

Create a user migration

php artisan make:migration create_users_table

Modify migration table to add the fields: name, email and password.

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

Then migrate.

php artisan migrate

Finally, create a user with email and a hashed password. You will need this to generate a key. You can use tinker for this.

>>> use App\Models\User
>>> use Illuminate\Support\Facades\Hash
>>> User::create(['name'=>'John Doe', 'email'=>'johndoe@company.com', 'password'=>Hash::make('password')])

Generate token with Postman

Open Postman and make a POST request to http://your_base_url/oauth/token. Enter the fields as in the image above. The username is the email of the user we created. Client secret and client id is the one we generated earlier. Be sure to make use of the correct password grant id and secret.

When you send the request, access token will be generated. We did it! In part two, we will continue with registration and login.

Responsive Web Design

Ezichi Ebere Ezichi — Mon, 01 Apr 2019 21:42:43 +0000

Almost everyone has a mobile phone these days. Of course it is portable and easier to carry around compared to PC's.
The internet on its own has evolved over the years. Enabling people to perform transactions and much more. It is therefore important to build responsive websites. Websites that adapt to different mobile screens.
When building a responsive website, it is good for items to placed where it is easily accessible by the users. The menu could be a dropdown or a sidemenu.
The website, timbu.com is quite responsive, but the menu dropdown does not display its menu.

Learning the framework is good, learning the language is better

Ezichi Ebere Ezichi — Sat, 02 Mar 2019 14:12:27 +0000

A framework is a collection of programs that do something useful and which you can use to develop your own applications. - Julian Solorzano
See here

Some popularly known frameworks include, but aren't limited to: Bootstrap, Foundation, Angular, VueJs, Django, Laravel, Ruby on Rails.

The React developers might be wondering what's going on here 😄. React happens to be a library, but we can lump libraries together with frameworks because of their similarities.

Frameworks provide tools and structures that make development of softwares and applications faster. These tools range from floating buttons of front-end frameworks to ORMs(Object Relational Mappers) of server side frameworks. The structures could be MVC, MVVM or the likes.

The essence of frameworks is to cut down on development time. This helps developers meet project deadlines. Also frameworks bring uniformity to team development. Each member understand the development patterns to a great extent.

However, the gains of frameworks can easily be lost when the user knows little about the underlying language(s) used for that framework. Beginners fall into this trap, because they want to keep up with the new technologies.

What this results to is that you have people using a framework without knowing why or what's behind it. If something breaks, they're unable to fix it. Making significant modifications becomes difficult or impossible. For the ones who try, they'll spend a lot of time on Google or Stackoverflow looking for answers to basic stuff.

My advice to beginners out there and constant learners like me, is to take ample time to learn core programming languages before jumping into frameworks associated with them.

Don't be intimidated. Keep learning.