Hono と Stytch Auth の組み合わせ

この例では、vite と react を使い、Stytch のフロントエンド SDK と Cloudflare Workers 上の Hono バックエンドを組み合わせて、フルスタックアプリケーションを構築する方法を示します。

この方法に基づく完全なサンプルアプリケーションはこちらにあります。

インストール

npm

# Backend
npm install @hono/stytch-auth stytch

# Frontend
npm install @stytch/react @stytch/vanilla-js

yarn

# Backend
yarn add @hono/stytch-auth stytch

# Frontend
yarn add @stytch/react @stytch/vanilla-js

pnpm

# Backend
pnpm add @hono/stytch-auth stytch

# Frontend
pnpm add @stytch/react @stytch/vanilla-js

bun

# Backend
bun add @hono/stytch-auth stytch

# Frontend
bun add @stytch/react @stytch/vanilla-js

セットアップ

1. Stytch のアカウントを作成し、**コンシューマー認証（Consumer Authentication）**を選択します。
2. 設定で**フロントエンド SDK（Frontend SDK）**を有効にします。
3. プロジェクト設定から認証情報を取得します。

環境変数

バックエンドの Workers の環境変数は .dev.vars に、フロントエンドの Vite の環境変数は .env.local に設定します。

.dev.vars

STYTCH_PROJECT_ID=project-live-xxx
STYTCH_PROJECT_SECRET=secret-live-xxx

.env.local

VITE_STYTCH_PUBLIC_TOKEN=public-token-live-xxx

フロントエンド

1. アプリケーションを <StytchProvider /> コンポーネントで囲み、Stytch UI クライアントのインスタンスを渡します。
2. <StytchLogin /> コンポーネントでユーザーをログインさせます。認証方法やスタイルのカスタマイズの例は、コンポーネントのプレイグラウンドを参照してください。
3. ログイン後は、useStytchUser() フックで現在のユーザーデータを取得できます。
4. ユーザーのセッション情報は自動的に Cookie に保存され、バックエンドで利用できます。

App.tsx

import React from 'react'
import {StytchUIClient} from '@stytch/vanilla-js';
import {StytchProvider, useStytchUser} from '@stytch/react';
import LoginPage from './LoginPage'
import Dashboard from './Dashboard'

const stytch = new StytchUIClient(import.meta.env.VITE_STYTCH_PUBLIC_TOKEN ?? '');

function AppContent() {
  const { user, isInitialized } = useStytchUser()

  if (!isInitialized) return <div>Loading...</div>
  return user ? <Dashboard /> : <LoginPage />
}

function App() {
  return (
    <StytchProvider stytch={stytch}>
      <AppContent />
    </StytchProvider>
  )
}

export default App

LoginPage.tsx

import React from 'react'
import { StytchLogin } from '@stytch/react'
import { Products, OTPMethods } from '@stytch/vanilla-js'

const loginConfig = {
  products: [Products.otp],
  otpOptions: {
    expirationMinutes: 10,
    methods: [OTPMethods.Email],
  },
}

const LoginPage = () => {
  return <StytchLogin config={loginConfig} />
}

export default LoginPage

Dashboard.tsx

import React from 'react'
import { useStytchUser, useStytch } from '@stytch/react'

const Dashboard = () => {
  const { user } = useStytchUser()
  const stytchClient = useStytch()

  const handleLogout = () => stytchClient.session.revoke()

  return (
    <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <h1>Dashboard</h1>
        <button onClick={handleLogout}>Logout</button>
      </div>
      <p>Welcome, {user.emails[0]?.email}!</p>
    </div>
  )
}

export default Dashboard

バックエンド

1. 保護するエンドポイントに Consumer.authenticateSessionLocal() ミドルウェアを適用し、Stytch セッションの JWT を認証します。
2. ルート内で Consumer.getStytchSession(c) メソッドを使い、Stytch のセッション情報を取得します。
3. 完全なユーザーオブジェクトが必要なルートでは、Consumer.authenticateSessionRemote() メソッドで Stytch サーバーにネットワークリクエストを送れます。

src/index.ts

import { Hono } from 'hono'
import { Consumer } from '@hono/stytch-auth'

const app = new Hono()

// Public route
app.get('/health', (c) => c.json({ status: 'ok' }))

// Protected route with local authentication (very fast)
app.get('/api/local', Consumer.authenticateSessionLocal(), (c) => {
  const session = Consumer.getStytchSession(c)
  return c.json({
    message: 'Protected data',
    sessionId: session.session_id,
  })
})

// Protected route with remote authentication & full user data
app.get('/api/remote', Consumer.authenticateSessionRemote(), (c) => {
  const session = Consumer.getStytchSession(c)
  const user = Consumer.getStytchUser(c)
  return c.json({
    message: 'Protected data',
    sessionId: session.session_id,
    firstName: user.name.first_name,
  })
})

export default app

次のステップ

追加のドキュメントとリソース：

• Stytch Auth Hono サンプルアプリをご覧ください。
• Stytch JS SDK の入門ガイド。
• @hono/stytch-auth パッケージの完全なドキュメント。

組織管理、RBAC、SSO などのエンタープライズ B2B 機能に関心がある場合は、Stytch B2B 認証の製品ラインをご覧ください。

Stytch Slack コミュニティで、議論への参加、質問、新機能の提案ができます。