​
Prerequisites

Before starting this integration, ensure you have:
  1. A Hanko Cloud account and project. Set up your account here if you haven’t already.
  2. A Discord account for accessing the developer portal. Create an account here if needed.

​
Get your provider redirect URL

You’ll need to configure a redirect URL in your Discord application. This URL determines where Discord redirects users after successful authentication. The redirect URL combines your Hanko API base URL with the /thirdparty/callback endpoint. To find your redirect URL:
  1. Sign in to cloud.hanko.io.
  2. Select your Organization.
  3. Select your Project.
  4. In the left sidebar, click Settings, then select Identity providers.
  5. Find your redirect URL in the Redirect URL input.
Hanko Callback URL
You need the redirect URL for creating a new Discord application in the next step and when configuring your credentials in Hanko (you will also configure the remaining configuration options visible in the above screen in this step).

​
Create a Discord application

  1. Navigate to the Discord developer portal.
  2. On the main dashboard, select Applications in the left sidebar.
  3. On the top right, select New Application.
Create a new application
  1. Enter a name for your application, accept the Discord Terms of Service, and click Create.
New application registration modal
  1. On your application dashboard, select OAuth2 in the left sidebar.
  2. In the Redirects panel, click Add Redirect.
Add redirect URL
  1. Enter the Redirect URL you obtained in the previous step in the input that appears.
  2. Click Save changes.
Enter redirect URL

​
Get your client ID and secret

  1. In the OAuth2 settings of your application, copy the Client ID.
  2. Click Reset Secret, follow the prompts to generate a new secret, then copy the generated secret.
Copy application credentials

​
Configure Discord credentials in Hanko

  1. In the Hanko Cloud Console, navigate to your project Settings and select Identity providers.
  2. Configure these redirect URLs:
Hanko Callback URL
  • Error Redirect URL: The frontend URL where Hanko redirects users if authentication fails. For applications using hanko-elements web components, this should be the page containing the component to handle errors properly.
  • Allowed Redirect URL: The frontend URL where Hanko redirects users after successful authentication. For hanko-elements applications, this should be the page containing the authentication component.
    The allowed redirect URL supports wildcard matching through globbing:
    • https://*.example.com matches https://foo.example.com and https://bar.example.com.
    • https://foo.example.com/* matches URLs like https://foo.example.com/page1 and https://foo.example.com/page2.
    • Use ** to act as a super-wildcard/match-all.
  1. In the Providers section, select Discord and enable it using the toggle switch.
  2. Enter the Client ID and Client Secret you obtained from the Discord developer console.
  3. Click Save to apply your configuration.

​
Implement Discord login in your frontend

You can integrate Discord authentication using either:
Follow our quickstart guides to integrate the <hanko-auth> component from @teamhanko/hanko-elements into your application. Once configured, the component will automatically display a Discord sign-in button in the login interface.
Make sure to configure the page the web component is embedded on as your error redirect URL as well as an allowed redirect URL (see the previous step).
After successful Discord authentication, Hanko issues a session cookie and the component continues its normal flow. Authentication errors are automatically captured and displayed within the component.