Supabase GitHubでログイン - Oauth認証

はじめに

supabaseを用いてシステムを開発している中で、サインインのプロバイダーとしてGithubを選べることを発見。
Oauth認証を実装したのでその時のメモ。

使ったもの

• Vite + SvelteKit + Typescript
  • @supabase/supabase-js
  • Flowbite-svelte
  • tailwind css
  • Svelte Icons
• supabase
  • auth
  • db
  • storage

※前提として、supabaseのプロジェクトが存在していること。

前準備

1. supabaseのプロジェクトページに入る
2. Authのページに入り、Providersから、GitHubを見つける
   　
3. それを開き、RedirectURLの欄をコピーしておく。

設定

1. GitHubにログインする
2. 右上の自分のアイコン > settingsで設定画面を開く
3. サイドメニューの一番下、Developers settingを開く
   
4. Oauth Appsを選択
   
5. NewOauthAppより、新規作成画面に入る。
6. 以下を入力し、作成する。
   　Application name: 好き名前を登録(自分はSupabaseとしました)
   　Homepage URL: 搭載予定のURLを登録
   　Application description: そのアプリの説明を記入(任意)
   　Authorization callback URL: 前準備でコピーした値を入力
7. 作成されたら、ClientIDとClient secretsをコピーする
   　※ Client secretsはGenerate a new client secretから作成すること。
8. コピーしたClientIDとClient secretsをSupabaseのprovidersに登録し、saveする。
   

EnabledになっていればOK

フロント側

UIコンポーネントにはFlowbite-svelteを利用しました。
導入方法は前の記事で公開しています。

const GitHubSignIn = async () => {
  await supabase.auth.signInWithOAuth({
    provider: 'github',
  })
}

2023/12/17追記
アイコンにはSvelte-iconsを使用しています。
https://svelte-icons.vercel.app/

<Button color="light" class="w-full mt-5 btn btn-filled-surface" on:click={GitHubSignIn}>
  <span class="h-5 mr-3">
    <FaGithub />
  </span>
  GitHubでログイン
</Button>

実装完了！！

え、、めっちゃ簡単！！

クリック後

Authorize ---のボタンをクリックしたらサインインが完了しました！