Next auth筆記

next.js

是阿~

先設定Next.js project（不確定是不是必要的，但是開頭都next所以應該是？

教學影片：

Next JS Authentication - Sign In With Google (NextAu...

官方文件：

NextAuth.js

安裝： yarn add next-auth
npm install next-auth

（是說其實我還是用npm比較多，npm跟yarn感覺就是不同的mod manager的感覺？但是不知道差別在哪裡，有一個yarn比較潮的感覺。

（比較重要的是不知道能不能混用ˊ ˋ。回答不出能或不能，因為我也不知道npm/yarn實際上做了什麼，只知道他會神奇地幫我把東西裝好

1. Create nextauth.js route

在(root)/pages/api/auth/做[...nextauth].js

以下略紀內容
import NextAuth, GoogleProvider
export NextAuth >> providers:[GoogleProvider]

2. Config Console (以Google為例)

到google console去設立一個app

設立app時的連結們：
- 來源連結（Authorized JS origins）："h t t p ://localhost:3000" 因為是本地project
- 轉向連結（Authorized redirection url）："h t t p : / /localhost:3000/api/auth/callback/google"
(應該是參考第一步設置的route，在該頁面下的api/auth呼叫裡面的google之類的

拿到id跟secret後，在root新增.env檔，把他們作為環境變數儲存

還要做json web token，需要一個32碼的亂數
可以用 openssl rand -base64 32在console生成
或是 Generate Key生成

因為設定了新env, 所以如果已經有server要重新啟動

3. 把Session Provider包到Component外面

本來app會return <Component>，把return 的東西外面加上一層<SessionProvider>

上面也要記得import Session Provider

在NextAuth(第一部設立的routing檔)下面，provider下面再新增一個secret，抓剛剛在.env裡面設定的jwt(json web token)

.env變數的抓法：process.env.(變數名)

4. 製作登入頁面

終於基本的授權設定好了！
今天先休息！ 明天從

Next JS Authentication - Sign In With Google (NextAu...

開始

⋯⋯我要如何不要讓youtube跳出預覽