メインコンテンツまでスキップ

Twitterでログイン

プロジェクトでTwitter認証を有効にするには、Twitter OAuthアプリケーションを設定し、Supabaseダッシュボードでそのアプリケーションの認証情報を追加する必要があります。

概要​

アプリケーションにTwitterログインを設定するための手順は、3つのパートで構成されています。

手順​

Twitter Developerアカウントにアクセスします​

  • developer.twitter.comにアクセスします。
  • 右上のSign inをクリックしてログインします。

Twitter Developer Portal.

コールバックURLを探す​

次のステップでは、次のようなコールバックURLが必要です。

https://<project-ref>.supabase.co/auth/v1/callback

  • Supabaseプロジェクトのダッシュボードにアクセスします。
  • 左サイドバーの下部にあるSettingsアイコンをクリックします。
  • リストの中のAPIをクリックします。
  • ConfigのURLの下にAPI URLがあるので、Copyをクリックしてクリップボードにコピーします。
  • 末尾に/auth/v1/callbackを追加することで、完全なOAuth Redirect URIを取得できます。

Twitter OAuthアプリを作成​

  • + Create Projectをクリックします。
    • プロジェクト名（Project name）を入力し、Nextをクリックします。
    • 利用目的（Use case）を選択し、Nextをクリックします。
    • プロジェクトの説明（Project Description）を入力し、Nextをクリックします。
    • アプリの名前（App name）を入力し、Completeをクリックします。
    • API Key（これはclient_idになります）をコピーして保存します。
    • API Secret Key（これはclient_secretになります）をコピーして保存します。
  • 下部のSetup your Appでenable 3rd party authenticationのリンクをクリックします。
  • 下部のAuthentication settingsの隣にあるEditをクリックします。
  • Enable 3-legged OAuthをONにします。
  • Request email address from usersをオンにします。
  • Callback URLsにコールバックURLを入力します。
  • Website URLにWebサイトのURLを入力します。
  • Terms of serviceに利用規約のURLを入力します。
  • Privacy policyにプライバシーポリシーのURLを入力します。
  • Saveをクリックします。

SupabaseのプロジェクトにTwitterの認証情報を入力​

  • Supabaseプロジェクトのダッシュボードに移動します。
  • 左側のサイドバーで、Authenticationアイコンをクリックします（上部付近）。
  • リストからSettingsをクリックし、Authentication Settingsページを表示します。
  • Site URLにアプリの最終的な（ホストされた）URLを入力します（これは重要です）。
  • External OAuth ProvidersでTwitter EnabledをONにします。
  • 前の手順で保存したAPI Key (client_id)とAPI Secret Key(client_secret)を入力します。
  • Saveをクリックします。

クライアント・アプリにログインのコードを追加​

JavaScriptのクライアント・コードはこちらに記載：Supabase OAuthクライアントコード

const { user, session, error } = await supabase.auth.signIn({
  provider: 'twitter',
})

ボタン、リンク、またはUI要素から呼びだすための関数を追加します。

async function signInWithTwitter() {
  const { user, session, error } = await supabase.auth.signIn({
    provider: 'twitter',
  })
}

ログアウトするには次の関数を使います。

async function signout() {
  const { error } = await supabase.auth.signOut()
}

リソース​