Amplify v6に更新してログインできなくなった話

前書き

Amplify でホスティングしているページでログインできない問題が発生した。

エラー内容

console

> UserAlreadyAuthenticatedException: There is already a signed in user

Amplify/Auth ですでにサインイン済みの状態になっていることがわかった。
サインイン済みの状態でログインページからサインインをしようとするとこのエラーが発生する。
どうやらブラウザバックなどでログインページに遷移した場合、サインイン済みの状態でログインページへ遷移してしまうようだった。

修正前

import { signIn, type SignInInput, type SignInOutput } from "aws-amplify/auth";

// サインイン処理
async function handleSignIn(): Promise<void> {
    // サインイン情報を作成
    const signInInput : SignInInput = {
      username: userId.value,
      password: password.value
    }
    // サインインを実施
    const signInOutput : SignInOutput = await signIn(signInInput);
}

原因と解決手段

少し前に Amplify v6 へのマイグレーションを行ったことに起因すると考えられる。v6 では fetchAuthSession への変更が中心となっており、ログインページ周りでもロジックの修正が必要となる。本件では最後にサインインしたユーザ情報を維持してしまっているため、サインイン処理を実行する前にサインイン情報を持っているか判定し、ある場合は一度サインアウトを実施する必要がある。

修正後

import { signIn, type SignInInput, type SignInOutput, signOut, fetchAuthSession } from "aws-amplify/auth";

// idTokenが存在する（サインイン済み）場合、サインアウトする
const idToken = (await fetchAuthSession()).tokens?.idToken;
if (idToken) {
    await signOut();
}

// サインイン処理
async function handleSignIn(): Promise<void> {
    // サインイン情報を作成
    const signInInput : SignInInput = {
      username: userId.value,
      password: password.value
    }
    // サインインを実施
    const signInOutput : SignInOutput = await signIn(signInInput);
}

あとがき

サインインされた状態を維持するのは望ましくないので、onUnmounted 時にサインアウトするようにするなど他の対処も必要かもしれない。

参考文献