Home

Login with Twitch

To enable Twitch Auth for your project, you need to set up a Twitch Application and add the Application OAuth credentials to your Supabase Dashboard.

Overview#

Setting up Twitch logins for your application consists of 3 parts:

Access your Twitch Developer account#

  • Go to dev.twitch.tv.
  • Click on Log in with Twitch at the top right to log in.
  • If you have not already enabled 2-Factor Authentication for your Twitch Account, you will need to do that at Twitch Security Settings before you can continue.

Twitch Developer Page

Twitch Developer Console

Find your callback URL#

The next step requires a callback URL, which looks like this:

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

  • Go to your Supabase Project Dashboard
  • Click on the Authentication icon in the left sidebar
  • Click on Providers under the Configuration section
  • Click on Twitch from the accordion list to expand and you'll find your Redirect URL, you can click Copy to copy it to the clipboard

Create a Twitch Application#

Twitch Developer Console

  • Click on + Register Your Application at the top right.

Register Application

  • Enter the name of your application.
  • Type or paste your OAuth Redirect URL (the callback URL from the previous step.)
  • Select a category for your app.
  • Check the Captcha box and click Create.

Retrieve your Twitch OAuth Client ID and Client Secret#

  • Click Manage at the right of your application entry in the list.

Twitch Applications List

  • Copy your Client ID.
  • Click New Secret to create a new Client Secret.
  • Copy your Client Secret.

Get Client ID and Secret

Add your Twitch credentials into your Supabase Project#

  • Go to your Supabase Project Dashboard
  • In the left sidebar, click the Authentication icon (near the top)
  • Click on Providers under the Configuration section
  • Click on Twitch from the accordion list to expand and turn Twitch Enabled to ON
  • Enter your Twitch Client ID and Twitch Client Secret saved in the previous step
  • Click Save

Add login code to your client app#

When your user signs in, call signInWithOAuth() with twitch as the provider:

async function signInWithTwitch() {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'twitch',
  })
}

When your user signs out, call signOut() to remove them from the browser session and any objects from localStorage:

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

Resources#