3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

はじめに

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を見つける
      image.png
  3. それを開き、RedirectURLの欄をコピーしておく。

設定

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

EnabledになっていればOK

image.png

フロント側

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>

実装完了!!

え、、めっちゃ簡単!!

image.png

クリック後

image.png

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

3
1
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?