Set up a social connection with X/Twitter v2
You will learn how to:
- 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
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.
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(opens in a new tab). 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(opens in a new tab). 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.
Enable X/Twitter as a social connection
To enable X/Twitter as a social connection for your Clerk application, go to the Clerk Dashboard. Navigate to User & Authentication > Social Connections(opens in a new tab). 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.
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.
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.
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.
If the modal or page is not still open, go to the Clerk Dashboard and navigate to User & Authentication > Social Connections(opens in a new tab). 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.
Finished 🎉
Congratulations! Social connection with X/Twitter is now configured for your Clerk application.