【備忘録】SupabaseAuthのGitHub認証を使ってGitHubのアクセストークンを取得する

はじめに

supabaseAuth で GitHub認証 を実装して
GitHub REST API で使える アクセストークン を 取得 する備忘録です。

下準備 - Supabase側

Supabase の Dashboard にある New project を クリック します。

適当な Name と Database Password を入力して Create new project を クリック します。

サイドバー の Authentication を クリック します。

Providers を クリック します。

GitHub を クリック して Callback URL を コピー します。

下準備 - GitHub側

GitHub OAuth application を登録します。

登録の 詳細 は以下の通りです。

Authorization callback URL は 下準備 - GitHub側 で コピー したものを使います。

Supabase 側に戻って GitHub 側で発行された Client ID と Client secrets を設定します。

Next.js で GitHub認証 を実装する

npm install @supabase/supabase-js

Supabase の JSクライアント を インストール します。

Home にある Project URL と API Key を コピー しておきます。

app/page.tsx

"use client";

import { createClient } from "@supabase/supabase-js";

const projectUrl = "https://ofloliwizljkltliktus.supabase.co";
const apikey = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im9mbG9saXdpemxqa2x0bGlrdHVzIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MTIyMzg1MDYsImV4cCI6MjAyNzgxNDUwNn0.V30UwX79wkyfWYaEF6hkdOneh38czL6c5n5UXBm9IlM";
const supabase = createClient(projectUrl, apikey);

supabase.auth.onAuthStateChange((event, session) => {
  if (session && session.provider_token) {
    window.localStorage.setItem('oauth_provider_token', session.provider_token)
  }

  if (session && session.provider_refresh_token) {
    window.localStorage.setItem('oauth_provider_refresh_token', session.provider_refresh_token)
  }

  if (event === 'SIGNED_OUT') {
    window.localStorage.removeItem('oauth_provider_token')
    window.localStorage.removeItem('oauth_provider_refresh_token')
  }
})

export default function Home() {
  const signInGitHub = async () => {
    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: 'github'
    })
  }

  return (
    <button onClick={signInGitHub}>ユーザ作成ボタン</button>
  );
}

大事 なのは
・projectUrl ・ apiKey
・supabase.auth.onAuthStateChange
・signInGitHub
の 3つ です。

projectUrl と apiKey は Home で コピー したものを使います。

supabase.auth.onAuthStateChange は 認証イベント が 発生 した時に 発火 します。

今回は GitHub REST API で使う アクセストークン を ローカルストレージ に 保存 しています。

signInGitHub は GitHub認証 を使った ユーザ登録 を行っています。

認証 を終えた後にブラウザの ローカルストレージ を見ると oauth_provider_token が 保存
されており、これが GitHub REST API で使う アクセストークン になっています。