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

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

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

4

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

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HACKER , 2022 All Rights Reserved Powered by AFFINGER5.