//tips
//smart contract
一度callbackの下にcosole.logをつけて中身を確認。
callbacks: {
async jwt({ token, account, user }) {
console.log("token"+token);
console.log("account"+account);
console.log(token);
console.log(account);
こうすると、文字+変数で表したものは中身が表示されず
token[object Object]
account[object Object]
や
token[object Object]
accountundefined
のようになった。
一方でそのまま変数を抽出すると、
Token:
{
name: 'Nakynx',
email: ',
picture: 'jpg',
sub: ''
}
Account:
{
provider: 'twitter',
type: 'oauth',
providerAccountId: '',
oauth_token: '',
oauth_token_secret: ''
}
としっかり得ることができた。
ただ不思議なことに、下記のtoken情報とundefinedのアカウント情報が返ってきている。
Token:
{
name: '',
email: ',
picture: '.jpg',
sub: '',
twitter: {
accessToken: '',
refreshToken: ''
},
iat: ,
exp: ,
jti: '1'
}
undefined
下記の_app.jsで...pagePropsをコピーしているからだろうか要確認。
export default function App({
Component,
pageProps: { session, ...pageProps },
}) {
return (
<SessionProvider session={session}>
<Component {...pageProps} />
</SessionProvider>
)
}
Next.jsはすべてのページにおいて、ページを初期化するためにAppコンポーネントを使用しており、pages/_app.jsファイルで、ページの初期化をコントロールできるよう。
標準の App を上書きするために、./pages/_app.js を作成することになる。
https://nextjs-ja-translation-docs.vercel.app/docs/advanced-features/custom-app
ここは全ページで必要な挙動を書ける場所で、ページ移動間の固定レイアウト、 <Provider>でラップするなどが可能になる。
注意すべき点はNext.jsが用意するページコンポーネントと同じ挙動を取るので、_app.jsはサーバーサイドでレンダリング（getInitialPropsの実行を含む）され、ライフサイクルのイベントはクライアントサイドでも実行されるとのこと。
このためJWT callbackはクライアントによってセッションがアクセスされた際にも実行されるので２度目が呼び出されているように思われる。
This callback is called whenever a JSON Web Token is created (i.e. at sign in) or updated (i.e whenever a session is accessed in the client). The returned value will be signed and optionally encrypted, and it is stored in a cookie.
では、なぜaccountが消滅しているのか。これはサーバ側で返すものがreturn tokenのみであるから。だからクライアントはtoken情報のみを持ち、逆にサーバ側はjwtでtokenの中に必要な情報をtokenに詰め込んだ。
もう少し、突っ込むと、
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
Component prop はアクティブな pageで、ルート間で遷移するたびに Component は新しい page に変化する。そのため、returnの後のタグとなったComponentに渡した prop は、すべて変化先のpage で受け取ることができる。
pagePropsはデータ取得メソッドの 1 つによって、プリロードされた初期 props を持つオブジェクトで、データ取得されなければ空のオブジェクトとなる。
pageProps is an object with the initial props that were preloaded for your page by one of our data fetching methods, otherwise it's an empty object.
このdata fetching methodsの中にServer-side Renderingなどがある。
それを頭に入れておくとexport async function getServerSideProps(context) のreturnはこのApp経由で大元のHome(){…}に引き継がせようとしていることがわかる。
export default function App({
Component,
pageProps: { session, ...pageProps },
}) {
return (
<SessionProvider session={session}>
<Component {...pageProps} />
</SessionProvider>
)
}
このsessionproviderタグの中身が気になったので確認。
https://next-auth.js.org/getting-started/upgrade-v4#sessionprovider
sessionproviderはnext-authのVersion 4に必須となった機能らしく、getServerSidePropsからsessionnを受け取ったSessionProvider を使わなければuseSessionを使わなければいけないと書かれている。
return (
// `session` comes from `getServerSideProps` or `getInitialProps`.
// Avoids flickering/session loading on first load.
<SessionProvider session={session} refetchInterval={5 * 60}>
<Component {...pageProps} />
</SessionProvider>
)
This means that you will have to wrap any part of your application using useSession in this provider, if you were not doing so already.
あれ、やはりusesessionは不要なのではないか。refetchInterval={5 * 60}を追加してみる。
getServerSidePropsの代替案として使われている例もあるので確認。
https://next-auth.js.org/getting-started/client#custom-client-session-handling
export async function getServerSideProps(context)部分を再度復活させて挙動を見るのは延期。
