Discord

import useBaseUrl from '@docusaurus/useBaseUrl'; import DefaultBehaviour from './_default-behaviour.md'; import OverrideIntro from './_override-intro.md'; import OverrideExampleIntro from './_override-example-intro.md'; import UsingAuthNote from './_using-auth-note.md'; import WaspFileStructureNote from './_wasp-file-structure-note.md'; import GetUserFieldsType from './_getuserfields-type.md'; import ApiReferenceIntro from './_api-reference-intro.md'; import UserSignupFieldsExplainer from '../_user-signup-fields-explainer.md'; import DiscordData from '../entities/_discord-data.md'; import AccessingUserDataNote from '../_accessing-user-data-note.md'; import SocialLoginClientPages from './_social-login-client-pages.md';

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.

1. Adding Discord Auth to Your Wasp File

Let's start by properly configuring the Auth object:

app myApp {
  wasp: {
    version: "{latestWaspVersion}"
  },
  title: "My App",
  auth: {
    // highlight-next-line
    // 1. Specify the User entity  (we'll define it next)
    // highlight-next-line
    userEntity: User,
    methods: {
      // highlight-next-line
      // 2. Enable Discord Auth
      // highlight-next-line
      discord: {}
    },
    onAuthFailedRedirectTo: "/login"
  },
}

2. Add the User Entity

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

// 3. Define the user entity
model User {
  // highlight-next-line
  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.

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

4. Hit Save Changes.
5. Hit Reset Secret.
6. 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):

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 file:

// ...

route LoginRoute { path: "/login", to: LoginPage }
page LoginPage {
  component: import { Login } from "@src/pages/auth"
}

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

6. Creating the Client Pages

Conclusion

Yay, we've successfully set up 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 dictionary to use it with default settings.

app myApp {
  wasp: {
    version: "{latestWaspVersion}"
  },
  title: "My App",
  auth: {
    userEntity: User,
    methods: {
      // highlight-next-line
      discord: {}
    },
    onAuthFailedRedirectTo: "/login"
  },
}

Overrides

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.

Using the Data Received From Discord

app myApp {
  wasp: {
    version: "{latestWaspVersion}"
  },
  title: "My App",
  auth: {
    userEntity: User,
    methods: {
      discord: {
        // highlight-next-line
        configFn: import { getConfig } from "@src/auth/discord",
        // highlight-next-line
        userSignupFields: import { userSignupFields } from "@src/auth/discord"
      }
    },
    onAuthFailedRedirectTo: "/login"
  },
}

model User {
  id          Int    @id @default(autoincrement())
  username    String @unique
  displayName String
}

// ...

import { defineUserSignupFields } from 'wasp/server/auth'

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

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

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:

API Reference

app myApp {
  wasp: {
    version: "{latestWaspVersion}"
  },
  title: "My App",
  auth: {
    userEntity: User,
    methods: {
      discord: {
        // highlight-next-line
        configFn: import { getConfig } from "@src/auth/discord",
        // highlight-next-line
        userSignupFields: import { userSignupFields } from "@src/auth/discord"
      }
    },
    onAuthFailedRedirectTo: "/login"
  },
}

The discord dict has the following properties:

• configFn: ExtImport

  This function should return an object with the scopes for the OAuth provider.

  tsCopy

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

• userSignupFields: ExtImport

  <UserSignupFieldsExplainer />

  Read more about the userSignupFields function here.