aws-amplifyを使うと、１５分程度でログイン認証機能を作成することができます。
React.jsのプロジェクトが作成済みの段階から開始します。
amplify initこのコマンドでamplifyのプロジェクトを開始します。
次に以下のコマンドを打ちます。
amplify add authこれで質問に答えていけば、認証機能を作成する準備ができました。
では、以下のモジュールをインストールした上で、srcフォルダのApp.jsを以下のように書き換えてください。
npm install aws-amplify
npm install @aws-amplify/ui-react//App.js
import React from 'react';
import './App.css';
import Amplify, { Auth } from 'aws-amplify';
import awsconfig from './aws-exports';
import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';
Amplify.configure(awsconfig);
function App() {
return (
<div className="App">
ようこそ！
<AmplifySignOut />
</div>
);
}
export default withAuthenticator(App);するとサーバーが3000番ポートで立ち上がり、無事認証画面が立ち上がりました。