Need to configure your backend?See Build a Backend →

Authenticator の使用

フロントエンドアプリケーションで Amplify Auth を始める最も簡単な方法は、カスタマイズ可能な UI と完全な認証フローを提供する Authenticator コンポーネントです。

src/App.tsx
import { Authenticator } from '@aws-amplify/ui-react';
import { Amplify } from 'aws-amplify';
import '@aws-amplify/ui-react/styles.css';
import outputs from "../amplify_outputs.json";
Amplify.configure(outputs);
export default function App() {
    <Authenticator>
      {({ signOut, user }) => (
        <main>
          <h1>Hello {user?.username}</h1>
          <button onClick={signOut}>Sign out</button>
        </main>
    </Authenticator>

Authenticator コンポーネントは、バックエンドから生成された出力に基づいて自動的に設定されます。Authenticator の詳細とその外観をカスタマイズする方法について詳しくは、Amplify UI ドキュメントを参照してください。

別の方法として、独自の UI を使用し、aws-amplify のライブラリを活用して認証フローを手動で処理することもできます。