Stytch Auth mit Hono

Dieses Beispiel zeigt, wie du mit vite und react eine Full-Stack-Anwendung mit den Stytch-Frontend-SDKs und einem Hono-Backend auf Cloudflare Workers einrichtest.

Eine vollständige Beispielanwendung, die diese Vorgehensweise nutzt, findest du hier.

Installation

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

Einrichtung

1. Erstelle ein Stytch-Konto und wähle Verbraucherauthentifizierung (Consumer Authentication).
2. Aktiviere das Frontend SDK in der Konfiguration.
3. Hole deine Zugangsdaten aus den Projekteinstellungen.

Umgebungsvariablen

Die Umgebungsvariablen der Backend-Workers kommen in .dev.vars. Die Vite-Umgebungsvariablen für das Frontend kommen in .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

Frontend

1. Umschließe deine Anwendung mit der Komponente <StytchProvider /> und übergib ihr eine Instanz des Stytch-UI-Clients.
2. Verwende die Komponente <StytchLogin />, um den Benutzer anzumelden. Im Komponenten-Playground findest du Beispiele für verschiedene Authentifizierungsmethoden und verfügbare Stilanpassungen.
3. Nach der Anmeldung kannst du mit dem Hook useStytchUser() die Daten des aktiven Benutzers abrufen.
4. Die Sitzungsinformationen des Benutzers werden automatisch als Cookie gespeichert und deinem Backend zur Verfügung gestellt.

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

Backend

1. Sichere geschützte Endpunkte mit der Middleware Consumer.authenticateSessionLocal() ab, um das Stytch-Sitzungs-JWT zu authentifizieren.
2. Verwende die Methode Consumer.getStytchSession(c), um die Stytch-Sitzungsinformationen innerhalb einer Route abzurufen.
3. Routen, die das vollständige Benutzerobjekt benötigen, können mit Consumer.authenticateSessionRemote() eine Netzwerkanfrage an die Stytch-Server durchführen.

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

Nächste Schritte

Weitere Dokumentation und Ressourcen:

• Sieh dir die Stytch-Auth-Hono-Beispielanwendung an.
• Anleitung für den Einstieg in das Stytch JS SDK.
• Vollständige Dokumentation des Pakets @hono/stytch-auth.

Interessierst du dich für Enterprise-B2B-Funktionen wie Organisationsverwaltung, RBAC und SSO? Sieh dir die Produktlinie Stytch B2B Authentication an.

In der Stytch-Slack-Community kannst du mitdiskutieren, Fragen stellen und neue Funktionen vorschlagen.