Discord Login

Learn how to interact with Discord Login

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

Overview#

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

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

Configuration#

Access your Discord account

Go to discord.com.
Click on Login at the top right to log in.
Once logged in, go to discord.com/developers.
callback URL: https://api.openfort.xyz/iam/v1/oauth/callback/facebook

Create a Discord application

Click on New Application at the top right.
Enter the name of your application and click Create.
Click on OAuth2 under Settings in the left side panel.
Click Add Redirect under Redirects.
Type or paste your callback URL into the Redirects box.
Click Save Changes at the bottom.
Copy your Client ID and Client Secret under Client information.

Add your Discord credentials into your Supabase project

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.DISCORD,
    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": "discord",
              "disabled": false,
              "externalUserId": "2"
          }
      ]
  },
  "token": "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6ImNmODNlMTM1N2VlZmI4YmRmMTU0Mjg1MGQ2NmQ4MDA3ZDYyMGU0MDUwYjU3MTVkYzgzZjRhOTIxZDM2Y2U5Y2U0N2QwZDEzYzVkODVmMmIwZmY4MzE4ZDI4NzdlZWMyZjYzYjkzMWJkNDc0MTdhODFhNTM4MzI3YWY5MjdkYTNlIn0.eyJhdWQiOiJwcm9fOGY3ZTM1NTktMjhkNy00MWE2LTgxNGMtMjU0OTkzZTdkNjFkLXRlc3QiLCJleHAiOjE3MTA5ODI2MDIsImlhdCI6MTcxMDk3OTAwMiwiaXNzIjoib3BlbmZvcnQueHl6Iiwic2lkIjoiMzhhMDdmMzktMTUxOS00MjE0LWJmNmMtNzI0Zjg0ZDBiZGQwIiwic3ViIjoicGxhX2NjOWVkMmI3LWM1ZjUtNGM0My04ZGNhLWM0YjEwNGJhMTc2MiJ9.EcFtS__GwyxJu1S3tO7jMBbTCIJCpqsoNxxJrqILrKjNl2N5-SIMG2z_s2Vs8ztG6KAVy6zIp6P9GzfD7s4JiA",
  "refreshToken": "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6ImNmODNlMTM1N2VlZmI4YmRmMTU0Mjg1MGQ2NmQ4MDA3ZDYyMGU0MDUwYjU3MTVkYzgzZjRhOTIxZDM2Y2U5Y2U0N2QwZDEzYzVkODVmMmIwZmY4MzE4ZDI4NzdlZWMyZjYzYjkzMWJkNDc0MTdhODFhNTM4MzI3YWY5MjdkYTNlIn0.eyJzaWQiOiIzOGEwN2YzOS0xNTE5LTQyMTQtYmY2Yy03MjRmODRkMGJkZDAiLCJpYXQiOjE3MTA5NzkwMDIsImV4cCI6MTcxMzU3MTAwMn0.koNd4eoevBQQR3-z0CMGL5qVzOURZEeAgjvrHMRloLgDbScS2Qbi4W-vf2fE0fYOWUIAHnAq7cDABNwSQrEvSQ"
}