//tips
//smart contract
jsxでconst { data: session } = useSession()のsessionがtrueかどうかでreturn部分の内容を分岐させる方法を考える。
const { data: session } = useSession()をreturn前に記述。return後を下記のように記述した。
<div>
{(() => {
if (session) {
return(
<>
Signed in as {session.user.email} <br />
<button onClick={() => signOut()}>Sign out</button>
</>
)
} else {
return(
<>
Not signed in <br />
<button onClick={() => signIn()}>Sign in</button>
</>
)
}
})()}
</div>
こちらにてgithub連動は無事に対応させることができた。
参考：
https://www.yoheim.net/blog.php?q=20180409
twitterのauthを利用したapi連動を行う。
先に作成した認証のみのプロジェクトをtwitter仕様に変更。
import NextAuth from "next-auth"
import Providers from "next-auth/providers"
export default NextAuth({
// Configure one or more authentication providers
providers: [
Providers.Twitter({
clientId: process.env.Twitter_CONSUMER_KEY,
clientSecret: process.env.Twitter_CONSUMER_SECRET,
}),
// ...add more providers here
],
})
これらのkeyはtwitter開発ポータルでcreate new appして設定していく。
今回はOauth1.0の設定で行った。プライバシーポリシーページなども必要なのでgithub pageで作成したものを活用。
Callback urlにこちらを適用。
http://localhost:3000/api/auth/callback/twitter
これらのものは本番環境にアップするときには置き換える。
import NextAuth from "next-auth"
//import Providers from "next-auth/providers"
import TwitterProvider from "next-auth/providers/twitter";
export default NextAuth({
// Configure one or more authentication providers
providers: [
//Providers.Twitter({
TwitterProvider({
clientId: process.env.Twitter_CONSUMER_KEY,
clientSecret: process.env.Twitter_CONSUMER_SECRET,
}),
// ...add more providers here
],
})
Twitterのprovider認証でエラーが出たので問題箇所を修正。こちらでなんとか突破できた。
さらに検証のnetworkからpreviewを見るとsessionで保存している内容を確認することができる。
さらにapiの仕様のところまで進んでいく。
