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