Amplify × Next.jsの構成で認証機能をいろいろさわる
さて,Amplify第三弾
とても楽しいです.AWSやってる感がすごく気持ちいいです.(小物感
第一弾
第二弾理解が浅いので,これらはアウトプット用スレッドです.
そのうち記事にする予定.
DB周りを先に理解したかったのと,認証機能がなくてもデータFetchができるのか確認したかったので,認証を後回しにしました.
認証機能の準備
参考
まだ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
でラップしたコンポーネント)が認証必要ページになるのかということ.
アカウントの作成
予想はあたっているようで,/mypage
のみ認証が必要なページになったようです.
これは,Contextを使わなくて済むので,すごくいいですね.
また,こんな感じの画面を自動で表示してくれます!
ただ,これを使わないカスタムな方法も知りたい.
前に一度触ったときには,ここでアカウントを作成するには電話番号による2段階認証とメールリンクによる本人認証となかなかセキュアな初期設定だったのですが,そこら辺を自分で設定したいですね.
ここにたまたまそれっぽいことをしているコードがありました.
ふむふむ,公式のUI Componentのドキュメントを見逃していた...
と思って,signupConfig
を使ってみると型エラーで参考も少なかったので,この公式ドキュメントのBase useから始めてみることにしました.
Basic usage
レコメンドもある.TypeScriptの例は嬉しい.
いろいろためそう.
そして,これらと肩を並べるNext.jsは何者!?