AWS Amplifyを触ってみる。withAuthenticator編


目次

    インフラ力を高めつつ、スケールしやすい構成を自分で作れるようになりたいと思ったので、AWSのAmplifyの勉強始めました。今回は環境構築から一番簡単そうなwithAuthenticatorについて。

    プロジェクトの設定

    1. お好みのプロジェクトを作ります。最近はReact周回遅れ気味だったので、Reactで

    npx create-react-app --template typescript

    1. Amplify周りで利用するものをインストール

    yarn add aws-amplify aws-amplify-react

    typeファイルは含まれてるので @types/hoge は大丈夫です

    AWS周りの設定

    1. npm install -g @aws-amplify/cli でamplify cliを使えるようにする
    2. amplify configure で アプリに使うAWS IAMの設定を行う。

    コマンドを叩くとAWSの管理画面に遷移するので、リージョンや、ユーザー名を選択・入力し、accessKeyID, secretAccessKeyをターミナルにコピペする。

    An image from Notion

    3. amplify add auth する

    コマンドを叩くとaws cloud formationからCognitoが用意される。

    いろいろ聞かれるのでユーザー名で簡単に認証するようにしてみる

    Do you want to use the default authentication and security configuration? Default configuration
    How do you want users to be able to sign in? Username
    Do you want to configure advanced settings? No, I am done.

    cognitoのリソースがローカルで作られるので amplify push とすると、AWS側のCognitoユーザープールに先ほど作った設定が反映されます

    An image from Notion

    アプリに組み込んでみる

    1. src/index.tsx にAmplifyの設定ファイルを読み込む
    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import * as serviceWorker from './serviceWorker';
    
    // NOTE 追加
    import Amplify from 'aws-amplify'
    import config from './aws-exports'
    
    // NOTE 追加
    Amplify.configure(config);
    
    ReactDOM.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
      document.getElementById('root')
    );
    
    // If you want your app to work offline and load faster, you can change
    // unregister() to register() below. Note this comes with some pitfalls.
    // Learn more about service workers: https://bit.ly/CRA-PWA
    serviceWorker.unregister();

    src/App.tsx にログイン機能を追加する

    import React from 'react';
    // NOTE 追加
    import {withAuthenticator} from 'aws-amplify-react';
    
    function App() {
      return (
        <div className="App" />
      );
    }
    
    // NOTE 追加
    export default withAuthenticator(App);

    この状態でアプリを立ち上げるとログイン画面が表示される。

    An image from Notion

    withAuthenticator を使うことで、aws-amplifyが提供しているUIが表示される。

    既にユーザーがある場合はこんな感じで簡単にできる。

    が、新規登録などが必要な場合こんな感じのフローを作る必要がある。(ざっくりですが。)

    公式ドキュメントはこちら

    An image from Notion

    続きは別の記事で

    Buy Me A Coffee

    Profile

    shotaCoffee

    shotaCoffee

    Frontend Engineer

    フロントエンド周りを中心にWebアプリの開発、PdMなどしています。

    • Twitter
    • GitHub