X (Twitter V2)

You will learn the following:

Create an X/Twitter application
Enable X/Twitter as a social connection
Set Clerk's Authorized Redirect URI in your X/Twitter application
Set X/Twitter's Client ID and Client Secret in your Clerk Dashboard

Before you start

Overview

Clerk does not currently support preconfigured shared OAuth credentials for X/Twitter on development instances. This means you will have to provide custom credentials for both development and production instances, which includes generating your own Client ID and Client Secret using your X/Twitter Developer account. Don't worry, this tutorial will walk you through that process in just a few simple steps.

Warning

X/Twitter v2 is currently not providing email addresses of users. The user will have to fill in their email address manually when they return to your application after authenticating with X/Twitter.

Create an X/Twitter application

If you don't have an existing X/Twitter application you've set up for social connection, you need to register a new one at the X/Twitter Developer Portal. Note that the process requires approval from X/Twitter before your new application can be used.

To create a new X/Twitter application, navigate to the X/Twitter Developer Portal and go to Projects & Apps. Select + Add App. After entering a name, you will be presented with your app's credentials. However, for setting up the X/Twitter v2 social connection with Clerk, you won't need these credentials. This is because you will be utilizing the OAuth 2.0 flow, which relies on different authentication details.

To enable X/Twitter as a social connection for your Clerk application, go to the Clerk Dashboard. Navigate to User & Authentication > Social Connections. From the list of OAuth vendors, toggle on the X/Twitter option.

In the modal that opened, copy the Authorized redirect URI. Keep this modal and page open.

The X/Twitter settings modal in the Clerk Dashboard. An arrow marked '1' is pointing to the 'Redirect URI' copy button.

Set the Authorized Redirect URI in your X/Twitter application

Navigate back to the X/Twitter Developer portal. On the application settings screen, scroll down to the User authentication settings section and select Set up.

The X/Twitter set up user authentication settings page. An arrow marked '1' is pointing to the 'Set up' button.

In the next screen, you'll be presented with the User authentication settings page. Under App permissions, you can choose the permissions you want to request from the user. For this tutorial, we'll be using the Read permission. Under Type of App, select Web App, Automated App or Bot.

Under App info, in the Callback URI / Redirect URL input, paste the Authorized Redirect URI value you copied from the Clerk Dashboard in the last step. Your app's settings should like similar to the ones below. Fill any other required fields, such as the Website URL, and select Save.

The X/Twitter user authentication settings page. An arrow marked '1' is pointing to the 'type of app' input. An arrow marked '2' is pointing to the 'Callback URI / Redirect URL' input. An arrow marked '3' is pointing to required website URL input.

Set the Client ID and Client Secret in your Clerk Dashboard

After setting up your X/Twitter application, you should be able to copy your Client ID and Client Secret.

Go back to the Clerk Dashboard, where the modal should still be open, and paste these values into the respective fields.

Note

If the modal or page is not still open, go to the Clerk Dashboard and navigate to User & Authentication > Social Connections. Click on the settings cog icon next to the X/Twitter option. You can now paste the Client ID and Client Secret into their respective fields.

The X/Twitter settings modal in the Clerk Dashboard. An arrow marked '1' is pointing to the 'Client ID' input. An arrow marked '2' is pointing to the 'Client Secret' input.

Finished 🎉

Congratulations! Social connection with X/Twitter is now configured for your Clerk application.

Edit this page on GitHub

Last updated on Aug 20, 2024