DEV Community: Daichi Izushi

Clear illustration of how API Token Authentication works

Daichi Izushi — Tue, 05 Nov 2024 20:32:07 +0000

Introduction

In this article, I will explain API token authentication in an easy-to-understand manner using diagrams.
After having a rough understanding of how API token authentication works, I will explain how API token authentication works using Laravel Sanctum in a code-based manner.

By reading this article you will learn the following

How API Token Authentication Works
How to install Laravel Sanctum
Generating API Token at User Registration and Login
API token authentication to restrict access and verify resource ownership
Deletion of API token on logout

Sample code

Here is the repository of API token authentication implementation using Laravel Sanctum.
https://github.com/Izushi/laravel-sanctum

How API Token Authentication Works

1. User Registration/Login Request

Client sends the user’s login information (e.g., email, password) to Auth server.

2. User Authentication

Auth server verifies the login information to check if the user exists and if the password is correct.

3. API Token Generation

Upon successful login, Auth server generates an API token for the user. The generated API token is stored in the personal_access_tokens table.

4. API Request

Client sends API request to Resource server, attaching the generated API token to the Authorization header.

5. API Token Verification

Resource server verifies API token. If API token is valid, the request is processed.

6. API Response

Resource server returns API response.

How to install Laravel Sanctum

sail php artisan install:api

This command generates the api.php file and migration files needed for API token authentication under the Laravel project.

Then, execute the migration:

sail artisan migrate

This creates personal_access_tokens table.

2024_10_23_231407_create_personal_access_tokens_table ......... 3.84ms DONE

Generating API Token at User Registration and Login

Sample Code

api.php

Route::post('/register', [AuthController::class, 'register']);

AuthController.php

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

    $user = User::create($fields);

    $token = $user->createToken($request->name);

    return [
        'user' => $user,
        'token' => $token->plainTextToken
    ];
}

User Registration

User registration.
The new user is saved in the users table.
An API token is generated. (createToken)
The generated API token and user information are stored in the personal_access_tokens table, and API token is provided to the user.

Sample Code

api.php

Route::post('/login', [AuthController::class, 'login']);

AuthController.php

public function login(Request $request)
{
    $request->validate([
        'email' => 'required|email|exists:users',
        'password' => 'required'
    ]);

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

    if (!$user || !Hash::check($request->password, $user->password)) {
        return [
            'message' => "User doesn't exist or password doesn't match."
        ];
    }

    $token = $user->createToken($user->name);

    return [
        'user' => $user,
        'token' => $token->plainTextToken
    ];
}

User Login

User login.
Verifies if the user exists in the users table.
API token is generated after successful login. (createToken)
The generated API token and user information are stored in the personal_access_tokens table, and API token is provided to the user.

*Note:A new API token is generated each time a user logs in.

API Token Generation

Using Postman, send an API request with the following conditions to check the response.

Upon successful login, an API token is generated.

You can check personal_access_tokens table to confirm that the logged-in user’s name and API token are saved.
*Note: The token in API response differs from the token in the personal_access_tokens table because it is hashed when stored in the database.

API Token Authentication

User sends API request and includes API token in Authorization header.
auth:sanctum middleware matches API token received from API request against API token stored in personal_access_tokens table.
If API token is successfully authenticated, Resource server processes API request.
The authenticated user can update or delete posts.
Resource server returns API response.

Restrict access to post functions

The following is the sample code of CRUD process for posts associated with a user.

Sample code: PostController.php

Using Laravel Sanctum, restrict access so that only logged-in users can create, edit, and delete posts associated with a user.
Send actual API request to verify that API Token Authentication is performed correctly.

Access Control Standards

User APIs

index, show These actions provide generally public information and do not require API token authentication for better user experience and SEO.
store, update, delete To prevent unauthorized access and maintain data integrity, API token authentication is required.

Admin APIs

index, show, store, update, delete For enhanced security, APIs that do not need to be public should be secured by requiring user authentication for all controller actions.

Coding

It is also possible to restrict access to all endpoints of posts set in apiResource by writing the following in the routing file.

api.php

Route::apiResource('posts', PostController::class)->middleware('auth:sanctum');

GET|HEAD        api/posts ............ posts.index › PostController@index
POST            api/posts ............ posts.store › PostController@store
GET|HEAD        api/posts/{post} ..... posts.show › PostController@show
PUT|PATCH       api/posts/{post} ..... posts.update › PostController@update
DELETE          api/posts/{post} ..... posts.destroy › PostController@destroy

In this case, we want to set API token authentication only for the store, update, and delete actions in the PostController. To do this, create a constructor method in PostController and apply the auth:sanctum middleware to all actions except index and show.

PostController.php

class PostController extends Controller
{
   public function __construct()
    {
        $this->middleware('auth:sanctum')->except(['index', 'show']);
    }
    ...
}

Now, users must include the token in the request when creating, updating, or deleting a post.

Testing this setup, if you send a request without the Authorization token for creating a post, a 401 error with an "Unauthenticated" message is returned, and the post creation fails.

If the Authorization token is included, the data is created successfully.

Similarly, the API for updating and deleting posts requires that the request be sent with the Token in the Authorization header.

Post Ownership Verification

User access restrictions have been implemented with API Token Authentication.
However, there is still a problem.
In its current state, authenticated users can update or delete another user's posts.
Add a process to verify that the user has ownership of the post.

User sends API request and includes API token in Authorization header.
auth:sanctum middleware matches API token received from API request against API token stored in the personal_access_tokens table.
auth:sanctum middleware gets the user associated with API token and checks if this user has ownership of the target post.
If API token is successfully authenticated and the user has ownership of the target post, Resource server will process API request.
The authenticated user with ownership of posts can update and delete posts.
Resource server returns API response.

Coding

Write authorization logic in the Laravel policy file so that only the users having the ownership of the posts can update and delete the posts.

PostController.php

<?php
use Illuminate\Support\Facades\Gate;

public function update(Request $request, Post $post)
{
    Gate::authorize('modify', $post);

    $fields = $request->validate([
        'title' => 'required|max:255',
        'body' => 'required'
    ]);

    $post->update($fields);

    return response()->json($post, 200);
}

public function destroy(Post $post)
{
    Gate::authorize('modify', $post);

    $post->delete();

    return response()->json(['message' => 'Post deleted'], 200);
}

Receiving a request
- User sends API request and includes API token in the Authorization header.
Verification of Token
- Resource server gets API token from the Authorization header of API request. And then verifies that API token received from the request matches API token stored in personal_access_tokens table.
User Identification
- If the token is valid, the user associated with the token is identified. We can get the identified user with $request->user() method.
Calling a policy Gate::authorize method passes the authenticated user and the resource objects as arguments to the policy's methods.

PostPolicy.php

<?php

namespace App\Policies;

use App\Models\Post;
use App\Models\User;
use Illuminate\Auth\Access\Response;

class PostPolicy
{
    public function modify(User $user, Post $post): Response
    {
        return $user->id === $post->user_id
            ? Response::allow()
            : Response::deny('You do not own this post.');
    }
}

modifymethod:

Arguments:
- $user: Instance of the currently authenticated user.
- $post: An instance of the Post model.
Logic:
- Check whether the currently authenticated user has the ownership of the specified post.

Updating other users' post

Set the post id as a path parameter to post update API endpoint.
Include the token of a user who does not own this post in the Authorization header.
Returns a 403 error message stating that you are not the owner of the post.

Deletion of API token on logout

Logout Flow

User sends API request and includes API token in Authorization header
auth:sanctum middleware matches API token received from API request against API token stored in the personal_access_tokens table.
If API token is successfully authenticated, Resource server processes API request.
Delete API token of the authenticated user from the personal_access_tokens table.
Resource server returns API response.

Coding

api.php

Route::post('/logout', [AuthController::class, 'logout'])->middleware('auth:sanctum');

Apply the auth::sanctum middleware for logout routing and set API Token Authentication.

AuthController.php

public function logout(Request $request)
{
    $request->user()->currentAccessToken()->delete();

    return [
        'message' => 'You have been logged out.'
    ];
}

The server will delete the current API token from the database. This makes the token invalid and cannot be used again.
The server returns a response to the client indicating that the logout was successful.

Summary

In this article, API token authentication was explained in an easy-to-understand manner using diagrams.
By leveraging Laravel Sanctum, simple and secure authentication can be achieved using API tokens, which allow clients to grant access rights to individual users with a flexibility that differs from session-based authentication. Using middleware and policies, API requests can also be efficiently protected, access restricted, and resource ownership verified.

[Laravel v11 x Docker] Efficiently Set Up a Laravel App Dev Environment with Laravel Sail

Daichi Izushi — Tue, 22 Oct 2024 22:12:20 +0000

About Laravel Sail

Laravel Sail is the official development environment for the Laravel framework. Sail provides a lightweight command-line interface (CLI) to easily set up and manage a Laravel application development environment using Docker. Below, we explain the main features and usage of Laravel Sail.

Benefits of Using Laravel Sail

Build a development environment independent of the OS
- Sail uses Docker to containerize the development environment for Laravel applications. This allows you to build a development environment that is independent of the OS.
Easy setup of the development environment
- With Sail, you can set up a Laravel development environment with just a few commands. Even complex development environments using MySQL, Redis, MailHog, etc., can be easily built.
Easy management of projects with different versions
- For example, the version of Laravel depends on the version of PHP, but by setting the environment for each project in the docker-compose.yml file, you can easily switch versions.

When you create a project using Docker with Laravel Sail, the structure will look like the diagram above.

Usage

Development Environment

Mac
PHP v8.3
Laravel v11
Docker

Prerequisites

Before creating a Laravel project, download and start Docker Desktop.
https://www.docker.com/products/docker-desktop/

1. Creating a Laravel Project

Run the following command to create a new Laravel project and set up Laravel Sail.

curl -s "https://laravel.build/example-app" | bash
cd example-app

This will create the Laravel project files. The development environment is described in the generated docker-compose.yml file.

Specify services with the `with` query

If you want to specify the PHP version or use PostgreSQL instead of MySQL, you can specify with=<service>,<service>,... in the command when generating the project.

curl -s "https://laravel.build/example-app?php=81&with=pgsql,redis" | bash

2. Starting Sail

Move to the project directory and start Sail.

./vendor/bin/sail up -d

This command starts the Docker containers and runs the Laravel application.

※Registering an alias

Typing ./vendor/bin/sail an be cumbersome, so save it as an alias sail in your shell's configuration file.

Check the path of the shell you are using with the following command

echo $SHELL

Example: /bin/zsh

Editing the Shell configuration file

For zsh

The Shell configuration file is ~/.zshrc.
To add an alias, run the following command

echo "alias sail='sh $([ -f sail ] && echo sail || echo vendor/bin/sail)'" >> ~/.zshrc
source ~/.zshrc

For bash

The shell configuration file is ~/.bash_profile or ~/.bashrc.
To add an alias, run the following command:

echo "alias sail='sh $([ -f sail ] && echo sail || echo vendor/bin/sail)'" >> ~/.bash_profile
source ~/.bash_profile

With the above settings, you can run the sail command in a shortened form.

sail up -d

3. Using Sail Commands

You can use Sail to perform various development tasks. Here are some examples.

Starting the application:

sail up -d

Stopping the application:

sail down

Running Artisan commands:

sail artisan migrate

Running Composer commands:

sail composer install

Running npm commands:

sail npm install

4. Changing Services

Even after creating the project, you can change the services by modifying the docker-compose.yml file, which is the Docker configuration file. Here, we will change the PHP version and the database used.

Changing the PHP version

First, check the current PHP version

sail php -v
PHP 8.3.12 (cli) (built: Sep 27 2024 03:53:05) (NTS)

Next, modify the development environment information described in the docker-compose.yml file.

services:
    laravel.test:
        build:
            context: "./vendor/laravel/sail/runtimes/8.3"
            dockerfile: Dockerfile
            args:
                WWWGROUP: "${WWWGROUP}"
        image: "sail-8.3/app"

Change build context and image to 8.1 .

services:
    laravel.test:
        build:
            context: "./vendor/laravel/sail/runtimes/8.1"
            dockerfile: Dockerfile
            args:
                WWWGROUP: "${WWWGROUP}"
        image: "sail-8.1/app"

After modifying docker-compose.yml, stop the application.

sail down

Next, rebuild the Docker containers to reflect the changes.

sail build --no-cache

Restart the application.

sail up -d

Check if the PHP version has changed.

sail php -v
PHP 8.1.30 (cli) (built: Sep 27 2024 04:07:29) (NTS)

The PHP version has been changed from PHP 8.3 to PHP 8.1.

Changing the database used

Change a project created with MySQL to PostgreSQL.

Run the Sail installation command

sail php artisan sail:install

Select pgsql

 ┌ Which services would you like to install? ───────────────────┐
 │   ◼ mysql                                                  ┃ │
 │ › ◻ pgsql                                                  │ │
 │   ◻ mariadb                                                │ │
 │   ◻ redis                                                  │ │
 │   ◻ memcached                                              │ │
 └────────────────────────────────────────────────── 1 selected ┘
  Use the space bar to select options.

Check the docker-compose.yml file and confirm that the pgsql entries have been added.

services:
    laravel.test:
...
        depends_on:
            - mysql
            - redis
            - meilisearch
            - mailpit
            - selenium
            - pgsql
...
        pgsql:
            image: 'postgres:17'
            ports:
                - '${FORWARD_DB_PORT:-5432}:5432'
            environment:
                PGPASSWORD: '${DB_PASSWORD:-secret}'
                POSTGRES_DB: '${DB_DATABASE}'
                POSTGRES_USER: '${DB_USERNAME}'
                POSTGRES_PASSWORD: '${DB_PASSWORD:-secret}'
            volumes:
                - 'sail-pgsql:/var/lib/postgresql/data'
                - './vendor/laravel/sail/database/pgsql/create-testing-database.sql:/docker-entrypoint-initdb.d/10-create-testing-database.sql'
            networks:
                - sail
            healthcheck:
                test:
                    - CMD
                    - pg_isready
                    - '-q'
                    - '-d'
                    - '${DB_DATABASE}'
                    - '-U'
                    - '${DB_USERNAME}'
                retries: 3
                timeout: 5s

ext, open the .env file in the project directory and confirm that DB_CONNECTION=pgsql and DB_HOST=pgsql are set.
If not, change them manually.

DB_CONNECTION=pgsql
DB_HOST=pgsql
DB_PORT=5432
DB_DATABASE=laravel
DB_USERNAME=sail
DB_PASSWORD=******

After confirming the changes in docker-compose.yml and .env, stop the application.

sail down

Next, rebuild the Docker containers to reflect the changes.

sail build --no-cache

Restart the application.

sail up -d

Run the migration files.

sail artisan migrate

INFO  Preparing database.

Creating migration table ................................ 6.00ms DONE

INFO  Running migrations.

0001_01_01_000000_create_users_table .................... 5.74ms DONE
0001_01_01_000001_create_cache_table .................... 1.45ms DONE
0001_01_01_000002_create_jobs_table ..................... 3.44ms DONE

Start a shell in Docker and check pgsql

Display the list of currently running Docker containers.

sail ps

NAME                                IMAGE                          COMMAND                  SERVICE
laravel-sail-setup-laravel.test-1   sail-8.3/app                   "start-container"        laravel.test
laravel-sail-setup-mailpit-1        axllent/mailpit:latest         "/mailpit"               mailpit

Check the container name of the application and start the bash of the application inside Docker.

docker exec -it laravel-sail-setup-laravel.test-1 bash

Connect to pgsql.

psql -U sail -h pgsql laravel

You will be prompted for a password, so enter the DB_PASSWORD specified in the .env file.

Password for user sail:******

Check the tables in pgsql

laravel=# \dt
               List of relations
 Schema |         Name          | Type  | Owner
--------+-----------------------+-------+-------
 public | cache                 | table | sail
 public | cache_locks           | table | sail
 public | failed_jobs           | table | sail
 public | job_batches           | table | sail
 public | jobs                  | table | sail
 public | migrations            | table | sail
 public | password_reset_tokens | table | sail
 public | sessions              | table | sail
 public | users                 | table | sail
(9 rows)

In this way, you can change from MySQL to PostgreSQL even after creating the project.

Conclusion

Through this article, you will understand how to efficiently set up and manage a development environment using Laravel Sail. By selecting appropriate services and customizing the settings according to the project's requirements, you can achieve a more flexible and powerful development environment.

Create your own npm library

Daichi Izushi — Fri, 11 Oct 2024 20:06:07 +0000

Introduction

React.js, Three.js, and other excellent libraries that we usually use can actually be created by ourselves. I am posting this article as a review of a class on creating libraries at a college in Canada.

Prerequisites

Node.js must be available.
npm can be used by installing Node.js.

Publish your own library to npm

Project Setup

First, create an npm account.

npmjs.com

Create a project directory in the local environment.

mkdir original-library

Move to the project directory

cd original-library

Initialize package.json file.

npm init -y

This command creates package.json.

Log in to your npm account

npm login

When you hover over the password box, the character blindfolds you.
It reminded me of the manner in which the waiters turn their back when entering a password for a credit card transaction in a Japanese restaurant lol.
This character has manners.

After logging in with a browser, return to the terminal and check the linkage.

npm whoami

If the npm registration name is output here, the login is complete.

Add necessary settings to package.json

Property Description

name:
The name of the package to be published to npm.
version:
The version number of the package. Conforms to semantic versioning.
main:
The file that serves as the entry point for the package. It is usually referenced when loading a package with require or import.
Example: “main”: “index.js”
keywords:
keywords that are used to search for packages.
An array of keywords to make it easier to search for packages is used by npm's search function.
Example: “keywords”: [“library”, “example”].
author:
The author's information about the package. Can include name, email address, URL, etc.
Example: “author”: “Your Name your.email@example.com (http://example.com)”
license:
Package license information.
License information for the package. Use the identifier of the open-source license.
Example: “license”: “ISC”
description: A brief description of the package will be displayed in the npm package list and search results.
Example: “description”: “A description of my library”

{
  "name": "@yourname/original-library",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

About the scope of `name`

How to add a scope
It appears that the scope name must be the same as the npm registration name. The format is @my-scope/package-name.
Usually, the team name, project name, or personal name is used.

Benefits of Scope

Namespace Separation:
Scopes can be used to avoid package name conflicts. Even if different organizations or projects have packages with the same name, they are distinguished by scope.
Ease of Management:
Ease of management: packages can be grouped by organization or team. This is especially useful when managing large projects or multiple projects.
Access Control:
Scope allows for access control.
Scopes can be used to control the public scope of packages. Private scopes can be used to ensure that only specific users or teams have access.

Write the code for the library

Create an entry point file based on the index.js set in main and write the library code.

function sayHello() {
    return "Hello, World!";
}

function sum(a, b) {
  return a + b;
}

function multiply(a, b) {
  return a * b;
}

module.exports = {
  sayHello, sum, multiply
}

Publish the library

Normally npm publish, but since scoped packages are treated as private by default, they must be published using the - access public option.

npm publish — access public

New libraries have been added to npm packages.

Install your own library

Create a new project

mkdir call-function-from-original-library
cd call-function-from-original-library

Copy the installation commands provided on the library details screen.

Install your own library in a new project

npm i @yourname/original-library

When the above is performed, the following occurs

Update node_modules directory:
@yourname/original-library package is installed in node_modules directory.
If there are already existing node_modules directories, new packages will be added to them.
Updating package.json:
@yourname/original-library is added to dependencies section of package.json file.
If it already exists, the version is updated.
Update package-lock.json:
@yourname/original-library is added to the dependencies section of the package.json file.
The package-lock.json file is updated to record the exact version of the installed package and its dependencies.
This will allow other developers to install the same dependencies.

node_modules directory is excluded from Git tracking

node_modules directory contains many files, so managing it with Git would make the repository size too large.
Also, the presence of the package-lock.json file makes the dependency version fixed and removes it from Git tracking because other developers can reproduce the same environment.

touch .gitignore

Add node_modules to .gitignore file

/node_modules

Importing your own library

Add “type”: “module” to the created package.json.

{
  "dependencies": {
    "@yourname/original-library": "^1.0.0"
  },
  "type": "module"
}

Create an index.js file to check if the library can be used correctly.
Import the library in the index.js file and call the functions.

import myLibrary from '@yourname/original-library';
const { sayHello, sum, multiply } = myLibrary;

console.log(sayHello());
console.log(sum(3, 4));
console.log(multiply(3, 4));

Run index.js in a terminal

node index.js

output

Hello, World!
7
12

Updating your own library

This section describes the procedure when modifications are made to the library.

First, make modifications to the library

function sayHello() {
    return "Hello, World!";
}

function sum(a, b) {
  return a + b;
}

function multiply(a, b) {
  return a * b;
}

// add
function divide(a, b) {
  return a / b;
}

module.exports = {
  sayHello, sum, multiply, divide
}

If you modify the library, you need to change the version in package.json. If the version is not changed, an error will occur when publishing.

MAJOR: Increased when backward incompatible changes are made.
MINOR: Increased when backward-compatible functionality is added.
PATCH: Increased when backward-compatible bug fixes are made.

{
  "name": "@yourname/original-library",
  "version": "1.0.1",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

Then log in to npm and publish.

npm login
npm publish --access public

Verify that the library contents and version have been updated.

Conclusion

In this tutorial, we have gone through the process of creating and publishing your own npm library. From project setup to version control to public scoping, understanding how to create a library will enable you to contribute to the open source community and share your code with other developers.

Adding motion to 3D models with Framer Motion and Three.js

Daichi Izushi — Thu, 10 Oct 2024 01:46:25 +0000

Libraries

Framer Motion

Framer Motion is an animation library for React. The declarative aspect of the library is in line with the React philosophy, making it very comfortable to use. You can see an example in the official documentation below, you can control complex animations with a simple description.

Documentation | Framer for Developers

An open source, production-ready motion library for React on the web.

framer.com

React Three Fiber

A library that enables Three.js to be used as a React component, providing the basic functionality of Three.js as a React component.

Introduction - React Three Fiber

React-three-fiber is a React renderer for three.js.

r3f.docs.pmnd.rs

Drei

This helper library for React Three Fiber provides useful components and hooks to make Three.js easier to use with React. This makes building 3D scenes easier and improves code readability and maintainability.

Introduction - Drei

Useful helpers for @react-three/fiber

drei.docs.pmnd.rs

Library Installation

Framer Motion

npm install framer-motion

React Three Fiber

npm install @react-three/fiber

Drei

npm install @react-three/drei

Introduction of 3D model

Saving 3D Model Files

First, download a 3D model of your choice from Sketchfab, etc., and save the gltf and bin files under /src/assets/models in your React application.

sketchfab.com

GLTF model loading

url
property specifying the path to the directory where the 3D model was placed earlier

useGLTF hook
Loads a 3D model in GLTF format asynchronously from the path of the directory where the 3D model was placed

import { Canvas } from '@react-three/fiber';
import { useGLTF } from '@react-three/drei';

const Model = ({ url }: { url: string; }) => {
  const { scene } = useGLTF(url);

  return (
    <group>
      <primitive object={scene} />
    </group>
  );
};

const ThreeModel = () => {
  return (
    <div>
      <Canvas>
        <Model url="/src/assets/models/scene.gltf"/>
      </Canvas>
    </div>
  );
};

export default ThreeModel;

Rendering the model

The loaded GLTF Model scene object is used within the primitive component and added to the scene in Three.js.

Manipulation of 3D models

Brightness adjustment of 3D model

ambientLight
Light up the 3D model

const ThreeModel = () => {
  return (
    <div>
      <Canvas>
        <ambientLight intensity={3}/>
...
      </Canvas>
    </div>
  );
};

Adjust the size, position, and tilt of the 3D model

Added scale, position, and rotation properties to the Model component.

scale
Property specifying the size of the model

position
Property that specifies the position of the model. In array format, each element represents a position relative to the x, y, and z axes.

1st value of array: 0 (position along x-axis)
2nd value of array: -1.2 (position along y-axis)
3rd value of array: 1 (position along z-axis)

import { Canvas } from '@react-three/fiber';
import { useGLTF } from '@react-three/drei';

const Model = ({
  url,
  scale,
  position,
  rotation
}: {
  url: string;
  scale: number;
  position: number[];
  rotation: number[];
}) => {
  const { scene } = useGLTF(url);

  return (
    <group>
      <primitive
      object={scene}
      scale={scale} 
      position={position}
      rotation={rotation} />
    </group>
  );
};

const ThreeModel = () => {
  return (
    <div
    className='w-full h-[700px]'>
      <Canvas>
        <ambientLight intensity={3}/>
        <Model
        url="/src/assets/models/scene.gltf"
        scale={0.8}
        position={[0, -1.2, 1]}
        rotation={[Math.PI / 7, -Math.PI / 10, 0]} />
      </Canvas>
    </div>
  );
};

export default ThreeModel;

Adjust camera position and field of view

camara property
The object that specifies Three.js camera settings

position
Specifies the camera position. Array format, with each element representing a position relative to the x, y, and z axes.

fov
Specify the camera’s field of view

import { Canvas } from '@react-three/fiber';
...
<Canvas camera={{ position: [0, 0, 15], fov: 30 }}>

Add wave motion to the 3D model

Within the useFrame hook, the y-coordinate of the group is periodically varied using sine waves to achieve an animation of the 3D model moving up and down.

useRef
Create a reference to the group element using the useRef hook. This reference is used to access DOM elements and Three.js objects.

import { useRef } from 'react';
...
const groupRef = useRef(null);

Rendering of group element

group element
Corresponds to the Group object in Three.js. This element is used to manipulate multiple objects together.

ref={groupRef}
A reference to this group element is set to groupRef.

return (
  <group ref={groupRef}>
    <primitive object={scene} scale={scale} position={position} rotation={rotation} />
  </group>
);

Animation loop processing

useFrame
React Three Fiber hook, used to hook into the Three.js rendering loop for animation and frame-by-frame updates.

Math.sin(state.clock.elapsedTime)
Generate a sine wave based on the elapsed time in seconds since the animation started

groupRef.current.position.y
By setting the result multiplied by the sine wave value, the y-coordinate of group will fluctuate up and down. In this case, the amplitude is set to 0.25.

import { useFrame } from '@react-three/fiber';
...
useFrame((state) => {
  if (groupRef.current) {
    groupRef.current.position.y = Math.sin(state.clock.elapsedTime) * 0.25;
  }
});

Move 3D model with mouse operation

OrbitControls
Control the camera to rotate, translate, and zoom in and out around a central point. Easily available in React Three Fiber using a helper library drei.

enableZoom property
Disable the zoom function by setting it to false.

import { OrbitControls} from '@react-three/drei';
...
const ThreeModel = () => {
  return (
    <div
    className='w-full h-[700px]'>
      <Canvas camera={{ position: [0, 0, 15], fov: 30 }}>
...
        <OrbitControls enableZoom={false} />
      </Canvas>
    </div>
  );
};

Add animation to 3D model with Framer motion

motion.div is a component for adding animation using the Framer Motion library. motion.div works like a normal div element, but allows you to add animation settings.

Properties of motion.div

initial
Specify the initial state of the animation. In this case, x: 100 and opacity: 0 are specified.

animate
Specify the final state of the animation. In this case, x: 0 and opacity: 1 are specified.

transition
Specify settings for animation transitions

type: 'spring'
The spring type simulates the movement of a physical spring and provides animation with a natural damping effect.
duration
Specifies the duration of the transition in seconds.
However, if type: ‘spring’ is specified, stiffness and damping have priority.
delay
Specify the delay in seconds before the transition starts. In this case, the animation starts 0.9 seconds later.
stiffness
Specifies the hardness of the stiffness of the spring. The higher the value, the stiffer the spring and the faster the animation.

import { motion } from 'framer-motion';
...
const ThreeModel = () => {
  return (
    <motion.div
      initial={{ y: -100, opacity: 0 }}
      animate={{ y: 0, opacity: 1 }}
      transition={{
        type: 'spring',
        duration: 0,
        delay: 0.9,
        stiffness: 200,
      }}
    className='w-full h-[700px]'>
...
    </motion.div>
  );
};

Conclusion

How to add animation effects to a 3D model using Framer Motion
,React three fiber and Drei make it easy to build interactive and visually appealing web applications.Use it to make your website more attractive!

DEV Community: Daichi Izushi

Clear illustration of how API Token Authentication works

Introduction

Sample code

How API Token Authentication Works

1. User Registration/Login Request

2. User Authentication

3. API Token Generation

4. API Request

5. API Token Verification

6. API Response

How to install Laravel Sanctum

Generating API Token at User Registration and Login

Sample Code

User Registration

Sample Code

User Login

API Token Generation

API Token Authentication

Restrict access to post functions

Access Control Standards

User APIs

Admin APIs

Coding

Post Ownership Verification

Coding

Updating other users' post

Deletion of API token on logout

Logout Flow

Coding

Summary

[Laravel v11 x Docker] Efficiently Set Up a Laravel App Dev Environment with Laravel Sail

About Laravel Sail

Benefits of Using Laravel Sail

Usage

1. Creating a Laravel Project

Specify services with the with query

2. Starting Sail

※Registering an alias

3. Using Sail Commands

4. Changing Services

Changing the PHP version

Changing the database used

Conclusion

Create your own npm library

Introduction

Prerequisites

Publish your own library to npm

Project Setup

Log in to your npm account

Add necessary settings to package.json

About the scope of name

Install your own library

node_modules directory is excluded from Git tracking

Importing your own library

Updating your own library

Conclusion

Adding motion to 3D models with Framer Motion and Three.js

Libraries

Framer Motion

Documentation | Framer for Developers

React Three Fiber

Introduction - React Three Fiber

Drei

Introduction - Drei

Library Installation

Framer Motion

React Three Fiber

Drei

Introduction of 3D model

Saving 3D Model Files

GLTF model loading

Rendering the model

Manipulation of 3D models

Brightness adjustment of 3D model

Adjust the size, position, and tilt of the 3D model

Adjust camera position and field of view

Add wave motion to the 3D model

Move 3D model with mouse operation

Add animation to 3D model with Framer motion

Specify services with the `with` query

About the scope of `name`