1. You need a Hanko Cloud account and a project. Learn more on how to set them up here.
  2. You need a Discord account. You can create account here.

Get your provider redirect URL

When creating an Discord application, you need to provide a redirect URL that determines where the third party provider redirects after a successful login. This redirect URL consists of the base URL of the Hanko API and the /thirdparty/callback endpoint. You can always view your redirect URL in the Hanko Cloud Console:

  1. Sign in to
  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 with Hanko (you will also configure the remaining configuration options visible in the above screen in this step).

Create a new 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. Provide a name for your application, agree to 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 credentials with Hanko

  1. In the Hanko Cloud Console, navigate to your project Settings and select Identity providers.
  2. Configure the following:
Hanko Callback URL
  • Error Redirect URL: This is the URL target in your frontend the Hanko API redirects to if an error occurs during third party sign-in. If your frontend uses the hanko-elements web components, this URL should be the URL of the page that embeds the web component such that errors can be processed properly by the web component.

  • Allowed Redirect URL: This is the URL target in your frontend the Hanko API is allowed to redirect to after third party authentication was successful. If your frontend uses the hanko-elements web components, this URL should be the URL of the page that embeds the web component.

    The allowed redirect URL supports wildcard matching through globbing:

    • https://* matches and
    •* matches URLs like and
    • Use ** to act as a super-wildcard/match-all.
  1. In the Providers section, select Discord and use the Enable provider toggle to enable the provider.
  2. Provide the Client ID and Client Secret you obtained in one of the previous section in the remaining inputs.
  3. Click Save.

Frontend integration

To enable a login with Discord in your frontend application we recommend using either our pre-built UI as provided by the @teamhanko/hanko-elements package or building a custom UI using the @teamhanko/hanko-frontend-sdk.

We recommend following one of our quickstart guides to integrate the <hanko-auth> component from our @teamhanko/hanko-elements package in your frontend application . On successful integration, the component will display a button for signing in with Discord in the login view of the component.

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).

On successful authentication with the provider, the backend issues a session cookie and the web component continues the usual component flow on success. Errors that occur during third party provider authentication are also picked up and displayed in the web component accordingly.