DEV Community: Jonathan Ruiz

Laravel 11 API Rest Auth with jwt-auth

Jonathan Ruiz — Fri, 26 Jul 2024 06:42:43 +0000

Installing via composer



composer require tymon/jwt-auth

Publishing the config



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

This command will create a file in config/jwt.php
There you can modify the default config like the expiration time of the token

Generating the secret key



php artisan jwt:secret

This command will add the key JWT_SECRET in your .env

Adding api guard
Inside the config/auth.php
Make the following changes



'defaults' => [
    'guard' => env('AUTH_GUARD', 'api'),
    'passwords' => env('AUTH_PASSWORD_BROKER', 'users'),
],



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

Updating the User model



use Tymon\JWTAuth\Contracts\JWTSubject;

class User extends Authenticatable implements JWTSubject

Adding the require methods



public function getJWTIdentifier()
    {
        return $this->getKey();
    }
public function getJWTCustomClaims()
    {
        return [];
    }

Creating the UserController



php artisan make:controller UserController --api --model=User

Defining the store method



public function store(Request $request)
{
    $data = $request->validate([
        'name' => 'required',
        'email' => 'required|email|unique:users',
        'password' => 'required|min:6',
    ]);
    $data['password'] = bcrypt($data['password']);
    $user = User::create($data);
    return response()->json($user, 201);
}

Defining the me method



public function me()
{
    return response()->json(auth()->user());
}

Creating the AuthController



php artisan make:controller AuthController

Defining the login method



public function login(Request $request)
{
    $credentials = $request->validate([
        'email' => 'required|email',
        'password' => 'required'
    ]);
    $token = auth()->attempt($credentials);

    if (!$token) {
        return response()->json([
            'status' => 401,
            'message' => 'Credenciales incorrectas'
        ], 401);
    }

    return response()->json([
        'token' => $token,
        'user' => auth()->user(),
        'expire_in' => auth()->factory()->getTTL() * 60
    ]);
}

Defining the me method



public function me()
{
    return response()->json(auth()->user());
}

Creating GuestMiddleware



php artisan make:middleware GuestMiddleware

This command will create the middleware in app/Http/Middlewares
import use Illuminate\Support\Facades\Auth;



public function handle(Request $request, Closure $next, ...$guards): Response
{
    if (Auth::guard($guards)->check()) {
        abort(401, 'You are not allowed to access this resource');
    }
    return $next($request);
}

This middleware will prevent the users authenticated can access to some routes like login route

Creating AuthMiddleware



php artisan make:middleware AuthMiddleware

This command will create the middleware in app/Http/Middlewares
import use Illuminate\Support\Facades\Auth;



public function handle(Request $request, Closure $next, ...$guards): Response
{
    if (!Auth::guard($guards)->check()) {
        abort(401, 'You are not allowed to access this resource');
    }
    return $next($request);
}

This middleware will prevent the users unauthenticated can access to some routes like me route

Defining the routes



use App\Http\Controllers\UserController;
use App\Http\Controllers\AuthController;
use App\Http\Middleware\GuestMiddleware;
use App\Http\Middleware\AuthMiddleware;

Route::middleware(GuestMiddleware::class)->group(function () {
    Route::post('login', [AuthController::class, 'login'])->name('login');
});
Route::middleware(AuthMiddleware::class)->group(function () {
    Route::get('me', [AuthController::class, 'me'])->name('me');
});

Route::apiResource('users', UserController::class);

Creating the AuthTest



php artisan make:test AuthTest

This command will create a file in tests/Feature



use Illuminate\Foundation\Testing\RefreshDatabase;
use PHPUnit\Framework\Attributes\Test;
class AuthTest extends TestCase
{
    use RefreshDatabase;
    private User $user;
    protected function setUp(): void
    {
        parent::setUp();
        $this->user = User::create([
            'name' => 'User',
            'email' => 'user@gmail.com',
            'password' => '1234',
        ]);
    }
}

Tests methods



#[Test]
public function should_create_a_user(): void
{
    $data = [
        'name' => 'Test',
        'email' => 'test@gmail.com',
        'password' => '1234',
    ];

    $response = $this->postJson(route('users.store'), $data);

    $response->assertStatus(201);
    $this->assertDatabaseHas('users', ['email' => 'test@gmail.com']);
}

#[Test]
public function should_login(): void
{
    $data = [
        'email' => $this->user->email,
        'password' => '1234',
    ];
    $response = $this->postJson(route('login'), $data);

    $response->assertStatus(200);
    $response->assertJsonStructure(['token']);
}

#[Test]
public function should_not_login(): void
{
    $data = [
        'email' => $this->user->email,
        'password' => '12345',
    ];
    $response = $this->postJson(route('login'), $data);
    $response->assertStatus(401);
}

#[Test]
public function should_return_user_authenticated(): void
{
    $response = $this->actingAs($this->user)->getJson(route('me'));
    $response->assertStatus(200);
    $response->assertJsonStructure(['id', 'name', 'email']);
    $response->assertJson(['id' => $this->user->id]);
}

Remove comments in the file phpunit.xml



<env name="APP_ENV" value="testing"/>
<env name="APP_MAINTENANCE_DRIVER" value="file"/>
<env name="BCRYPT_ROUNDS" value="4"/>
<env name="CACHE_STORE" value="array"/>
<env name="DB_CONNECTION" value="sqlite"/>
<env name="DB_DATABASE" value=":memory:"/>
<env name="MAIL_MAILER" value="array"/>
<env name="PULSE_ENABLED" value="false"/>
<env name="QUEUE_CONNECTION" value="sync"/>
<env name="SESSION_DRIVER" value="array"/>
<env name="TELESCOPE_ENABLED" value="false"/>

Running the tests



php artisan test --filter AuthTest

Laravel 11 Simple API Rest with tests

Jonathan Ruiz — Wed, 24 Jul 2024 08:42:04 +0000

First let’s create the database using phpMyAdmin
database: simple_api_rest
collation: utf8mb4_unicode_ci

Create a laravel project using one of this alternatives.

composer create-project laravel/laravel simple_api_rest

composer global require laravel/installer

laravel new simple_api_rest

Don’t select a starter kit.
We will use PHPUnit for testing.
Select mysql as a database.

Now run the command

php artisan install:api

This command create a api.php file in routes folter.
Each route defined in that file have the /api prefix by default.
Remove the route that was generated.

Creating the model Post with their migration.

php artisan make:model Post -m

This command will create the migration in database/migration
And the model in app/Models

public function up(): void
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('content');
            $table->timestamps();
        });
    }

Creating the PostFactory.

php artisan make:factory PostFactory

This command will create the factory in database/factories

public function definition(): array
    {
        return [
            "title" => $this->faker->title(),
            "content" => $this->faker->paragraph(),
        ];
    }

Creating the PostSeeder

php artisan make:seeder PostSeeder

This command will create the seeder in database/seeders

use App\Models\Post;

class PostSeeder extends Seeder
{
    /**
     * Run the database seeds.
     */
    public function run(): void
    {
        Post::factory(10)->create();
    }
}

Open the file seeders/DatabaseSeeder

public function run(): void
    {
        $this->call([
            PostSeeder::class,
        ]);
    }

Run the migration and the seeder

php artisan migrate:fresh  # fresh will remove all the data saved
php artisan db:seed # run the seeders
or
php artisan migrate:fresh --seed

You can see data created in the posts table in phpMyAdmin
Creating a test to view if data was created

php artisan make:test PostTest

This command will create the test in tests/Feature

use PHPUnit\Framework\Attributes\Test;

class PostTest extends TestCase
{
    #[Test]
    public function posts_must_be_created(): void
    {
        $this->assertDatabaseCount('posts', 10);
    }
}

Run the tests

php artisan test # run all the tests
or
php artisan test --filter posts_must_be_created # run all test that matches

Using a database in memory to run the tests
Open phpunit.xml and uncomment two lines

<php>
    <env name="APP_ENV" value="testing"/>
    <env name="APP_MAINTENANCE_DRIVER" value="file"/>
    <env name="BCRYPT_ROUNDS" value="4"/>
    <env name="CACHE_STORE" value="array"/>
    <env name="DB_CONNECTION" value="sqlite"/>
    <env name="DB_DATABASE" value=":memory:"/>
    <env name="MAIL_MAILER" value="array"/>
    <env name="PULSE_ENABLED" value="false"/>
    <env name="QUEUE_CONNECTION" value="sync"/>
    <env name="SESSION_DRIVER" value="array"/>
    <env name="TELESCOPE_ENABLED" value="false"/>
</php>

If we run the tests again will throw an error because the seeder wasn’t executed.

class PostTest extends TestCase
{
    use RefreshDatabase; // Create the database and run the migrations in each test

    protected function setUp(): void
    {
        parent::setUp();
        $this->seed(PostSeeder::class); // Run the seeder PostSeeder
    }
    #[Test]
    public function posts_must_be_created(): void
    {
        $this->assertDatabaseCount('posts', 10);
    }
}

Creating controller

php artisan make:controller PostController --api --model=Post

This command will create the controller in app/Http/Controllers

use App\Models\Post;
use Illuminate\Http\Request;

class PostController extends Controller
{
    public function index()
    {
        $posts = Post::all();
        return response()->json($posts);
    }
    public function store(Request $request)
    {
        $data = $request->validate([
            'title' => 'required|string|max:255',
            'content' => 'required|string',
        ]);
        $post = Post::create($data);
        return response()->json($post, 201);
    }
    public function show(Post $post)
    {
        return response()->json($post);
    }
    public function update(Request $request, Post $post)
    {
        $data = $request->validate([
            'title' => 'sometimes|required|string|max:255',
            'content' => 'sometimes|required|string',
        ]);
        $post->update($data);
        return response()->json($post);
    }
    public function destroy(Post $post)
    {
        $post->delete();
        return response()->json(null, 204);
    }
}

Defining routes

use App\Http\Controllers\PostController;
use Illuminate\Support\Facades\Route;

Route::apiResource('posts', PostController::class);

Command to see the routes defined

php artisan route:list
or
php artisan r:l

CRUD tests

class PostTest extends TestCase
{
    use RefreshDatabase; // Create the database and run the migrations in each test

    protected function setUp(): void
    {
        parent::setUp();
        $this->seed(PostSeeder::class); // Run the seeder PostSeeder
    }
    #[Test]
    public function posts_must_be_created(): void
    {
        $this->assertDatabaseCount('posts', 10);
    }

    #[Test]
    public function must_show_post_list(): void
    {
        $response = $this->getJson(route('posts.index'));
        $response->assertStatus(200);
        $response->assertJsonCount(10);
        $response->assertJsonStructure([
            '*' => [
                'id',
                'title',
                'content',
                'created_at',
                'updated_at',
            ]
        ]);
    }

    #[Test]
    public function must_show_post(): void
    {
        $response = $this->getJson(route('posts.show', 1));
        $response->assertStatus(200);
        $response->assertJsonStructure([
            'id',
            'title',
            'content',
            'created_at',
            'updated_at',
        ]);
    }
    #[Test]
    public function must_create_post(): void
    {
        $response = $this->postJson(route('posts.store'), [
            'title' => 'Test Post',
            'content' => 'This is a test post',
        ]);
        $response->assertStatus(201);
        $response->assertJsonStructure([
            'id',
            'title',
            'content',
            'created_at',
            'updated_at',
        ]);
        $this->assertDatabaseHas('posts', [
            'title' => 'Test Post',
            'content' => 'This is a test post',
        ]);
    }

    #[Test]
    public function must_update_post(): void
    {
        $response = $this->putJson(route('posts.update', 1), [
            'title' => 'Updated Test Post',
            'content' => 'This is an updated test post',
        ]);
        $response->assertStatus(200);
        $response->assertJsonStructure([
            'id',
            'title',
            'content',
            'created_at',
            'updated_at',
        ]);
        $this->assertDatabaseHas('posts', [
            'id' => 1,
            'title' => 'Updated Test Post',
            'content' => 'This is an updated test post',
        ]);
    }

    #[Test]
    public function must_delete_post(): void
    {
        $response = $this->deleteJson(route('posts.destroy', 1));
        $response->assertStatus(204);
        $this->assertDatabaseMissing('posts', [
            'id' => 1,
        ]);
    }
}

Running tests
Update and create tests will throw an error
We’re using mass assignment but still not defined the attributes that can received.

Open Post in app/Models

class Post extends Model
{
    use HasFactory;

    protected $fillable = [
        'title',
        'content',
    ];
}

Runing the tests again

php artisan test
or
php artisan test --filter PostTest

Nextjs + TailwindCSS + Storybook

Jonathan Ruiz — Tue, 07 Feb 2023 22:53:55 +0000

Create a nextjs project.

Using Javascript you can use:

npx create-next-app@latest
# or
yarn create next-app

Using Typescript you can use:

npx create-next-app@latest --typescript
# or
yarn create next-app --typescript

I'll use this options

Install Tailwind CSS with Next.js

Install Tailwind CSS with Next.js - Tailwind CSS

Setting up Tailwind CSS in a Next.js v10+ project.

tailwindcss.com

Trying TailwindCSS and adding a script

I'll try Tailwind CSS modifying the file pages/index.tsx

export default function Home() {
  return (
    <>
      <h1 className='text-red-900 text-9xl'>hola</h1>
    </>
  )
}

Now let's add the following script in the package.json file

"scripts": {
    "watch:css": "npx tailwindcss -i ./styles/globals.css -o ./public/tailwind.css --watch"
  }

This script will create file with only the clases that we used in our project. Also it will watch pending for new changes in the classes of our project.

Let's run the script
yarn watch:css

File added by the script

Classes used in our project are in that file

Installing and trying storybook

Before to install storybook we need to rename the .eslintrc.json to .eslintrc to avoid conflict with migrating when storybook is installing.

Now, let's install storybook

npx sb init

Storybook installed

Now try storybook running the script

yarn storybook

If show an error in the file tsconfig.json close and open vscode

Configuring storybook with tailwind

Open the file .storybook/preview.js and import the file created by the tailwindcss script

It should looks like this

import('../public/tailwind.css')

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/
    }
  }
}

Now must to tell tailwind to compile the files in the folder stories
Open the file tailwind.config.js and add the path './stories/*.{js,ts,jsx,tsx}'
It should looks like this

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './stories/*.{js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {}
  },
  plugins: []
}

Adding a storybook script

"scripts": {
  "watch:storybook": "start-storybook dev -p 6006"
},

Now let's run both script

yarn watch:css

Now, open another terminal and run

yarn watch:storybook

Creating a component and a story

Let's create a component in the path ./stories/AnotherButton.tsx

interface Props {}

export function AnotherButton(props: Props) {
  return (
    <>
      <button className='p-8 text-lg text-white rounded-3xl bg-slate-700'>
        AnotherButton
      </button>
    </>
  )
}

Let's create a story for that component in ./stories/AnotherButton.stories.tsx

import React from 'react'
import { ComponentStory, ComponentMeta } from '@storybook/react'

import { AnotherButton } from './AnotherButton'

export default {
  title: 'tailwind/AnotherButton',
  component: AnotherButton
} as ComponentMeta<typeof AnotherButton>

const Template: ComponentStory<typeof AnotherButton> = (args) => (
  <AnotherButton {...args} />
)

export const Primary = Template.bind({})