magazine off

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

投稿日 : 2021年5月5日(水曜日)

前提条件

 

nextjsのプロジェクトでTypeScriptを導入

Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more.
Learn | Next.js - nextjs.org

下記の記事を参考にfirebaseでメアドログインができる状態

 

 

 

GitHubアカウントを作る

 

まず、firebaseでGitHubアカウントでログインさせるために、下記の情報が必要です。

 

 

認証コールバックURLは自動で吐き出されるので、GitHubアプリを作るときは、テキトーな名前でコールバックURLを最初入れておけば後で変更できるので、

 

上記の画像のところに、自動でコールバックURL指定があるので、ここの値をGitHUubアプリに後で更新してもいいです。

 

下記からGitHubアプリを作ってください。

 

GitHub is where people build software. More than 65 million people use GitHub to discover, fork, and contribute to over 200 million projects.
Build software better, together - 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 };

 

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

 

すると、

 

 

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

Categories

Recent Posts

httpd.confは一体どこ?

  下記のコマンドでhttpd.confの有りかを知ることができます。 $…

投稿日 : 2018年6月18日(月曜日)

1950年代から2020年代までプログラミングの歴史をザックリ紹介します!

    #プログラミング #歴史   現在、React…

投稿日 : 2021年3月3日(水曜日)

アラン・チューリングとジョン・フォン・ノイマン

 今、我々が使っているコンピューターというのは、たった一人の超人類が天才的な能力に…

投稿日 : 2017年12月3日(日曜日)

初心者さん向けにブランディングとは何かを簡潔に教えます、100%です

 https://youtu.be/qH_8_3H7R-0 (動画をやってます、…

投稿日 : 2020年11月10日(火曜日)