> ## 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.

# Twitter(X) Social Login with Magic

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

## Usage

### Prerequisites

* You will need a [Twitter](https://developer.twitter.com/en/apply-for-access) Developer account (only free access is required)

* You will need to have the [Magic SDK installed](/embedded-wallets/sdk/overview) into your web application

* You will need to have the [Magic SDK - OAuth Extension](/embedded-wallets/authentication/login/oauth/oauth-implementation) installed into your web application

### Twitter Setup

1. Go to your [Magic Dashboard](https://dashboard.magic.link/login)
2. Select the Magic application for which you’d like to enable Twitter Login, or create a new application
3. Navigate to **Social Login** from the sidebar
4. Click the toggle for **Twitter**
5. Go to Twitter App Dashboard and navigate to **Projects & Apps**
6. In the **Overview** section, click on **Add Project**

<Frame>
  <img src="https://mintcdn.com/magic-newton/mA7B4icGsHcK07ZQ/images/twitter-step-1.webp?fit=max&auto=format&n=mA7B4icGsHcK07ZQ&q=85&s=e526d377dee0a4b5a16a97515b466ba0" alt="twitter-step-1.png" width="1200" height="600" data-path="images/twitter-step-1.webp" />
</Frame>

7. Add your project name, use case and description

<Frame>
  <img src="https://mintcdn.com/magic-newton/mA7B4icGsHcK07ZQ/images/twitter-step-2.webp?fit=max&auto=format&n=mA7B4icGsHcK07ZQ&q=85&s=54d08a10f5b02a5ef23aadf29a12be37" alt="twitter-step-1.png" width="1200" height="596" data-path="images/twitter-step-2.webp" />
</Frame>

8. Do **NOT** use the **API Key** and **Secret** under Consumer Keys. Make sure to copy the **Client ID** and **Client Secret** to the Magic Dashboard, which you can then use with your application that connects to Twitter. Complete flow if OAuth 2.0 **Client ID** and **Client Secret** are not visible

<Frame>
  <img src="https://mintcdn.com/magic-newton/1GYf0YW8BthDpWqo/images/Screenshot-2024-08-20.webp?fit=max&auto=format&n=1GYf0YW8BthDpWqo&q=85&s=e3fa4967be760d827560aef6823119db" alt="" width="1200" height="915" data-path="images/Screenshot-2024-08-20.webp" />
</Frame>

9. Navigate to the application on the sidebar and click **Set up** under **User authentication settings**

<Frame>
  <img src="https://mintcdn.com/magic-newton/mA7B4icGsHcK07ZQ/images/twitter-step-4.webp?fit=max&auto=format&n=mA7B4icGsHcK07ZQ&q=85&s=5a5fceac4ba45019160c2f062599c7e1" alt="twitter-step-4.png" width="1200" height="594" data-path="images/twitter-step-4.webp" />
</Frame>

10. Fill out all of the required permissions and app type information
11. Paste the **Redirect URI** you will pass as the **redirectURI** argument to the **loginWithRedirect** method, in the **Callback URI / Redirect URL** and add your applications **Website URL**

<Frame>
  <img src="https://mintcdn.com/magic-newton/mA7B4icGsHcK07ZQ/images/twitter-step-5.webp?fit=max&auto=format&n=mA7B4icGsHcK07ZQ&q=85&s=710303c1539fd52ad65ffbc952217ef9" alt="twitter-step-5.png" width="1136" height="1538" data-path="images/twitter-step-5.webp" />
</Frame>

12. After saving these details for the first time, Twitter will then display an OAuth 2.0 Client ID and Client Secret. **IMPORTANT:** These are the keys that Magic requires to use v2. Do **NOT** use the **API Key** and **API Key Secret** for v2.
13. **"Test Connection" function in dashboard will not work for v2.**

## Resources

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