Use discord credentials when interact with backend when they exist

[fozziethebeat]

When a user logs into the website, we store their Discord credentials. When they exist, we should use those instead of the websites local auth identifier so that their website and discord contributions are all associated with the same ID.

This should improve the code the following api handlers to ensure this is done properly.

• website/src/pages/api/new_task/[task_type].ts
• website/src/pages/api/update_task.ts

The fix should be pretty simple and could be done with a little library code.

[KarthikRaju391]

Hey @fozziethebeat, can I work on it?

[yk]

hey @KarthikRaju391 thanks a lot for wanting to contribute! could you write down a short plan, like a few steps on what you'd do? I can assign you after that

[KarthikRaju391]

Sure @yk, based on what I understood, we want to ensure that when a user is logged in using Discord, their Discord credentials should be used on their websites instead of the local auth identifiers. So, I will have to change the frontend code to use the Discord credentials that have already been saved instead of the locally generated ones which will include figuring out the API requests and making changes accordingly. I have to say that I am not sure if I have understood it correctly, but I am willing to learn. Let me know what you think. Thanks!

[yk]

sounds like a plan :)

[KarthikRaju391]

Hey @yk, I have set up the frontend successfully. Although, I was only able to sign in using email and not discord. Is there a way to login using discord?

[fozziethebeat]

yes, this one just requires rewriting a little bit of code.

To get discord credentials, I suggest going to https://discord.com/developers/applications and then

1. Create a test app (name it whatever)
2. Go to the OAuth2 page within the app
3. Copy over the client id and client secret
4. Put those in a .env.local file under two environment variable names: DISCORD_CLIENT_ID and DISCORD_CLIENT_SECRET (I apparently didn't document this so my apologies for it being confusing).
5. Then you can load up the website and should be able to login.

[KarthikRaju391]

Hey @yk, I did set up discord client id and secret. I am able to see Continue with Discord but I am not able to login with it. Is there something I am missing?

[KarthikRaju391]

Update: I got the discord authentication working. There was a mistake in the signin.tsx file. In the signin method for discord, we have to do it the following way:

     const signinWithDiscord = () => {
         signIn("discord", { callbackUrl: "/" })
     }

the first argument is a string and earlier it was just using the discord object

Also, the following might be important to add to the documentation: We need to specify the Redirects in the OAuth2 section in https://discord.com/developers/applications/ as http://localhost:3000/api/auth/callback/discord

[KarthikRaju391]

Although, now it is not redirecting to the homepage after logging in with discord.

[yk]

Hey @KarthikRaju391 nice work, sorry I missed your first request. Could you include the update to the docs that you envision in your PR?

[fozziethebeat]

+1 to adding this explanation to the docs.

Can you make a screen recording of your attempt to login via discord? It works with the credentials I created but it's possible there's another discord step needed to make this work that I forgot about already.

[KarthikRaju391]

@fozziethebeat, I don't have my laptop right now, can I send the video recording by 11pm IST? Also, I'll add the explanation to the docs by then. Extremely sorry for the inconvenience. Is there any steps I need to follow to update the documentation?

[yk]

no worries :) not really, just add it to the discord-bot/README.md where you feel it's appropriate

[KarthikRaju391]

Thanks @yk!

[KarthikRaju391]

Hey @yk, since I am not able to login through discord, I have not yet been able to make the UI changes to show the discord credentials instead of the local credentials. Once, I get to know the fix for the discord login, I can go ahead. Should I still make a PR for the documentation changes?

[KarthikRaju391]

https://www.loom.com/share/0d3512ae27994e91b61fc85287403d8e This is what is happening when I try to login using discord @fozziethebeat

[yk]

Once, I get to know the fix for the discord login, I can go ahead. Should I still make a PR for the documentation changes?

no stress, if you want, it can all go in one PR once it's ready. but two PRs is also fine, up to you :)

[fozziethebeat]

I see what the problem was. Can you reset your database and then try logging in via discord again?

My guess is that you logged in before with email credentails and then tried logging in via discord credentials. NextAuth doesn't let you do that by default. Our custom signin page doesn't present the error the same way that NextAuth's default signin page does. I filed #224 to better handle this issue.

You can side step that for now by resetting the webdb (most easily by doing docker compose down and then docker compose up frontend-dev followed by npx prisma db push).

[KarthikRaju391]

Oh yes, I totally forgot about restarting docker. I will work on it now. Thank you @fozziethebeat

[KarthikRaju391]

@yk, the website is now showing discord credentials when a user is logged in through discord. But as mentioned in #224, what if we a user already logged in via email and wants to add their discord account too? I found a similar request in this reddit form but it was a bit confusing. Also, I had to make changes to next.config.js to accept the discord user avatar as the src for the Image component.

[fozziethebeat]

We're treating that problem as a separate issue in #106. You don't need to handle that situation in this issue.

We can also skip dealing with the discord avatar in the website for now. That's a nice to have but the important part is that when the web api handler is talking to the backend, it's sending the user's discord ID instead of the website generated ID.

[KarthikRaju391]

@fozziethebeat, regarding the API handler, right now, discord ID is being used.

But I am getting the following error in prisma when trying to make the API requests.

[fozziethebeat]

Can you inspect the contents of your database by running npx prisma studio and see what's in the User table?

What is this log statement emitting? Is this the user token gotten in the handler?

[KarthikRaju391]

Yes it is the user token

[KarthikRaju391]

@fozziethebeat, I checked the contents of the database and nothing is being stored in User table.

[fozziethebeat]

When you restarted the docker setup and reset the database, did you log out of the website and then log back in?

The website uses JSON Web Tokens and so the issue is that the database has been reset but your JWT doesn't know it's invalid. You have to sign out and sign back in every time yo wipe the database clean.

[KarthikRaju391]

@fozziethebeat, I reset the database again and I am able to make API requests without any problems. Should I make the pull request now?

[fozziethebeat]

Sure! If the rest of the changes look good, prepare the PR, make sure the pre-commit checks all pass and then I'll take a look.

[KarthikRaju391]

Hey, @fozziethebeat, I synced the fork before committing and am having merge conflicts. How should I deal with them?

[fozziethebeat]

I recommend following the guidance in this guide regarding pulling in changes from the main branch.