Next.jsとSupabaseで認証システムを構築していきます。
ログイン、サインアップ、ログアウト、パスワードリセット、メールアドレスの変更、パスワードの変更、そしてプロフィール編集といった認証機能を実装します。
これらの機能が構築できれば、本格的なアプリケーション開発に集中することができます。
再利用しやすいように、認証機能に特化したプロジェクトとなっています。
Supabaseを使用した認証機能の構築に興味がある方は、ぜひ参考にしてください。
■解説記事
https://zenn.dev/hathle/books/next-supabase-auth-book
■LINEお友達登録
個別にメッセージできます。
講座のソースコードも用意しています。
https://lin.ee/NKoTJnV
■目次
00:00 Intro
00:43 Supabaseアカウント
01:21 SQL Editor
02:52 Next.js準備
03:43 App Router
04:38 専用画面
05:19 Supabase連携
07:09 ログイン状態監視
11:45 ログイン
17:04 サインアップ
24:14 状態管理
28:54 プロフィール
36:03 メールアドレス変更
41:20 パスワード変更
45:28 ログアウト
48:37 パスワードリセット
53:30 完成
■学習内容
・Supabaseを使用した認証機能の構築方法
・プロフィール画像のアップロード方法
・プロフィール作成方法
■機能
・ログイン
・サインアップ
・ログアウト
・パスワードリセット
・メールアドレス変更
・パスワード変更
・プロフィール編集
・プロフィール画像
■フルスタックチャンネルQ&Aサイト
https://www.fullstackchannel.com/
■自己紹介
プログラミング講師のはるです。
大学では数学とプログラミングを専攻し、8年間車載開発に携わりました。
英語は得意ではありませんでしたが、国際カンファレンスに出席することがきっかけで英語を学び、30歳の新たな挑戦として海外に行くことを決意しました。
映画好きだったこともあり、カナダのバンクーバーでVFXを学び、モントリオールでハリウッド映画の製作に携わり、現在は、東京を拠点にして、独立しています。
最近は、NextJS + Supabse + AIのプロダクトを開発しています。
お仕事など気軽にご連絡ください。
よろしくお願いいたします。
■SNS
Twitter : https://twitter.com/hathle
Website : https://harusoft.net/
Zenn : https://zenn.dev/hathle
■タグ
#python
#django
#react
#nextjs
#supabase
#フルスタック
#エンジニア
#プログラミング
Comments