Reactでfirebaseを使ってGitHubログインをする方法
前提条件
nextjsのプロジェクトでTypeScriptを導入
下記の記事を参考にfirebaseでメアドログインができる状態
GitHubアカウントを作る
まず、firebaseでGitHubアカウントでログインさせるために、下記の情報が必要です。
認証コールバックURLは自動で吐き出されるので、GitHubアプリを作るときは、テキトーな名前でコールバックURLを最初入れておけば後で変更できるので、
上記の画像のところに、自動でコールバックURL指定があるので、ここの値をGitHUubアプリに後で更新してもいいです。
下記からGitHubアプリを作ってください。
GitHubアカウントでログインさせる
ここら辺のライブラリを使って
import 'firebase/auth'
import 'firebase/firestore'
ユーザーがボタンを押したらcreateUser関数を実行させます。
const createUser = async (e) => {
e.preventDefault()
try {
const provider = new firebase.auth.GithubAuthProvider();
await auth.signInWithPopup(provider).catch(alert);
router.push('/login')
} catch (err) {
alert(err.message)
}
}
await auth の部分は、
const config = {
apiKey: process.env.API_KEY,
authDomain: process.env.AUTH_DOMAIN,
projectId: process.env.PROJECT_ID,
storageBucket: process.env.STORAGE_BUCKET,
messagingSenderId: process.env.MESSAGINGSENDER_ID,
appId: process.env.APP_ID,
measurementId: process.env.MEASUREMENT_ID,
}
// initializeを複数回走らせない
if (firebase.apps.length === 0) {
firebase.initializeApp(config)
}
const auth = firebase.auth();
export {auth };
こんな感じで定義したやつです。
すると、
こんな感じで、出てきましたね！
りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています！