DEV Community: Niyaz

Alpine.js, exploring in real world applications

Niyaz — Wed, 25 Aug 2021 10:21:36 +0000

Alpine is a minimal javascript library for composing behavior directly in HTML markup.

Alpine was known as “project-x”, a nod to it’s past.
Creator Caleb Porzio (Creator of Alpine.js, Laravel Livewire) has kept much of the syntax is like Vue.js.

Okay, Lets start..

To use:

From a script tag into head tag:

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

As a module:

`npm install alpinejs` or `yarn alpinejs`

import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start()

Alpine has collection of 15 attributes, 6 properties, and 2 methods.

x-data, x-bind, x-on, x-text, x-if, x-for, x-ref, x-html...

Please check the docs here, https://alpinejs.dev

Creating simple component (x-data);

All we need to do is add the x-data attribute to any element like below, Thats all.

<div x-data="{ title: 'Hello Alpine..' }">
<p x-text="title"></p>
<button @click="title='Alpine rocks'">Change Title</button>

On Modular approach:

On main.js

import Alpine from 'alpinejs';
window.Alpine = Alpine

import pageSidebar from './components/PageSidebar.js';
window.sidebarApp = pageSidebar;

Alpine.start()

On components/PageSidebar.js

export default () => {
  return { 
      data: null,
      init() {
          console.log('sidebar component');
      },
      // methods
      // ......
  }
}

on Html Markup:

<div x-data="sidebarApp()">
......
</div>

explore more details here : https://alpinejs.dev/start-here

Thats All. Hope you get idea. Thanks for reading.

How do I manage States in React Apps?

Niyaz — Wed, 11 Aug 2021 11:30:11 +0000

In this article, Let's go through, how do i manage local, global states When building react applications.

I try to follow up with, keep the states as low as possible,

App Level State:

Local State
Lift State
Global State

1. Local State:

Example:

const App = () => {
    const [theme, setTheme] = useState("light");

    const pickTheme = theme === 'light' ? 'dark' : 'light';

    const toggleTheme = () => {
        setTheme(pickTheme)
    }

    return (
        <div>
            <h4>Theme: {theme}</h4>
            <button onClick={toggleTheme}>Change</button>
        </div>
    )
}

2. Lift State:

when components grows like 2, 3 levels deeper, it is fine..

Example:

function App() {
    const [theme, setTheme] = useState("light");
    const pickTheme = theme === 'light' ? 'dark' : 'light';
    const toggleTheme = () => {
        setTheme(pickTheme)
    }

    return <DirectChild theme={theme} toggleTheme={toggleTheme}  />
}

function DirectChild({ theme, toggleTheme }) {
    return <div>
        <div>Hello Child</div>
        <DeeperChild theme={theme} toggleTheme={toggleTheme} />
    </div>
}

function DeeperChild({ theme, toggleTheme }) {
    return <div>
        <h2>Hello Child</h2>
        <h4>Theme: {theme}</h4>
        <button onClick={toggleTheme}>Change Theme</button>
    <div>
}

But when components nested with N level deep, will lead to prop drilling, which causes performance issues, in those cases, we should think Global State Management..

3. Global State:

When dealing with Global States, I try to follow up with React Context API hooks, Let us go through, how to integrate with an example.

But When deal with Global State Management, can use any 3rd party libraries most comfortable with like Redux, Mobx, Recoil etc.. or just stick with useState hook..

Example:

import React from 'react';
const MyContext = React.createContext({});
const MyProvider = ({ children }) => {
    const [theme, setTheme] = React.useState('light');
    const nextTheme = theme === 'light' ? 'dark' : 'light';
    const value = {
        theme,
        nextTheme,
        toggleTheme: () => {
            setTheme(nextTheme);
        }
    }

    return <MyContext.Provider value={value}>{children}</MyContext.Provider>
}

function App() {
    return <MyProvider>
        <DirectChild />
    </MyProvider>
}

const DirectChild = () => {
    return <DeeperChild />
};

const DeeperChild = () => {
    const { nextTheme, toggleTheme } = React.useContext(MyContext);

    return <div>
            <p>Theme : {nextTheme}</p>
            <button onClick={toggleTheme}>Change Theme</button>
    </div>
}

External Data Fetching:

Often I try to use with Next.js's SWR or React Query libraries, which are powerful with many features.
on GraphQl fetch, can use Apollo Client.

Hoping this article have given some idea on managing states with React applications.

Thanks.

How to configure JWT in Laravel Applications

Niyaz — Thu, 24 Jun 2021 13:12:40 +0000

JWT installation & Settings

Before we get into this JSON Web Token tutorial, what exactly is a JWT?
In modern web trends, Popularity of single page applications, mobile applications, and RESTful API services, We are no longer spending much time building markup, instead we are building APIs that our front-end applications consume.
Back-end is more about business logic and data, while presentation logic is moved exclusively to the front-end or mobile applications. These changes have led to new ways of implementing authentication in modern applications.

What is a JSON Web Token?

A JSON Web Token is used to send information that can be verified and trusted by means of a digital signature. It comprises a compact and URL-safe JSON object, which is cryptographically signed to verify its authenticity, and which can also be encrypted if the payload contains sensitive information.
Because of its compact structure, JWT is usually used in HTTP Authorization headers or URL query parameters.

How to use JWT authentication approach in Laravel applications?

JWT (Json Web token) to make token based authentication system in Laravel. if we implement everything of jwt authentication system, it’s hard and takes long time. so we decided to use “tymon/jwt-auth” package to integarte quickly to develop jwt authentication system.

tymon/jwt-auth: https://github.com/tymondesigns/jwt-auth
tymon/jwt-auth document: https://jwt-auth.readthedocs.io/en/develop/

composer require tymon/jwt-auth

https://jwt-auth.readthedocs.io/en/develop/laravel-installation/

Publish the config

php artisan vendor:publish --provider="Tymon\JWTAuth\Providers\LaravelServiceProvider"

You should now have a config/jwt.php file that allows you to configure the basics of this package.

Generate secret key

I have included a helper command to generate a key for you:

php artisan jwt:secret

Update your User model

<?php
  namespace App;

  use Tymon\JWTAuth\Contracts\JWTSubject;
  use Illuminate\Notifications\Notifiable;
  use Illuminate\Foundation\Auth\User as Authenticatable;

  class User extends Authenticatable implements JWTSubject
  {
  use Notifiable;

  // Rest omitted for brevity

  /**
    * Get the identifier that will be stored in the subject claim of the JWT.
    *
    * @return mixed
    */
  public function getJWTIdentifier()
  {
      return $this->getKey();
  }

  /**
    * Return a key value array, containing any custom claims to be added to the JWT.
    *
    * @return array
    */
  public function getJWTCustomClaims()
  {
      return [];
  }
}

Configure Auth guard
inside the config/auth.php file, update the following details

  'defaults' => [
    'guard' => 'api',
    'passwords' => 'users',
  ],
  ......
  'guards' => [
    'api' => [
      'driver' => 'jwt',
      'provider' => 'users',
    ],
  ],

Add authentication routes
First let’s add some routes in routes/api.php as follows:
Jwt Authentication:

Route::post('register', [JwtAuthController::class, 'register'])->name('api.jwt.register');
Route::post('login', [JwtAuthController::class, 'login'])->name('api.jwt.login');
Route::group(['middleware' => 'auth:api'], function(){
  Route::get('user', [JwtAuthController::class, 'me'])->name('api.jwt.user');
  Route::get('refresh', [JwtAuthController::class, 'refresh'])->name('api.jwt.refresh');
  Route::get('logout', [JwtAuthController::class, 'logout'])->name('api.jwt.logout');
});

Create the JwtAuthController:
php artisan make:controller JwtAuthController

Then add the following:

<?php
namespace App\Http\Controllers\Auth;

use App\Models\User;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Auth;

class JwtAuthController extends Controller
{
    /**
    * Create a new AuthController instance.
    *
    * @return void
    */
    public function __construct()
    {
        $this->middleware('auth:api', ['except' => ['login', 'register']]);
    }

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

        $user = new User;
        $user->fill($request->all());
        $user->password = bcrypt($request->password);
        $user->save();

        return response()->json([
            'status' => 'success',
            'data' => $user
        ], 200);
    }

    /**
    * Get a JWT via given credentials.
    *
    * @return \Illuminate\Http\JsonResponse
    */
    public function login()
    {
        $credentials = request(['email', 'password']);

        if (!$token = Auth::attempt($credentials)) {
            return response()->json(['error' => 'Unauthorized'], 401);
        }

        return $this->respondWithToken($token);
    }

    /**
    * Get the authenticated User.
    *
    * @return \Illuminate\Http\JsonResponse
    */
    public function me()
    {
        return response()->json(Auth::user());
    }

    /**
    * Log the user out (Invalidate the token).
    *
    * @return \Illuminate\Http\JsonResponse
    */
    public function logout()
    {
        Auth::logout();

        return response()->json(['message' => 'Successfully logged out']);
    }

    /**
    * Refresh a token.
    *
    * @return \Illuminate\Http\JsonResponse
    */
    public function refresh()
    {
        return $this->respondWithToken(Auth::refresh());
    }

    /**
    * Get the token array structure.
    *
    * @param  string $token
    *
    * @return \Illuminate\Http\JsonResponse
    */
    protected function respondWithToken($token)
    {
        return response()->json([
            'access_token' => $token,
            'token_type' => 'bearer',
            'expires_in' => Auth::factory()->getTTL() * 60
        ]);
    }
}

You should now be able to POST to the login endpoint (e.g. http://localhost:8000/api/login) with some valid credentials and see a response like:

{
    "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ",
    "token_type": "bearer",
    "expires_in": 3600
}

This token can then be used to make authenticated requests to your application.