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

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

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.