Skip to main content
Version: Next

Discord

Wasp supports Discord Authentication out of the box.

Letting your users log in using their Discord accounts turns the signup process into a breeze.

Let's walk through enabling Discord Authentication, explain some of the default settings, and show how to override them.

Setting up Discord Auth​

Enabling Discord Authentication comes down to a series of steps:

  1. Enabling Discord authentication in the Wasp file.
  2. Adding the User entity.
  3. Creating a Discord App.
  4. Adding the necessary Routes and Pages
  5. Using Auth UI components in our Pages.

Here's a skeleton of how our main.wasp.ts should look like after we're done:

main.wasp.ts
import { app, page, route } from "@wasp.sh/spec"
import { LoginPage } from "./src/pages/auth" with { type: "ref" }

// Configuring the social authentication
export default app({
  name: "myApp",
  wasp: { version: "^0.24" },
  title: "My App",
  head: ["<link rel='icon' href='/favicon.ico' />"],
  auth: {
    // ...
  },
  spec: [
    // Defining routes and pages
    route("LoginRoute", "/login", page(LoginPage)),
  ],
})

1. Adding Discord Auth to Your Wasp File​

Let's start by properly configuring the Auth object:

main.wasp.ts
import { app } from "@wasp.sh/spec"

export default app({
  name: "myApp",
  wasp: { version: "^0.24" },
  title: "My App",
  head: ["<link rel='icon' href='/favicon.ico' />"],
  auth: {
    // 1. Specify the User entity  (we'll define it next)
    userEntity: "User",
    methods: {
      // 2. Enable Discord Auth
      discord: {}
    },
    onAuthFailedRedirectTo: "/login"
  },
  // ...
})

2. Add the User Entity​

Let's now define the auth.userEntity entity in the schema.prisma file:

schema.prisma
// 3. Define the user entity
model User {
  id Int @id @default(autoincrement())
  // Add your own fields below
  // ...
}

3. Creating a Discord App​

To use Discord as an authentication method, you'll first need to create a Discord App and provide Wasp with your client key and secret. Here's how you do it:

  1. Log into your Discord account and navigate to: https://discord.com/developers/applications.
  2. Select New Application.
  3. Supply required information.
Discord Applications Screenshot
  1. Go to the OAuth2 tab on the sidebar and click Add Redirect
  • For development, put: http://localhost:3001/auth/discord/callback.
  • Once you know on which URL your API server will be deployed, you can create a new app with that URL instead e.g. https://your-server-url.com/auth/discord/callback.
  1. Hit Save Changes.
  2. Hit Reset Secret.
  3. Copy your Client ID and Client secret as you'll need them in the next step.

4. Adding Environment Variables​

Add these environment variables to the .env.server file at the root of your project (take their values from the previous step):

.env.server
DISCORD_CLIENT_ID=your-discord-client-id
DISCORD_CLIENT_SECRET=your-discord-client-secret

5. Adding the Necessary Routes and Pages​

Let's define the necessary authentication Routes and Pages.

Add the following code to your main.wasp.ts file:

main.wasp.ts
import { app, page, route } from "@wasp.sh/spec"
import { LoginPage } from "./src/pages/auth" with { type: "ref" }

export default app({
  // ...
  spec: [
    route("LoginRoute", "/login", page(LoginPage)),
  ],
})

We'll define the React components for these pages in the src/pages/auth.tsx file below.

6. Creating the Client Pages​

info

We are using Tailwind CSS to style the pages. Read more about how to add it here.

Let's create a auth.tsx file in the src/pages folder and add the following to it:

src/pages/auth.jsx
import { LoginForm } from "wasp/client/auth";

export function LoginPage() {
  return (
    <Layout>
      <LoginForm />
    </Layout>
  );
}

// A layout component to center the content
export function Layout({ children }) {
  return (
    <div className="h-full w-full bg-white">
      <div className="flex min-h-[75vh] min-w-full items-center justify-center">
        <div className="h-full w-full max-w-sm bg-white p-5">
          <div>{children}</div>
        </div>
      </div>
    </div>
  );
}

We imported the generated Auth UI components and used them in our pages. Read more about the Auth UI components here.

Conclusion​

Yay, we've successfully set up Discord Auth! 🎉

Discord Auth

Running wasp db migrate-dev and wasp start should now give you a working app with authentication. To see how to protect specific pages (i.e., hide them from non-authenticated users), read the docs on using auth.

Default Behaviour​

Add discord: {} to the auth.methods object to use it with default settings.

main.wasp.ts
import { app } from "@wasp.sh/spec"

export default app({
  name: "myApp",
  wasp: { version: "^0.24" },
  title: "My App",
  head: ["<link rel='icon' href='/favicon.ico' />"],
  auth: {
    userEntity: "User",
    methods: {
      discord: {}
    },
    onAuthFailedRedirectTo: "/login"
  },
  // ...
})

When a user signs in for the first time, Wasp creates a new user account and links it to the chosen auth provider account for future logins.

Overrides​

By default, Wasp doesn't store any information it receives from the social login provider. It only stores the user's ID specific to the provider.

There are two mechanisms used for overriding the default behavior:

  • userSignupFields
  • configFn

Let's explore them in more detail.

Data Received From Discord​

We are using Discord's API and its /users/@me endpoint to get the user data.

The data we receive from Discord on the /users/@me endpoint looks something like this:

{
  "id": "80351110224678912",
  "username": "Nelly",
  "discriminator": "1337",
  "avatar": "8342729096ea3675442027381ff50dfe",
  "verified": true,
  "flags": 64,
  "banner": "06c16474723fe537c283b8efa61a30c8",
  "accent_color": 16711680,
  "premium_type": 1,
  "public_flags": 64,
  "avatar_decoration_data": {
    "sku_id": "1144058844004233369",
    "asset": "a_fed43ab12698df65902ba06727e20c0e"
  }
}

The fields you receive will depend on the scopes you requested. The default scope is set to identify only. If you want to get the email, you need to specify the email scope in the configFn function.

For an up to date info about the data received from Discord, please refer to the Discord API documentation.

Using the Data Received From Discord​

When a user logs in using a social login provider, the backend receives some data about the user. Wasp lets you access this data inside the userSignupFields getters.

For example, the User entity can include a displayName field which you can set based on the details received from the provider.

Wasp also lets you customize the configuration of the providers' settings using the configFn function.

Let's use this example to show both fields in action:

main.wasp.ts
import { app } from "@wasp.sh/spec"
import { getConfig, userSignupFields } from "./src/auth/discord" with { type: "ref" }

export default app({
  name: "myApp",
  wasp: { version: "^0.24" },
  title: "My App",
  head: ["<link rel='icon' href='/favicon.ico' />"],
  auth: {
    userEntity: "User",
    methods: {
      discord: {
        configFn: getConfig,
        userSignupFields
      }
    },
    onAuthFailedRedirectTo: "/login"
  },
  // ...
})
schema.prisma
model User {
  id          Int    @id @default(autoincrement())
  username    String @unique
  displayName String
}

// ...
src/auth/discord.js
import { defineUserSignupFields } from "wasp/server/auth";

export const userSignupFields = defineUserSignupFields({
  username: (data) => data.profile.global_name,
  avatarUrl: (data) => data.profile.avatar,
});

export function getConfig() {
  return {
    scopes: ["identify"],
  };
}

Wasp automatically generates the defineUserSignupFields function to help you correctly type your userSignupFields object.

Using Auth​

To read more about how to set up the logout button and get access to the logged-in user in both client and server code, read the docs on using auth.

When you receive the user object on the client or the server, you'll be able to access the user's Discord ID like this:

const discordIdentity = user.identities.discord

// Discord User ID for example "80351110224678912"
discordIdentity.id

Read more about accessing the user data in the Accessing User Data section of the docs.

API Reference​

API reference

SocialAuthConfig »

All the options for the discord auth method.

For the provider-specific behavior of the configFn and userSignupFields functions, check the Overrides section. For behavior common to all providers, check the Social Auth Overview.