Sign in with Discord

Step-by-step guide to integrating Sign in with Discord using Hanko. Enable secure authentication and seamless onboarding for your app’s users.

Hanko Discord OAuth Integration Guide:

About Hanko:

Hanko is a modern open source authentication solution and the fastest way you integrate passkeys, 2FA, SSO, and more—with full control over your data. Move between self-hosted and Hanko Cloud anytime. No lock-in. Just Auth how it should be: secure, user friendly, and fully yours.

What This Guide Covers: This guide demonstrates how to integrate Discord OAuth authentication with Hanko, allowing users to sign in using their Discord accounts. You’ll learn to set up a Discord application, configure OAuth credentials, and implement Discord login in your application.

Key Technologies:

• OAuth 2.0 authentication protocol
• Discord OAuth provider and API
• JWT (JSON Web Tokens) for secure session management
• RESTful API integration
• Frontend SDK integration

Prerequisites:

• Active Hanko Cloud account with a configured project
• Discord account for developer access
• Basic understanding of OAuth 2.0 authentication flow
• Frontend application ready for integration

Tasks You’ll Complete:

• Create and configure a Discord application in the developer portal
• Set up OAuth redirect URLs and obtain client credentials
• Configure Discord OAuth settings in Hanko Console
• Implement Discord authentication in your frontend application
• Handle authentication success and error states

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.

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.

4. Enter a name for your application, accept the Discord Terms of Service, and click Create.

5. On your application dashboard, select OAuth2 in the left sidebar.
6. In the Redirects panel, click Add Redirect.

7. Enter the Redirect URL you obtained in the previous step in the input that appears.
8. Click Save changes.

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.

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:

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

3. In the Providers section, select Discord and enable it using the toggle switch.
4. Enter the Client ID and Client Secret you obtained from the Discord developer console.
5. Click Save to apply your configuration.

Implement Discord login in your frontend

You can integrate Discord authentication using either:

• Pre-built UI components from @teamhanko/hanko-elements
• Custom implementation with @teamhanko/hanko-frontend-sdk

Hanko Elements

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.