Blockchain code Metaverse VR

Crypto×VR×SmartContract(481)

スポンサーリンク

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

 

人気の記事

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.