Integrate X (Twitter) Login in Your App Using Auth0

In this lab, you will:

• Create an X (Twitter) standalone app.
• Create an X developer project.
• Add your X standalone app to your X project to have access to OAuth 2.0 authentication.
• Enable third-party authentication on your X standalone app using OAuth 2.0.
• Use an Auth0 social connection to configure X (Twitter) as a social identity provider.
• Test a "Login with X" button.

Why Use X (Twitter) For Login?

X (Twitter) is a popular social media platform with a growing user base. You should consider allowing users to log in using their X account if your audience is active on this platform or you plan to integrate with Twitter APIs. Using X as an identity provider also gives you access to verified user metadata to populate user profiles in your application. X social login is easy to set up with Auth0.

What if your users modify their X profile information? By default, Auth0 automatically syncs X user profile data with each user login, which ensures that changes made in the user's X profile are automatically updated in Auth0. Optionally, you can disable user profile data synchronization to keep the scope of updating user profile information within your application.

Let's get started with using X to log in!

Lab Setup

Create an X Developer Account

Before you begin, sign up for an X (Twitter) developer account if you don't already have one.

Create an Auth0 Account

If you already have an Auth0 account, you can log in to your tenant and continue to the next step.

Otherwise, sign up for a free Auth0 account.

During the sign-up process, you create something called an Auth0 Tenant, representing the product or service to which you are adding authentication.

Get Your Auth0 Domain

Your Auth0 domain is a unique URL to access your Auth0 tenant. At the same time, other services, such as X, use that unique URL to communicate with your Auth0 tenant to process user logins, create rich logs, and much more.

You can obtain your Auth0 domain by following these instructions:

• Open the Applications section of the Auth0 Dashboard.
• Click on any of the applications that show up.
• Click on the "Settings" tab of the application page.
• Locate the "Domain" field under the "Basic Information" section.
• Store the "Domain" value in the following field to set up your X credentials in the next section:

Create a X (Twitter) Standalone App

To obtain the necessary credentials, you need to register an OAuth App in the X (Twitter) Developer Portal.

Click the "Projects & Apps" tab and then click "Overview".

Locate the "Standalone Apps" section.

Click the "Create App" button.

Follow the steps in the workflow to provide the information needed to create the App.

The first step in the workflow asks you to set up an App name:

X will show this name to your users when they are redirected to X to log in.

Quick Authentication Demo

In production, you'll use a value that easily associates the X application with your business branding or name.

Click the "Next" button.

The second step in the workflow shows you the "Keys & Tokens" associated with this X app.

You can think of the API key as the username that represents your App when making API requests. It helps us verify who you are. Your API Key Secret is like a password and helps verify your API Key. This will be one of the last times you'll see it displayed. As such, leave this page open to complete the next step.

Configure the X (Twitter) Social Connection in the Auth0 Dashboard

Follow these steps to integrate the Auth0 social connection in your tenant with your X app using OAuth 2.0:

• Head to the Auth0 Dashboard.
• Click the "Authentication" tab on the left-hand menu and then click the "Social" option.
• Click the "Create Connection" button.
• Type "Twitter" in the search bar and click the Twitter social connection card that shows up.
• Read the description and disclosures in the "New Twitter Social Connection" page that comes up.
• Click the "Continue" button.

Head back to the X "Keys & Tokens" page and do the following:

• Copy the "API Key" value from the X page and paste it as the value of the "Consumer API Key" field in the Auth0 configuration page.
• Copy the "API Key Secret" value from the X page and paste it as the value of the "Consumer API secret key" field in the Auth0 configuration page. Notice that the only attribute selected for this social connection is "Basic profile", which means that X can give you basic profile information about the user logging in, such as name, picture, language, and much more. However, X does not currently provide the user's email address by default, and you'll need to perform additional configuration later in this lab to obtain that.
• Click the "Create" button.

A new page loads up with the "Applications" tab active. Enable this X social connection in any of the Auth0 applications you have created.

Create an X Project

X Standalone apps only support OAuth 1.0a by default. To use OAuth 2.0 authentication with your X standalone app, you need to associate it with an X developer project.

Head back to the "Keys & Tokens" page on X and click the "Go to dashboard" button.

Ensure the "Overview" tab under the "Projects & Apps" section is active. Then, click the "Add Project" button.

Follow the project creation workflow, filling it with the following data.

1. Project name

Your Project helps you organize your work and monitor your usage with the X API. Enter the following as the project name:

Login with X

Click the "Next" button.

2. Use case

This is how you intend to use the X developer platform. Select the "Exploring the API" option from the dropdown options.

Click the "Next" button.

3. Project description

This value is not public-facing. X uses this project description to create better developer experiences down the road.

Learning how to use X as an identity provider.

Click the "Next" button.

4. Add an existing App or create a new App

Click the "Add an existing App".

Pick your "Quick Authentication Demo" App from the dropdown list to add it to your Project. The App gains access to the X API v2.

Click the "Next" button.

A confirmation shows up letting you know that your App, "Quick Authentication Demo", is now in your Project, "Login with X".

You can now adjust settings, such as enabling third-party authentication on the App settings page.

Enable Third-Party Authentication For Your X App

Click the "App settings" button to open the configuration page of your "Quick Authentication Demo" X app.

Locate the "User authentication settings" section in the X app page that loads up.

In the context of an X app, enabling user authentication allows users to log in to your App with X. In this case, your App is your Auth0 tenant. Enabling this feature also allows your App to make specific requests on behalf of authenticated users.

Click the "Set up" button.

The "User authentication settings" page comes up.

Fill in the provided fields and options as follows.

App permissions

These permissions enable OAuth 1.0a Authentication, an authentication method that uses broad authorization with coarse scopes.

Ensure you enable the "Request email from users" option if you want to request the email address X has from your users. If you enable this option, X requires that you provide URLs to your App's privacy policy and terms of service.

Type of App

The type of App enables OAuth 2.0 Authentication, another authentication method that allows you to pick specific scopes, also known as permissions.

Choose "Web App, Automated App or Bot" as the app type.

According to X, web Apps have many levels of UI supported by a backend server. Automated Apps and Bots are built to perform tasks automatically. Bots on X often post information or perform actions automatically based on data inputs or triggers.

These apps are considered confidential clients as they can securely authenticate with the authorization server.

App info

Website URL:

In the context of authentication with Auth0, this value is your full tenant URL because the Auth0 tenant acts as the target application for X.

https://AUTH0-DOMAIN

Callback URI / Redirect URL:

Callback URLs are destinations that OAuth is allowed to redirect after the authentication process. It is important to identify your callback URLs so that OAuth recognizes the specified URLs as valid.

https://AUTH0-DOMAIN/login/callback

Auth0 will receive and process data from the X login transaction in the /login/callback endpoint of your Auth0 tenant. Once Auth0 does that, it redirects users to your actual application home page with the results of the login transaction. You don't have to worry about writing a single line of code to process X responses.

Could anyone hit that /login/callback endpoint? Not at all. There needs to be a secure handshake. Once you enter all this information, click the "Save" button.

Unlike other social connections, you don't need to use the OAuth 2.0 Client ID and Client Secret to connect Auth0 with your X app.

Test Your X (Twitter) Social Connection

Ensure you have configured your X (Twitter) social connection correctly using the Auth0 Dashboard.

Use the Auth0 Dashboard to log in

Instructions

• Visit the Auth0 Dashboard home page.
• Locate the "Try your Login box" under the "Next Steps" section.
• Click the "Try it out" link to open the Auth0 /tester app. The Auth0 Universal Login page loads up. This is a hosted page that Auth0 provides so that you don't have to write a single line of code to build the ultimate login and signup form.
• Click the "Continue with Twitter" button.

Expected results

An X (Twitter) authorization page loads up, showing your X app logo, name, website URL, and additional links if you request the email address from the X user logging in.

You can also see what your Auth0 application can do on your behalf and subsequently on behalf of your users:

• See Posts from your timeline (including protected Posts) as well as your Lists and collections.
• See your X profile information and account settings.
• See accounts you follow, mute, and block.
• See your email address.

These are third-party app permissions your Auth0 app will have once you sign in with the provided button, enter your X credentials, and successfully authenticate.

Start that process by clicking the "Sign in" button.

Once you sign in to X, click the "Authorize app", which has replaced the sign-in button.

You'll see a message that says you are being redirected. You will see a page titled "It works!" if everything goes well. On this page, you'll see user metadata about you that this Auth0 demo app got from X. For example:

{
  "sub": "twitter|1234567890",
  "nickname": "twitter-username",
  "name": "twitter-name",
  "picture": "https://pbs.twimg.com/image.png",
  "updated_at": "2025-02-18T20:20:00.600Z"
}

Next Steps

As a final piece of advice, it is a good idea to separate data in environments for data sanitation, management, and regional privacy policies. A best practice when working with Auth0 is to have different tenants for your project environments.

For example, it's recommended for developers to specify a production tenant. A production tenant gets higher rate limits than non-production tenants. Check out the "Set Up Multiple Environments" Auth0 document to learn more about how to set up development, staging, and production environments in the Auth0 Identity Platform.

You can create a X standalone app that pairs with each Auth0 tenant. Then, you can configure the X social connection for each tenant using the credentials from its corresponding X app.

Under the Hood: Auth0 Universal Login

As you have seen, Auth0 allows you to provide a delightful yet robust authentication experience to your users. With Auth0, you can scale up your application security by enabling social identity providers with just a few clicks. With Auth0, developers don't have to invest any time into building complicated sign-up and login forms that need to support different social connections, such as Google, Facebook, and GitHub.

Auth0 Universal Login lets developers delegate the responsibility of building complex login forms that support social identity providers to Auth0. When you use Auth0 to protect your client applications, you delegate the authentication process to a centralized login page: the Auth0 Universal Login page.

With Universal Login, when your users need to log in, your client redirects them to a central domain, through which Auth0 performs the authentication process. Once your users log in successfully, Auth0 takes them back to your application. With Auth0, you can use your tenant URL or a custom domain as your central domain for authentication. Auth0 Universal Login supports both login and sign-up transactions.

Google services are a solid example of centralized authentication. Whenever you need to access any Google service (such as Gmail, Google Calendar, YouTube, etc.), if you have not logged in yet, Google will redirect you to https://accounts.google.com to log in. Once you successfully log in, Google redirects you to the application that initialized the login process.

With every successful login transaction, Auth0 returns to your client application an ID token and an access token. Your client application can use the ID token to personalize the user interface. It can use the access token to make authenticated requests to access protected resources from an API that you also protect using Auth0.