//tips
//smart contract
Signinにて遷移を行う流れは理解できた。
作成したアプリを動かしてみると、ターミナル部分にsessionの中身が空で吐き出されているのがわかった。同時に 'accessToken' of undefinedのエラーも出ている。
session {
user: { name: null, email: null, image: null },
expires: '2022-03-21T04:33:01.569Z'
}
TypeError: Cannot read property 'accessToken' of undefined
Callbackの中身のtoken[account.provider]まわりを見直す必要があるのかもしれない。確かに[...nextauth].jsで受け取っているdataの中身がどのようになっているのかよくわからない。
また、下記のcontextには
req：HTTPリクエストオブジェクト
res：HTTPレスポンスオブジェクト
query：クエリパラメータ
が入っているとのこと。ここでgetSessionでうまくsessionが生成できていない可能性がある。
export async function getServerSideProps(context) {
const session = await getSession(context);
return {
props: {
session
}
}
}
getSession() は/api/auth/sessionを呼び、a promise with a session objectまたはnullを返し、サーバー側で実行される際には{req}またはcontextをとるよう。この部分は問題なさそうなのでやはり渡す大元の方をチェックする必要がありそう。
NextAuth.js provides a getSession() method which can be called client or server side to return a session.
It calls /api/auth/session and returns a promise with a session object, or null if no session exists.
import { getSession } from "next-auth/react"
export default async (req, res) => {
const session = await getSession({ req })
/* ... */
res.end()
}
When calling getSession() server side, you need to pass {req} or context object.
https://next-auth.js.org/getting-started/client#getsession
下記のページを見ていると_app.jsの方に問題があるのかもしれないと思い確認。
https://next-auth.js.org/tutorials/securing-pages-and-api-routes
import { Provider } from 'next-auth/client';
import '../styles/globals.css'
function MyApp({ Component, pageProps }) {
return (
<Provider session={pageProps.session}>
<Component {...pageProps} />
</Provider>
);
}
export default MyApp
こちらで問題なさそう。
まずは認証後にjwtが実行されているかを確認する。
indexのsigninボタンを押すとhttp://localhost:3000/api/auth/signin?callbackUrl=へ遷移してtwitterボタンを再度押し、ユーザー認証される。そこではtwitterでユーザのtwitterアカウントは正確に確認されていた。console.logの結果を確認。
async jwt({ token, user, account={}, profile, isNewUser }) {
console.log("1");
//https://next-auth.js.org/configuration/callbacks
//do something with the token
if(account.provider && !token[account.provider]){
token[account.provider]={};
}
if(account.accessToken){
token[account.provider].accessToken=account.accessToken;
}
if(account.refreshToken){
token[account.provider].refreshToken=account.refreshToken;
}
console.log(token);
console.log("hi,there");
return token
}
結果としては、jwtは呼ばれており、tokenはundefined、
1
undefined
hi,there
となっており、そもそも取得できていない、取得内容がうまく処理できていない、引き渡せていないなどの可能性があることがわかる。
さらに、
console.log(account);
console.log(account.provider);
console.log(account.access_token);
を加えて確認。
{}
undefined
undefined
となっており、これはtwitterから情報が取れていないことを表している。
https://next-auth.js.org/providers/twitter
nextauthのtwitterドキュメントページを確認。access_tokenとrefresh_tokenは今使えないとのこと。代わりにoauth_tokenとoauth_token_secretを使えるとのことなのでこちらを盛り込んでみる。
Twitter is currently the only built-in provider using the OAuth 1.0 spec. This means that you won't receive an access_token or refresh_token, but an oauth_token and oauth_token_secret respectively. Remember to add these to your database schema, in case if you are using an Adapter.
Try signing in with a different account.というエラーが出て進めなくなったので、console.log(oauth_token)などは使ってはいけないよう。oauth_callback_handler_errorが出ている。
確かtwitter認証後にmailは取れていたかと思うのでその際のやり方を再度確認。
Callbacks部分をコメントアウトするときちんとメールアドレス部分の表示はできた。
console.log(account);が{}になってしまうが、
// if (account) {
// token[account.provider] = {
// accessToken: account.oauth_token,
// refreshToken: account.oauth_token_secret,
// }
// }
のような処理も確認できた。
https://dev.to/nilanth/twitter-followers-tracker-using-nextjs-nextauth-and-tailwindcss-1em7
`account.access_token` & `account.refresh_token` is `undefined` when using Twitter Provider with `next-auth`? from nextjs
api/auth/signin?error=Callback
Try signing in with a different account.のエラーが出てくる。
再度twitterのdeveloperポータルでのapi用のアプリ作成を見直すか。
Could not find files for / in .next/build-manifest.jsonのエラーに対してはnext.jsの問題のよう。
https://github.com/vercel/next.js/issues/16926
他参考：
https://qiita.com/syu_ikeda/items/9f3c2f041a1031651c61
https://www.sukerou.com/2022/02/nextjs-getserversideprops.html
//Githubへの新規アップロードと追加アップロードの流れをメモ
・新規
git init
git add README.md or git add .
git commit -m "first commit"
git branch -M main //必要であれば
git remote add origin gitのurl
git push -u origin main
・追加
git remote add origin gitのurl
git branch -M main //必要であれば
git push -u origin main
