blink-auth

重要：アプリで使用する前に、CLI または MCP 経由でプロバイダーを有効にしてください：blink auth-config set --provider google --enabled true

MCP ツール

blink_auth_get_config · blink_auth_set_config

はじめに

# Enable auth providers via CLI
blink auth-config set --provider google --enabled true
blink auth-config set --provider github --enabled true
blink auth-config set --provider email --enabled true

2 つの認証モード

マネージドモード（クイックセットアップ）

ホストされた認証ページにリダイレクトします。ウェブサイトや MVP に最適です。モバイルには対応していません。

重大：マネージドモードで使用できるのは blink.auth.login() と blink.auth.logout() のみです。signInWithGoogle()、signInWithEmail()、その他の認証メソッドを呼び出すと、"signInWithGoogle is only available in headless mode" がスローされます。カスタム認証 UI が必要な場合は、代わりにヘッドレスモードを使用してください。

const blink = createClient({
  projectId: import.meta.env.VITE_BLINK_PROJECT_ID || 'your-project-id',
  publishableKey: import.meta.env.VITE_BLINK_PUBLISHABLE_KEY || 'blnk_pk_xxx',
  auth: { mode: 'managed' },
})

blink.auth.login()                            // ✅ Redirects to blink.new/auth
blink.auth.login('https://app.com/dashboard') // ✅ Custom redirect after login
blink.auth.logout()                           // ✅ Sign out

// ❌ These ALL throw in managed mode:
// blink.auth.signInWithGoogle()
// blink.auth.signInWithEmail(email, password)
// blink.auth.signUp({ email, password })

ヘッドレスモード（カスタム UI）

認証 UI を完全に制御できます。モバイル（Expo/React Native）およびカスタムのサインインフォームには必須です。

const blink = createClient({
  projectId: import.meta.env.VITE_BLINK_PROJECT_ID || 'your-project-id',
  publishableKey: import.meta.env.VITE_BLINK_PUBLISHABLE_KEY || 'blnk_pk_xxx',
  auth: { mode: 'headless' },  // ← must be headless for all methods below
})

await blink.auth.signUp({ email, password })
await blink.auth.signInWithEmail(email, password)
await blink.auth.signInWithGoogle()    // ✅ only works in headless mode
await blink.auth.signInWithGitHub()
await blink.auth.signInWithApple()
await blink.auth.signInWithMicrosoft()

モードの比較

機能	マネージド	ヘッドレス
セットアップ	1 行	カスタム UI
モバイル	❌	✅ 必須
ブランディング	Blink ブランド	完全にカスタム

認証状態リスナー（React では必須）

useEffect(() => {
  const unsubscribe = blink.auth.onAuthStateChanged((state) => {
    setUser(state.user)
    if (!state.isLoading) setLoading(false)  // Only set false, never reset to true
  })
  return unsubscribe
}, [])

読み込み状態：読み込み中は常にスピナーまたはスケルトンを表示してください。return null は使用しないでください（本番環境で画面が真っ白になる原因になります）。

カスタムフィールドを使ったサインアップ

await blink.auth.signUp({
  email: '[email protected]',
  password: 'password123',
  displayName: 'John Doe',
  role: 'editor',
  metadata: { company: 'Acme Inc' },
})

パスワードのリセット

await blink.auth.sendPasswordResetEmail(email)
await blink.auth.confirmPasswordReset(token, newPassword)

// Custom flow: generate token, send your own email
const { token, resetUrl } = await blink.auth.generatePasswordResetToken(email)

マジックリンク

await blink.auth.sendMagicLink(email)
await blink.auth.verifyMagicLink(token)

RBAC（ロールベースアクセス制御）

const blink = createClient({
  projectId: import.meta.env.VITE_BLINK_PROJECT_ID || 'your-project-id',
  publishableKey: import.meta.env.VITE_BLINK_PUBLISHABLE_KEY || 'blnk_pk_xxx',
  auth: {
    mode: 'headless',
    roles: {
      admin: { permissions: ['*'] },
      editor: { permissions: ['posts.create', 'posts.update'], inherit: ['viewer'] },
      viewer: { permissions: ['posts.read'] },
    },
  },
})

blink.auth.can('posts.update')    // Check permission
blink.auth.hasRole('admin')       // Check role

主なメソッド

const user = await blink.auth.me()
await blink.auth.updateMe({ displayName: 'New Name' })
const token = await blink.auth.getValidToken()
await blink.auth.signOut()

認証と Blink API の連携方法

サインインすると、SDK が Authorization: Bearer <JWT> を自動的に付与します。ほとんどのモジュールでは認証が必要です。公開されている例外は、分析データの取り込みとストレージへのアップロード（追加のみ）です。

Expo/React Native のセットアップ

import * as WebBrowser from 'expo-web-browser'
import AsyncStorage from '@react-native-async-storage/async-storage'
import { createClient, AsyncStorageAdapter } from '@blinkdotnew/sdk'

const blink = createClient({
  projectId: process.env.EXPO_PUBLIC_BLINK_PROJECT_ID!,
  publishableKey: process.env.EXPO_PUBLIC_BLINK_PUBLISHABLE_KEY!,
  auth: { mode: 'headless', webBrowser: WebBrowser },
  storage: new AsyncStorageAdapter(AsyncStorage),
})