React入門者へおすすめ動画&書籍おすすめ!

フロントエンド入門者へおすすめ動画&書籍おすすめ!

firebase React

Reactでfirebaseを使ってGitHubログインをする方法

0
0

前提条件

 

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 };

 

こんな感じで定義したやつです。

 

すると、

 

 

こんな感じで、出てきましたね!

Pocket
LinkedIn にシェア

React入門者へおすすめ動画&書籍おすすめ!

フロントエンド入門者へおすすめ動画&書籍おすすめ!

  • この記事を書いた人
  • 最新記事

藤沢瞭介(Ryosuke Hujisawa)

りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

-firebase, React

Copyright© off.tokyo , 2021 All Rights Reserved Powered by AFFINGER5.