> ## Documentation Index
> Fetch the complete documentation index at: https://docs.magic.link/llms.txt
> Use this file to discover all available pages before exploring further.

# Twitch Social Login with Magic

> You can allow your users to sign up & log in to your web app with their Twitch account.

## Usage

### Prerequisites

* You will need a [Twitch](https://www.twitch.com/) account
* You will need to have the [Magic SDK installed](/embedded-wallets/sdk/overview) into your web app
* You will need to have the [Magic SDK - OAuth Extension](/embedded-wallets/authentication/login/oauth/oauth-implementation) installed into your web app

### Twitch Setup (v1 extension)

After installing the OAuth extension, you can now enable Twitch Login for your Magic app:

1. Go to your [Magic Dashboard](https://dashboard.magic.link/login)
2. Select the Magic app for which you’d like to enable Twitch Login, or create a new app
3. Navigate to **Social Login** from the sidebar
4. Click the toggle for **Twitch**
5. Copy the **Redirect URI** field from your Magic Dashboard
6. Follow Twitch's [registration instructions](https://dev.twitch.tv/embedded-wallets/authentication/#registration) to [register your app](https://dev.twitch.tv/console/apps/create)
7. Paste **Redirect URI** into the **OAuth Redirect URLs**

<Frame>
  <img src="https://mintcdn.com/magic-newton/mA7B4icGsHcK07ZQ/images/register-your-application.webp?fit=max&auto=format&n=mA7B4icGsHcK07ZQ&q=85&s=2c0488c679ec72cabe3bb9b3f8e1a2bc" alt="register-your-application" width="1042" height="631" data-path="images/register-your-application.webp" />
</Frame>

8. After creation of your Twitch app, click **Manage**

<Frame>
  <img src="https://mintcdn.com/magic-newton/mA7B4icGsHcK07ZQ/images/manage-your-app.webp?fit=max&auto=format&n=mA7B4icGsHcK07ZQ&q=85&s=b1b1b41d95b83e97b4c721079d3279ae" alt="manage-your-app.png" width="1200" height="250" data-path="images/manage-your-app.webp" />
</Frame>

9. In the manage application section, click **New Secret**

<Frame>
  <img src="https://mintcdn.com/magic-newton/mA7B4icGsHcK07ZQ/images/generate-client-secret.webp?fit=max&auto=format&n=mA7B4icGsHcK07ZQ&q=85&s=e850c7e36c2201ff5d4c947f58991b34" alt="generate-client-secret.png" width="1085" height="769" data-path="images/generate-client-secret.webp" />
</Frame>

10. Obtain the **Client ID** and **Client Secret**
11. Return to your Magic Dashboard and input the **Client ID** and **Client Secret** for your Twitch OAuth app
12. In Magic Dashboard, click **“Save”**
13. Click **"Test Connection"** to give your new Twitch OAuth flow a try!

### Twitch Setup (v2 extension)

* Follow above steps, but disregard Magic's **Redirect URI** in step 5
* In step 7, paste the **Redirect URI** you are passing in as the **redirectURI** argument to the **loginWithRedirect** method

```javascript JavaScript icon="square-js" theme={null}
await magic.oauth2.loginWithRedirect({
  provider: 'twitch',
  redirectURI: 'https://your-app.com/your/oauth/callback', // <== whitelist this with Twitch
});
```

## Resources

* [Twitch Social Login Demo](https://magic-oauth-v2-dun.vercel.app)