Blockchain code Metaverse VR

Crypto×VR×SmartContract(483)

スポンサーリンク

//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はクライアントによってセッションがアクセスされた際にも実行されるので2度目が呼び出されているように思われる。

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)部分を再度復活させて挙動を見るのは延期。

人気の記事

1

皆さん、ついに、エアラインでも、サブスクリプションが始まったのはご存じですか? まだ実験段階ですが、ANAが、定額全国住み放題サービスを提供する「ADDress」と組んで、国内線を4回まで定額利用可能 ...

2

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

3

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

4

ついに、noteの月間アクティブユーザー数が4400万人(2020年3月時点)に到達しました。 そもそも、「note」とは、クリエイターが、文章やマンガ、写真、音声を投稿することができ、ユーザーはその ...

5

ボードゲームカフェが1日2回転で儲かるという記事をみつけたので興味を持ち、調べてみました。 まずは、需要がどれくらいあるのか、市場のようすからみていきましょう。 世界最大のボードゲーム市場はドイツで、 ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HUNTER , 2023 All Rights Reserved Powered by AFFINGER5.