X (Twitter) Login

Learn how to interact with X Login

To enable Twitter Auth for your project, you need to set up a Twitter OAuth application and add the application credentials in the Openfort Dashboard.

Overview#

Setting up Twitter logins for your application consists of 3 parts:

Create and configure a Twitter Project and App on the Twitter Developer Dashboard.
Add your Twitter API Key and API Secret Key to your Openfort Project.
Add the login code to your Openfort JS Client App.

Configuration#

Create Project and App:

Click "+ Create Project", enter project name, and select use case.
Enter a project description and app name.
Copy and save your API Key (client_id) and API Secret Key (client_secret).

Set Up App Settings:

Click on "App settings".
Go to "User authentication settings" and click "Set up".

Configure App Permissions:

Turn ON "Request email from users".
Select "Web App" as the Type of App.
Enter Callback URL, Website URL, Terms of service URL, and Privacy policy URL.

Set up X in Openfort:

Go to the Openfort Project Dashboard.
Click on the Authentication icon and then Providers.
Click on Twitter Enabled to turn it ON.
Enter the Twitter Client ID and Twitter Client Secret.

Signing users in#

To initiate sign in, you can use the initOAuth() method from the Openfort JavaScript library and provide a redirectTo URL which points to a callback route.

Implicit flow: that's all you need to do. The user will be taken to Google's consent screen, and finally redirected to your app with an access and refresh token pair representing their session.
Pooling flow: for example in Server-Side Auth, you need to redirect the user back to your website.

Behind the scenes, Openfort Auth uses the Google OAuth 2.0 APIs, which are OpenID Connect certified, to perform the authentication.

To initiate sign in, you can use the initOAuth() method from the Openfort JavaScript library.

Implicit flow: that's all you need to do. The user will be taken to Google's consent screen, and finally redirected to your app with an access and refresh token pair representing their session.
Pooling flow: for example in Server-Side Auth, you need to redirect the user back to your website.

const response = await openfort.initOAuth(
  {
    provider: OAuthProvider.TWITTER,
    redirectTo: 'https://your-website.com',
  }
);

response

{
  "url": "redirect-url",
  "key": "key"
}

Now you can redirect the user to the initOAuth.url and when the process is done, you will be redirected to the redirectTo url with tokens https://your-website.com?access_token=...&refresh_token=... You can then use those parameters to authenticate the user:

openfort.storeCredentials({
    player: 'undefined',
    accessToken: access_token,
    refreshToken: refresh_token,
  });

Uppon successful authentication, the SDK will return a token that can be used to authenticate the user in your application.

response.json

{
  "player": {
      "id": "pla_cc9ed2b7-c5f5-4c43-8dca-c4b104ba1762",
      "object": "player",
      "createdAt": 1710976453,
      "linkedAccounts": [
          {
              "provider": "twitter",
              "disabled": false,
              "externalUserId": "2"
          }
      ]
  },
  "token": "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6ImNmODNlMTM1N2VlZmI4YmRmMTU0Mjg1MGQ2NmQ4MDA3ZDYyMGU0MDUwYjU3MTVkYzgzZjRhOTIxZDM2Y2U5Y2U0N2QwZDEzYzVkODVmMmIwZmY4MzE4ZDI4NzdlZWMyZjYzYjkzMWJkNDc0MTdhODFhNTM4MzI3YWY5MjdkYTNlIn0.eyJhdWQiOiJwcm9fOGY3ZTM1NTktMjhkNy00MWE2LTgxNGMtMjU0OTkzZTdkNjFkLXRlc3QiLCJleHAiOjE3MTA5ODI2MDIsImlhdCI6MTcxMDk3OTAwMiwiaXNzIjoib3BlbmZvcnQueHl6Iiwic2lkIjoiMzhhMDdmMzktMTUxOS00MjE0LWJmNmMtNzI0Zjg0ZDBiZGQwIiwic3ViIjoicGxhX2NjOWVkMmI3LWM1ZjUtNGM0My04ZGNhLWM0YjEwNGJhMTc2MiJ9.EcFtS__GwyxJu1S3tO7jMBbTCIJCpqsoNxxJrqILrKjNl2N5-SIMG2z_s2Vs8ztG6KAVy6zIp6P9GzfD7s4JiA",
  "refreshToken": "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6ImNmODNlMTM1N2VlZmI4YmRmMTU0Mjg1MGQ2NmQ4MDA3ZDYyMGU0MDUwYjU3MTVkYzgzZjRhOTIxZDM2Y2U5Y2U0N2QwZDEzYzVkODVmMmIwZmY4MzE4ZDI4NzdlZWMyZjYzYjkzMWJkNDc0MTdhODFhNTM4MzI3YWY5MjdkYTNlIn0.eyJzaWQiOiIzOGEwN2YzOS0xNTE5LTQyMTQtYmY2Yy03MjRmODRkMGJkZDAiLCJpYXQiOjE3MTA5NzkwMDIsImV4cCI6MTcxMzU3MTAwMn0.koNd4eoevBQQR3-z0CMGL5qVzOURZEeAgjvrHMRloLgDbScS2Qbi4W-vf2fE0fYOWUIAHnAq7cDABNwSQrEvSQ"
}