NestJS backend with VueJS and Angular frontend to demonstrate how to login with Discord OAuth2
cd nestjs-oauth-discord
npm i
cd nestjs-oauth-discord-ui-angular
npm i
cd nestjs-oauth-discord-ui-vue
npm i
- go to Discord Developer Portal
- click 'New Application' button
- under OAuth2/General:
- add these URLs to Redirects:
http://localhost:18080/auth/discord
http://localhost:4200/home
- get 'Client ID' and 'Client Secret' for configuration
Configuration file: nestjs-oauth-discord/.env
- Set 'Client ID' and 'Client Secret' for backend in:
CLIENT_APP_ID=123......
CLIENT_APP_SECRET=Abc.....
-
Specify callback URL:
- for Angular frontend:
CALLBACK_URL=http://localhost:4200/home
OR (!!!)
- for Angular frontend:
CALLBACK_URL=http://localhost:18080/auth/discord
Add your Discord user to database File: nestjs-oauth-discord/src/users/users.service.ts:
constructor() { // change one of the below discord_id to your Discord ID, else you'll never be able to log in this.users = [ { userId : 1, // application level user ID (arbitrary unique) name : 'bob', // name (arbitrary) discord_id: '1234sfaf', // Discord ID of user }, ... }
Configuration file: nestjs-oauth-discord-ui-angular/src/environments/environment.ts Set 'Client ID':
clientAppId: '123.....',
Configuration file: nestjs-oauth-discord-ui-vue/.env Set 'Client ID':
DISCORD_CLIENT_ID=123.....
NOTE: Discord ID of the user can be retrieved from NestJS console log first time you try to login:
[Nest] 27580 - 04/01/2022, 11:32:25 PM [RouterExplorer] Mapped {/auth/discord, GET} route +3ms
[Nest] 27580 - 04/01/2022, 11:32:25 PM [NestApplication] Nest application successfully started +6ms
DiscordStrategy.validate(accessToken: FJEcnlwk20Xk8KvIBRkVOa46OrWETl)
Data from Discord: {
id: '1234sfaf', <<<<<<< this is Discord ID of a user
username: 'bob',
avatar: null,
discriminator: '5679',
public_flags: 0,
flags: 0,
banner: null,
banner_color: null,
accent_color: null,
locale: 'en-US',
mfa_enabled: false
}
cd nestjs-oauth-discord
npm run start
cd nestjs-oauth-discord-ui-angular
npm run start
Access: Angular application
cd nestjs-oauth-discord-ui-vue
npm run start
Access: VueJS application