//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
