【Gatsby ＋ Netlify】ユーザー向けログイン機能実装

netlify-identity-widgetを使用するためにGatsbyプラグインを使用します。
＊外部JSを読み込む方法ではGatsbyを使用している場合、うまく作動しません。

プラグインのインストール

yarnの使用

yarn add gatsby-plugin-netlify-identity-widget

npmの使用

npm install --save gatsby-plugin-netlify-identity-widget

gatsby-config.jsにプラグインを追加

// In your gatsby-config.js
plugins: [
	'gatsby-plugin-netlify-identity-widget',
]

ページコンテンツ部分に以下のコード追加

SignUp Login⇄ログイン情報

 <div data-netlify-identity-menu></div>

Login⇄Logout

 <div data-netlify-identity-button></div>

参考サイト：
https://github.com/netlify/netlify-identity-widget
https://www.gatsbyjs.com/plugins/gatsby-plugin-netlify-identity-widget/