認証・メール送信を伴うフォーム実装を学びました！
Posted date at 2024-06-08以前の記事📒で、一度紹介した、RHF(ReactHookForm）とZodについて、ShinCodeさんのUdemy講座で学びました。今回はSupabaseによる認証や添付ファイル付のメール送信も学びました。
ペーパーレスにおいては、入力フォームの実装は必須です。身近な実例として、私が当社入社後約１年で開発したものから抜粋して掲載します。
🚀受講した講座
【フォーム開発実践】認証やお問い合わせフォームをNext.js/RHF/zod等のモダン技術を使って開発する実践講座
講師 ShinCode さん
動画再生4.0時間 林がかけた時間13時間
🚀製作したアプリ①お問合せフォーム
ホームページのお問合せフォームを実装しました。RHFとZodでバリデーションを実装しています。今回新たにファイル形式とサイズ上限の設定方法やメール送信方法を学びました。
製作したアプリではZodを使用しファイル形式をPDFと画像のみとし、サイズを5MBまでとしています。メール送信にはResend📒というライブラリを使用しています。他にもメール送信で有名なライブラリとしてはSendGrid📒があります。両サービスとも重量課金制ですが、無料枠があります。
また送信完了時の表示はトースター📒を使用しています。
メール送信に関する意点として、今回はフロントエンドで送信処理を実装していますが、APIキーの漏洩リスクと、負荷の観点から、バックエンドで使用することが推奨されています。
🐡製作したアプリ
〇入力例
〇エラー表示
〇受信メール
🚀製作したアプリ②認証フォーム
アプリケーションへの新規ユーザ登録とログインフォームをRHFとZodを使用して実装しました。認証はSupabase📒を使用しています。
SupabaseはFireabaseと同じBaaSです。おおむね同じことが実現できます。大きく異なる点はデータベースで、FirebaseはJSON形式のNoSQLなのに対し、SupabaseはPostgreSQLである点です。なお、私が開発した制服アプリ📒ではFirebaseでメールアドレスとパスワード認証をしています。
🐡製作したアプリ
〇新規登録-エラー表示
〇新規登録-確認画面
〇新規登録-確認メール
〇新規登録-リダイレクト（ログイン成功）
🚀実務で開発した入力フォーム
林が開発したフォームを抜粋して掲載します。アプリが気になる方は、私のポートフォリオサイトを参照ください。
