個人開発にNextAuthを実装してハマったこと

Transcript

1. フロントエンドエンジニア 
 
 個人開発に NextAuthを実装してハマったこと 

2. 目次 02 1.自己紹介 2.作ったアプリ紹介 3.NextAuthとは？ 4.NextAuth実装 5.実装の時にハマったこと 6.デプロイでハマったこと 7.まとめ
3. LT内容 今回は、T3Stackで個人開発した時にNextAuthの実装をしたので その実装方法とその時ハマったことをお話しします！
4. 作った背景 そういえば私こんなに毎日ストレスためながら生きてるのに 今週嫌なことあったから自分にご褒美買うんだ〜！ 自分にご褒美を買ってあげたことがなかったな 友達
5. 作った背景 いつ、どのタイミングでどのくらいの金額のご褒美を買えばいいんだろう？
6. 作った背景 ストレスが溜まったことを可視化 ご褒美 嫌なことがあっても、 少し前向きな気持ちになれるかもしれない！！ 定量化
7. 個人開発で作ったアプリ紹介 02 どんなアプリかを簡単に説明します！
8. 02 ユーザー 認証 フロント APIの呼び出し バック デプロイ ORM DB ホスティング 個人開発で作ったアプリ紹介
9. 02 今回は、NextAuthについてお話しします！ 認証 個人開発で作ったアプリ紹介
10. NextAuthとは？ 03 Next.jsに認証機能を簡単に追加するための認証ライブラリです。
11. NextAuthとは？ 03
12. 悪口を見られたら困るから！ なぜ認証がいるのか NextAuthを実装したのは
13. 04 NextAuthを実装する方法を説明します！ NextAuth実装
14. NextAuth実装 04 T3StackにはデフォルトでDiscordの認証が入っていますが 今回はGoogleで認証できるように実装しました！
15. NextAuth実装 04 1.npm create t3-app@latestで雛形作成 2.GoogleのGOOGLE_CLIENT_IDとGOOGLE_CLIENT_SECRETを作成する 3.Nextの設定ファイルの providerをGoogleに修正 4.envを設定
16. NextAuth実装 04 1.npm create t3-app@latestで雛形作成 2.GoogleのGOOGLE_CLIENT_IDとGOOGLE_CLIENT_SECRETを作成する 3.Nextの設定ファイルの providerをGoogleに修正 4.envを設定
17. NextAuth実装 04 $ npm create t3-app@latest
18. NextAuth実装 04
19. NextAuth実装 04 NextAuthに関する記載があるページ src/app/api/auth/[...nextauth]/route.ts src/server/auth.ts
20. NextAuth実装 04 src/app/api/auth/[...nextauth]/route.ts 認証機能を提供するエンドポイントを定義するファイルです！
21. NextAuth実装 04 src/server/auth.ts 認証ロジックの設定や管理を行うをするファイルです！
22. NextAuth実装 04 1.npm create t3-app@latestで雛形作成 2.GoogleのGOOGLE_CLIENT_IDとGOOGLE_CLIENT_SECRETを作成する 3.Nextの設定ファイルの providerをGoogleに修正 4.envを設定
23. GoogleのGOOGLE_CLIENT_IDとGOOGLE_CLIENT_SECRETを作成する 04 NextAuth実装
24. NextAuth実装 04 1.npm create t3-app@latestで雛形作成 2.GoogleのGOOGLE_CLIENT_IDとGOOGLE_CLIENT_SECRETを作成する 3.Nextの設定ファイルの providerをGoogleに修正 4.envを設定
25. 04 NextAuth実装 Nextの設定ファイルの providerをGoogleに修正
26. NextAuth実装 04 1.GoogleのGOOGLE_CLIENT_IDとGOOGLE_CLIENT_SECRETを作成する 2.Nextの設定ファイルの providerをGoogleに修正 3.envを設定
27. 04 3..envを設定 NextAuth実装
28. 04 npm run dev NextAuth実装
29. 04 NextAuth実装 これで実装完了です 🎉
30. 05 実装中にハマったこと 1.Googleのアクセスをブロックされてしまった 2.認証ページが開いてくれない
31. 05 実装中にハマったこと 1.Googleのアクセスをブロックされてしまった 2.認証ページが開いてくれない
32. 05 実装中にハマったこと
33. 05 で書いたら 実装中にハマったこと https:// ブロックされる！
34. 05 実装中にハマったこと 認証するよ〜 https:// http:// リダイレクト URI 承認済みのリダイレクト URI 認証情報を送り返すための URI
35. 05 実装中にハマったこと 1.Googleのアクセスをブロックされてしまった 2.認証ページが開いてくれない
36. 05 実装中にハマったこと
37. 05 実装中にハマったこと
38. 05 lsof -i :3000 kill -9 12345 or 実装中にハマったこと ポートを消すか ポートを書き換えるか
39. 06 1.デプロイしたいのにビルドが通らない 2.デプロイしたアプリが危険なサイトとして認識された デプロイするときハマったこと
40. 06 1.デプロイした時にビルドが通らない 2.デプロイしたアプリが危険なサイトとして認識された デプロイするときハマったこと
41. 06 Discodeの環境変数を Vercel入れなかったらエラーがでた デプロイするときハマったこと
42. 06 1.デプロイしたいのにビルドが通らない 2.デプロイしたアプリが危険なサイトとして認識された デプロイするときハマったこと
43. 06 デプロイするときハマったこと
44. 06 デプロイするときハマったこと
45. 06 http://localhost リダイレクト成功 承認済みのリダイレクト URI • http://localhost デプロイするときハマったこと https://everyday 安全ではないサイト https://localhost https://everyday
46. 06 http://localhost リダイレクト成功 承認済みのリダイレクト URI • http://localhost • https://everyday デプロイするときハマったこと https://everyday リダイレクト成功 https://localhost https://everyday
47. 07 まとめ ・T3StackでのNextAuthの実装方法について ・認証でハマったことについて
48. ご清聴、ありがとうございました。 THANK YOU