【初心者向け】ReactにAmplifyを導入してログイン機能を実装する方法

AWS

はじめに

今回は AWS Amplify を使って、Reactアプリにログイン機能を簡単に導入する方法を解説します。AmplifyはAWSが提供する強力なバックエンドフレームワークで、認証機能（Cognito）を数ステップで追加できるのが魅力です。

この記事では、ユーザー登録・ログイン・ログアウトができるシンプルなReactアプリを作成します。

前提条件

  • Node.js / npm がインストールされている
  • AWSアカウントを持っている
  • Reactの基本的な知識がある

Reactアプリの作成

下記記事にreactプロジェクトの作成方法を記載しているのでご参考ください。

Viteを使ってReactプロジェクトを作成する方法
Viteを使ってReactプロジェクトを手軽に構築する方法を解説。初期設定や生成されたファイル構成についても詳しく説明しています。
www.takatechskill.com
2024.10.08

Cognitoユーザープール作成

下記記事にユーザープールの作成方法を記載しているのでご参考ください。

AWSでCognito認証付きAPIを構築する方法
AWSのCognitoとAPI Gatewayを連携し、認証付きAPIを構築する手順を初心者向けに解説！セキュアなAPI公開を実現しよう。
www.takatechskill.com
2025.04.27

必要なライブラリのインストール

ReactでAmplifyを使うためのライブラリをインストールします。

npm install aws-amplify @aws-amplify/ui-react

configファイルの設定

Cognitoのユーザープールを参考にsrc/config/amplifyConfig.tsを作成します。

下記は.envから取り込んでいます。

import { Amplify } from "aws-amplify";
export const amplifyConfig: Parameters<typeof Amplify.configure>[0] = {
  Auth: {
    Cognito: {
      userPoolClientId: import.meta.env.VITE_USER_POOL_CLIENT_ID,
      userPoolId: import.meta.env.VITE_USER_POOL_ID,
      loginWith: {
        oauth: {
          domain: import.meta.env.VITE_DOMAIN,
          scopes: [
            "openid",
            "email",
            "phone",
            "profile",
            "aws.cognito.signin.user.admin",
          ],
          redirectSignIn: [`${import.meta.env.VITE_REDIRECT_URL}`],
          redirectSignOut: [`${import.meta.env.VITE_REDIRECT_URL}`],
          responseType: "code",
        },

      },
    },
  },
};

Amplifyの設定をReactに組み込む

src/index.tsx や src/main.tsx でAmplifyを初期化します。

// Amplify設定
import { Amplify } from "aws-amplify";
import { amplifyConfig } from "./config/amplifyConfig";

Amplify.configure(amplifyConfig);

ログイン画面の表示

Amplifyが提供するUIコンポーネント <Authenticator /> を使ってログイン画面を表示します。

// App.tsx
import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

const App = () => {
  return (
    <Authenticator>
      {({ signOut, user }) => (
        <main>
          <h1>こんにちは、{user?.username}さん！</h1>
          <button onClick={signOut}>ログアウト</button>
        </main>
      )}
    </Authenticator>
  );
}

export default App;

動作確認

以下のコマンドでアプリを起動します。

npm run dev

すると下記ログイン画面が出てきます。

Amplify Authenticatorのカスタマイズ

Amplify Authenticatorのカスタマイズ例を紹介します。

サインアップを消す

hideSignUp={true}を設定することでサインアップを消すことができます。

import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

const App = () => {
  return (
    <Authenticator hideSignUp={true} initialState="signIn">
      {({ signOut, user }) => (
        <main style={{ padding: '2rem', textAlign: 'center' }}>
          <h2>ようこそ、{user?.username} さん</h2>
          <button onClick={signOut}>ログアウト</button>
        </main>
      )}
    </Authenticator>
  );
}

export default App;

スタイルの上書き

// App.tsx

import { Authenticator, ThemeProvider, Theme } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

const customTheme: Theme = {
  name: 'high-contrast-theme',
  tokens: {
    colors: {
      background: {
        primary: { value: '#1e293b' }, // 暗めの背景（ネイビー系）
      },
      font: {
        primary: { value: '#ffffff' }, // 白文字
      },
    },
    components: {
      button: {
        primary: {
          backgroundColor: { value: '#facc15' }, // 黄色ボタン
          color: { value: '#000000' },           // 黒文字で対比
          _hover: {
            backgroundColor: { value: '#f97316' }, // オレンジに変化
          },
        },
      },
    },
  },
};

const App = () => {
  return (
      <ThemeProvider theme={customTheme}>
          <Authenticator>
            {({ signOut, user }) => (
              <div style={{ textAlign: 'center' }}>
                <h1 style={{ fontSize: '1.75rem', marginBottom: '1rem' }}>
                  ログイン成功！
                </h1>
                <p style={{ fontSize: '1.25rem' }}>
                  ようこそ、<strong>{user?.username}</strong> さん！
                </p>
                <button
                  onClick={signOut}
                >
                  ログアウト
                </button>
              </div>
            )}
          </Authenticator>
      </ThemeProvider>
  );
};

export default App;

ラベルやプレースホルダーの文言変更

import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

const App = () => {
  return (
    <Authenticator
      formFields={{
        signUp: {
          username: {
            label: 'ユーザー名',
            placeholder: 'ユーザー名を入力',
            isRequired: true,
          },
          password: {
            label: 'パスワード',
            isRequired: true,
          },
          confirm_password: {
            label: 'パスワード（確認）',
            isRequired: true,
          },
          email: {
            label: 'メールアドレス',
            isRequired: true,
          },

        },
        signIn: {
          username: {
            label: 'ユーザー名またはメールアドレス',
            placeholder: '例: user@example.com',
            isRequired: true,
          },
          password: {
            label: 'パスワード',
            placeholder: 'パスワードを入力',
            isRequired: true,
          },
        },
      }}
    >
      {({ signOut, user }) => (
        <main style={{ padding: '2rem', textAlign: 'center' }}>
          <h2>こんにちは、{user?.username} さん</h2>
          <button onClick={signOut}>ログアウト</button>
        </main>
      )}
    </Authenticator>
  );
}

export default App;

まとめ

Amplifyを使えば、面倒なバックエンドの設定なしに、数ステップで安全な認証機能を実装できます。

次のステップとしては、以下のような機能追加にチャレンジしてみましょう

  • SNSログイン（Google, Facebook など）
  • 独自UIでのログインフォーム
  • 認証後にデータ取得（APIやStorageとの連携）

参考リンク

スポンサーリンク

コメント

タイトルとURLをコピーしました