Open4

Amplify × Next.jsの構成で認証機能をいろいろさわる

Knob/のまど先生Knob/のまど先生

さて,Amplify第三弾
とても楽しいです.AWSやってる感がすごく気持ちいいです.(小物感

第一弾
https://zenn.dev/nbr41to/scraps/7b950e044bba84
第二弾
https://zenn.dev/nbr41to/scraps/21abe2f1394bfe

理解が浅いので,これらはアウトプット用スレッドです.
そのうち記事にする予定.

DB周りを先に理解したかったのと,認証機能がなくてもデータFetchができるのか確認したかったので,認証を後回しにしました.

Knob/のまど先生Knob/のまど先生

認証機能の準備

参考
https://docs.amplify.aws/lib/auth/getting-started/q/platform/js#option-1-use-pre-built-ui-components

まだamplify initをしていない方はこれまでの記事を参考にしておきましょう.

そしたら,

amplify add auth

pushする

amplify push

ここまででAdmin UI見ても変化がわからん.
backendでは,最初から認証機能の準備はできていたっぽい?
なので,amplify add authによってローカルに必要なファイルを追加しただけって感じ.

そんで,
必要なライブラリをinstallして

yarn add aws-amplify @aws-amplify/ui-react

使っていく.

/mypageを作成して

import React from 'react';
import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';
const MyPage = () => {
  return (
    <div>
      <h1>MyPage</h1>
      logedIn
      <AmplifySignOut />
    </div>
  );
};

export default withAuthenticator(MyPage);

としてみた.
確認したいことは,このページ(withAuthenticatorでラップしたコンポーネント)が認証必要ページになるのかということ.

Knob/のまど先生Knob/のまど先生

アカウントの作成

予想はあたっているようで,/mypageのみ認証が必要なページになったようです.
これは,Contextを使わなくて済むので,すごくいいですね.

また,こんな感じの画面を自動で表示してくれます!
ただ,これを使わないカスタムな方法も知りたい.

前に一度触ったときには,ここでアカウントを作成するには電話番号による2段階認証とメールリンクによる本人認証となかなかセキュアな初期設定だったのですが,そこら辺を自分で設定したいですね.

https://qiita.com/t_okkan/items/38aca98993bf06598af6#認証機能の追加

ここにたまたまそれっぽいことをしているコードがありました.
ふむふむ,公式のUI Componentのドキュメントを見逃していた...

https://docs.amplify.aws/ui/auth/authenticator/q/framework/react

と思って,signupConfigを使ってみると型エラーで参考も少なかったので,この公式ドキュメントのBase useから始めてみることにしました.