🔑

Supabase Github SignIn React

2024/11/01に公開

GitHub

 👤対象者React + Supabase + Github SignIn を実装してみたい人
Github SignInの設定でお困りの人

 記事の内容とん とんぼさんの記事を参考にAuth Tokenを取得する設定をしてGithubの設定をします。

https://qiita.com/KaitoMuraoka/items/94d6c227a0abb5bfcc57
公式はこちら

https://supabase.com/docs/guides/auth/social-login/auth-github?queryGroups=environment&environment=client
今回はローカルで動かすだけなので以下のように情報を入力

Client ID & Client Secretをコピーする。

SupabaseでGithub Authの設定をする。

URL & anon keyを設定する。
import { createClient } from '@supabase/supabase-js'

const supabaseUrl = 'htt*******************'
const supabaseAnonKey = 'eyJhbGciOiJI********************'

export const supabase = createClient(supabaseUrl, supabaseAnonKey)
App.tsxを編集する。これで認証のデモアプリができました。
App.tsx
import './App.css';
import { supabase } from "./client";

function App() {
  async function signInWithGithub() {
    try {
      const { data, error } = await supabase.auth.signInWithOAuth({
        provider: 'github',
        options: {
          scopes: 'read:user user:email'
        }
      });

      if (error) {
        console.error('認証エラー:', error.message);
        alert(`認証エラー: ${error.message}`);
        return;
      }

      if (data) {
        console.log('認証成功:', data);
      }
    } catch (error) {
      console.error('予期せぬエラー:', error);
      alert('予期せぬエラーが発生しました');
    }
  }

  return (
      <div className="App">
        <button
            onClick={signInWithGithub}
            className="btn"
            style={{
              padding: '10px 20px',
              backgroundColor: '#24292e',
              color: 'white',
              border: 'none',
              borderRadius: '6px',
              cursor: 'pointer',
              display: 'flex',
              alignItems: 'center',
              gap: '8px'
            }}
        >
          <svg height="20" width="20" viewBox="0 0 16 16" fill="white">
            <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
          </svg>
          GitHubでサインイン
        </button>
      </div>
  );
}

export default App;
できました🙌


 感想今回は、SupabaseでGithub SignInの機能の実装をやってみました。参考にした昔の方法動画だとコードが古いのでメソッドが変わっていたので詰まりました😅

公式と技術ブログを見つつAIも使ってみた。

👤対象者

記事の内容

感想

Discussion