【認証/Auth系】JWTをTypeScriptで実装する際のライブラリ選定📝

import { jwtVerify, createRemoteJWKSet } from 'jose';
import type { JWTVerifyOptions } from 'jose';

const JWKS = createRemoteJWKSet(
  new URL('https://example.com/.well-known/jwks.json')
);

export async function verifyAccessToken(token: string, opts?: JWTVerifyOptions) {
  const { payload } = await jwtVerify(token, JWKS, {
    issuer: 'https://example.com/',
    audience: 'my-api',
    ...opts,
  });
  return payload; // 型推論で iss/aud/exp などに補完が効く
}

# 片側ずつ
npm i jose
npm i hono bcryptjs          # ← API
npm i react-router-dom       # ← Front

// src/auth.ts
import { SignJWT, jwtVerify, type JWTPayload } from 'jose'

const encoder = new TextEncoder()
const secret = encoder.encode(process.env.JWT_SECRET!) // HS256 の例

export async function signAccessToken(payload: JWTPayload) {
  return new SignJWT(payload)
    .setProtectedHeader({ alg: 'HS256', typ: 'JWT' })
    .setIssuedAt()
    .setExpirationTime('1h')
    .sign(secret)
}

export async function verifyAccessToken(token: string) {
  const { payload } = await jwtVerify(token, secret)
  return payload
}

// src/index.ts
import { Hono } from 'hono'
import { jwt } from 'hono/jwt'         // 公式ミドルウェア
import { signAccessToken } from './auth'
import bcrypt from 'bcryptjs'

interface User { id: string; email: string; passwordHash: string }
const users: User[] = [
  { id: 'u1', email: 'alice@example.com', passwordHash: bcrypt.hashSync('Passw0rd!', 10) },
]

const app = new Hono()

app.post('/login', async c => {
  const { email, password } = await c.req.json<{ email: string; password: string }>()
  const user = users.find(u => u.email === email)
  if (!user || !bcrypt.compareSync(password, user.passwordHash)) {
    return c.json({ message: 'Invalid credentials' }, 401)
  }
  const token = await signAccessToken({ sub: user.id, email: user.email })
  return c.json({ token })
})

app.use('/api/*', jwt({ secret: process.env.JWT_SECRET! })) // HS256 例

app.get('/api/me', c => {
  // `jwtPayload` には verify 済みクレームが入る
  const payload = c.get('jwtPayload')
  return c.json({ user: payload })
})

export default app

// src/Login.tsx
import { useState } from 'react'

export function Login() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    const res = await fetch('/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email, password }),
    })
    if (!res.ok) return alert('Login failed')
    const { token } = await res.json()
    localStorage.setItem('access_token', token) // 後述のセキュリティ注に注意
    window.location.href = '/dashboard'
  }
  return (
    <form onSubmit={handleSubmit}>
      <input value={email}    onChange={e => setEmail(e.target.value)}    placeholder="email" />
      <input value={password} onChange={e => setPassword(e.target.value)} placeholder="password" type="password" />
      <button>Sign in</button>
    </form>
  )
}

export async function apiFetch(input: RequestInfo, init: RequestInit = {}) {
  const token = localStorage.getItem('access_token')
  return fetch(input, {
    ...init,
    headers: { ...(init.headers || {}), Authorization: `Bearer ${token}` },
  })
}

import { useEffect, useState } from 'react'
import { apiFetch } from './apiFetch'

export function Dashboard() {
  const [user, setUser] = useState<any>(null)
  useEffect(() => {
    apiFetch('/api/me').then(async r => {
      if (r.ok) setUser(await r.json())
      else window.location.href = '/login'
    })
  }, [])
  return <pre>{JSON.stringify(user, null, 2)}</pre>
}