Blockchain code Metaverse VR

Crypto×VR×SmartContract(482)

スポンサーリンク

//tips

//smart contract

先に作ったsession保管できているものを見返してみると_api.jsでSessionProviderを使用していることがわかった。

import { SessionProvider } from "next-auth/react"
import '../styles/globals.css'

export default function App({
Component,
pageProps: { session, ...pageProps },
}) {
return (
<SessionProvider session={session}>
<Component {...pageProps} />
</SessionProvider>
)
}

Sessionの取得仕方の問題かもしれない。

上記方法を用いるとhttp://localhost:3000/api/auth/sessionできちんとsessionの中身が表示される。

また、twitterボタンがレガシーと表示されるので、レガシー版で取得する必要があるのかもしれない。

const { data: session } = useSession()の使用をやめて{session}をHomeで引数に取らせるとサインインができない。

import { useSession, signIn, signOut , getSession} from "next-auth/react"
import { useState } from 'react';

export default function Home({ session }) {
//const { data: session } = useSession()
const [statuses, setStatuses] = useState();

if (session) {
return (
<>
Signed in as {session.user.email} <br />
<button onClick={() => signOut()}>Sign out</button>
</>
)
}
return (
<>
Not signed in <br />
<button onClick={() => signIn()}>Sign in</button>
</>
)
}

export async function getServerSideProps(context) {
const session = await getSession(context);
return {
props: {
session
}
}
}

別途こちらのエラーが発生。

next-auth][error][CLIENT_FETCH_ERROR]
https://next-auth.js.org/errors#client_fetch_error Failed to fetch

エラーの要因を調べていくと下記のような説明がドキュメントにあった。

CLIENT_SESSION_ERROR
This error occurs when the SessionProvider Context has a problem fetching session data.

CLIENT_FETCH_ERROR
If you see CLIENT_FETCH_ERROR make sure you have configured the NEXTAUTH_URL environment variable.

https://github.com/nextauthjs/next-auth/issues/497

API routes and Server Side Rendered functions (e.g. getServerSideProps and getInitialProps) need to know the site URL as they make a request back to the server - passing though the session token in the request object - to determine if a user is signed in.

NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SITE = "http://localhost:3000"
VERCEL_URL="http://localhost:3000”//vercel環境下のみ

const { data: session } = useSession()を使うと問題ないく動作するが、export async function getServerSideProps(context)を用いるとうまく動作しない。

一旦このまま使わずにnpm install twitter-liteからtwitter機能を利用できるか確かめる。

Package path ./client is not exported from package

v4にアップグレードしたことにより/‘clientはなくなり、next-auth/react’で記述する必要が出ている。

バージョン変更の線を辿っていくと、getServerSideProps / getInitialPropsの扱いでも一部記述を見つけたので、これらを使用する形にするには変更を考える。

https://next-auth.js.org/getting-started/client#custom-client-session-handling

ひとまず、動作を確認し、このアプリからtwitterへの投稿が完了さらに検索もできた。これは感激。

中身の解読を続ける。Req,resについていまいちわかっていないので、調べていく。

例えば、search.jsのreq,resは/searchというapiのルートであることから設定できるもので、index.jsからdataに入っている文字列をそのままsearch urlにPOSTでデータ送付されていることがわかる。

await fetch(url, {
method: "POST",
body: data
});

この内容がreqとして受け取られる。さらにapi側の/searchではconst body = JSON.parse(req.body);をし、その中からconst { query } = body;とすることでインプットフォームに入力する値を取得している。

では、export async function getServerSideProps(context)のcontextはどこから取得されるのかというと、下記によると状況によるようで、

params: If this page uses a dynamic route, params contains the route parameters. If the page name is [id].js , then params will look like { id: ... }.

req: The HTTP IncomingMessage object.

この辺りを適用させる必要があるのかもしれない。signinする前と後でcontextの結果はsessionを参照するために変更していてほしいのだが、このあたりをどう調整するか。Next.jsでページロード前に必要なデータをfetchして表示するために使っており、この場合はsessionがブラウザに保持されていれば、ログイン後の内容を表示させることを意図している。

この引数の受け取り対象というのがぼんやりしている。

https://nextjs.org/docs/api-reference/data-fetching/get-server-side-props

下記を見ていると少しわかることがあって、リクエスト時にdata fetchを行う必要があるのだが、export async function getServerSidePropsの中でfetchするurlの末端まで書かなくても、contextで末端までのurlを取得できているので、contextを分割代入して使いたい変数まで狭めていくことで、[id].jsのような動的ルーティングの遷移先にて取得されるURLを入れるものがcontextなのかもしれない。あとは別途reqやresをいじってクッキーを設定できることからhttpのgetの中身のようなものと考えておけば良さそう。

そうするとindex.jsで getServerSideProps(context)を使うのはurlの取得にはおかしく、sessionなどの保存されているものを取得するという点では正しいのかもしれない。

こちらが一番答えに近そう。情報は古いものだが。

https://stackoverflow.com/questions/68941527/nextjs-next-auth-getsession-in-getserversideprops-with-https-not-work

getsession周りも調べておく。

https://next-auth.js.org/tutorials/securing-pages-and-api-routes

見ているとconst { data: session } = useSession()も一緒に使うのが正しいのではないかと気づき始めた。

The useSession() React Hook in the NextAuth.js client is the easiest way to check if someone is signed in.

Make sure that <SessionProvider> is added to pages/_app.js.

https://next-auth.js.org/getting-started/client#usesession

人気の記事

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.