Amplify Gen 2でCognito認証を最短構築する（第1回）— defineAuth 1行からログインUIまで

npm install aws-amplify @aws-amplify/backend @aws-amplify/backend-cli

// amplify/auth/resource.ts
import { defineAuth } from '@aws-amplify/backend'

export const auth = defineAuth({
  loginWith: {
    email: true,
  },
})

// amplify/backend.ts
import { defineBackend } from '@aws-amplify/backend'
import { auth } from './auth/resource'
import { data } from './data/resource'

const backend = defineBackend({
  auth,
  data,
  // ... 他のリソース
})

// src/lib/amplify.ts
import { Amplify } from 'aws-amplify'

export async function configureAmplify(): Promise<boolean> {
  // Viteの動的インポートで amplify_outputs.json を読み込む
  const modules = import.meta.glob<Record<string, unknown>>(
    '/amplify_outputs.json',
    { eager: false },
  )
  const loader = modules['/amplify_outputs.json']

  if (!loader) {
    console.warn('amplify_outputs.json not found...')
    return false
  }

  try {
    const outputs = await loader()
    Amplify.configure(outputs as Parameters<typeof Amplify.configure>[0])
    return true
  } catch (err) {
    console.warn('Failed to configure Amplify:', err)
    return false
  }
}

// src/main.tsx
import { configureAmplify } from './lib/amplify'

async function bootstrap() {
  await configureAmplify()
  createRoot(document.getElementById('root')!).render(
    <StrictMode>
      <Root />
    </StrictMode>,
  )
}

void bootstrap()

// src/features/auth/hooks/useAuth.ts
import {
  signIn as amplifySignIn,
  signUp as amplifySignUp,
  signOut as amplifySignOut,
  confirmSignUp as amplifyConfirmSignUp,
  resetPassword as amplifyResetPassword,
  confirmResetPassword as amplifyConfirmResetPassword,
  getCurrentUser,
  fetchUserAttributes,
} from 'aws-amplify/auth'
import { useAuthStore } from '../stores/authStore'

export function useAuth() {
  const { setUser, setLoading, clear } = useAuthStore()

  const checkCurrentUser = useCallback(async () => {
    try {
      setLoading(true)
      const { userId } = await getCurrentUser()
      const attributes = await fetchUserAttributes()

      const currentUser: User = {
        id: userId,
        email: attributes.email ?? '',
        displayName: attributes.name ?? attributes.email ?? '',
        role: 'MEMBER',
        language: 'ja',
        displayTheme: 'system',
        createdAt: '',
        updatedAt: '',
      }
      setUser(currentUser)
      return currentUser
    } catch {
      clear()
      return null
    }
  }, [setUser, setLoading, clear])

  const signIn = useCallback(
    async (email: string, password: string) => {
      const result = await amplifySignIn({ username: email, password })
      if (result.isSignedIn) {
        return await checkCurrentUser()
      }
      return null
    },
    [checkCurrentUser],
  )

  const signUp = useCallback(
    async (email: string, password: string, displayName: string) => {
      await amplifySignUp({
        username: email,
        password,
        options: {
          userAttributes: { name: displayName },
        },
      })
    },
    [],
  )

  const confirmSignUp = useCallback(
    async (email: string, code: string) => {
      await amplifyConfirmSignUp({ username: email, confirmationCode: code })
    },
    [],
  )

  const signOut = useCallback(async () => {
    await amplifySignOut()
    clear()
  }, [clear])

  const resetPassword = useCallback(async (email: string) => {
    await amplifyResetPassword({ username: email })
  }, [])

  const confirmResetPassword = useCallback(
    async (email: string, code: string, newPassword: string) => {
      await amplifyConfirmResetPassword({
        username: email,
        confirmationCode: code,
        newPassword,
      })
    },
    [],
  )

  return {
    checkCurrentUser,
    signIn,
    signUp,
    confirmSignUp,
    signOut,
    resetPassword,
    confirmResetPassword,
  }
}

// src/features/auth/components/LoginForm.tsx
import { useState } from 'react'
import { useNavigate, useLocation } from 'react-router'
import { useAuth } from '../hooks/useAuth'

function getErrorMessage(errorName: string): string {
  switch (errorName) {
    case 'NotAuthorizedException':
      return 'メールアドレスまたはパスワードが正しくありません。'
    case 'UserNotFoundException':
      return 'アカウントが見つかりません。'
    case 'UserNotConfirmedException':
      return 'アカウントが確認されていません。メールを確認してください。'
    case 'TooManyRequestsException':
      return 'リクエスト数が上限に達しました。しばらく待ってから再試行してください。'
    default:
      return 'ログインに失敗しました。再度お試しください。'
  }
}

export function LoginForm() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [error, setError] = useState('')
  const [isSubmitting, setIsSubmitting] = useState(false)
  const { signIn } = useAuth()
  const navigate = useNavigate()
  const location = useLocation()

  const from = (location.state as { from?: Location })?.from?.pathname ?? '/'

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError('')
    setIsSubmitting(true)

    try {
      const user = await signIn(email, password)
      if (user) {
        navigate(from, { replace: true })
      }
    } catch (err) {
      const errorName = (err as { name?: string }).name ?? ''
      setError(getErrorMessage(errorName))
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      {error && <div className="error-message">{error}</div>}
      <div>
        <label htmlFor="email">メールアドレス</label>
        <input
          id="email"
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          required
        />
      </div>
      <div>
        <label htmlFor="password">パスワード</label>
        <input
          id="password"
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          required
        />
      </div>
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'ログイン中...' : 'ログイン'}
      </button>
      <a href="/password-reset">パスワードを忘れた方</a>
      <a href="/register">アカウント作成</a>
    </form>
  )
}

// src/features/auth/components/RegisterForm.tsx（抜粋）
type RegisterStep = 'register' | 'confirm'

export function RegisterForm() {
  const [step, setStep] = useState<RegisterStep>('register')
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [displayName, setDisplayName] = useState('')
  const [confirmCode, setConfirmCode] = useState('')
  const { signUp, confirmSignUp, signIn } = useAuth()

  // ステップ1: 登録
  const handleRegister = async (e: React.FormEvent) => {
    e.preventDefault()
    try {
      await signUp(email, password, displayName)
      setStep('confirm') // メール確認ステップへ
    } catch (err) {
      // エラーハンドリング
    }
  }

  // ステップ2: メール確認 → 自動ログイン
  const handleConfirm = async (e: React.FormEvent) => {
    e.preventDefault()
    try {
      await confirmSignUp(email, confirmCode)
      // 確認後に自動でログイン
      await signIn(email, password)
      navigate('/')
    } catch (err) {
      // エラーハンドリング
    }
  }

  if (step === 'confirm') {
    return (
      <form onSubmit={handleConfirm}>
        <p>{email} に確認コードを送信しました。</p>
        <input
          value={confirmCode}
          onChange={(e) => setConfirmCode(e.target.value)}
          placeholder="確認コード"
        />
        <button type="submit">確認</button>
      </form>
    )
  }

  return (
    <form onSubmit={handleRegister}>
      <input value={displayName} onChange={...} placeholder="表示名" />
      <input value={email} onChange={...} placeholder="メール" type="email" />
      <input value={password} onChange={...} placeholder="パスワード" type="password" />
      <button type="submit">アカウント作成</button>
    </form>
  )
}

// src/features/auth/components/PasswordResetForm.tsx（抜粋）
type ResetStep = 'request' | 'confirm'

export function PasswordResetForm() {
  const [step, setStep] = useState<ResetStep>('request')
  const { resetPassword, confirmResetPassword } = useAuth()

  // ステップ1: リセットコード送信
  const handleRequest = async (e: React.FormEvent) => {
    e.preventDefault()
    await resetPassword(email)
    setStep('confirm')
  }

  // ステップ2: 新パスワード設定
  const handleConfirm = async (e: React.FormEvent) => {
    e.preventDefault()
    await confirmResetPassword(email, code, newPassword)
    navigate('/login')
  }

  // ... フォームのレンダリング
}