From the course: Supabase Essential Training

Discord authentication

From the course: Supabase Essential Training

Start my 1-month free trial Buy for my team

Discord authentication

“

- [Instructor] Beyond using email addresses and passwords for authentication, many people use their existing accounts on popular platforms such as Google, Facebook, and Discord. Let's take a look at how to set up Discord with Supabase for authentication. Discord is a chat service popular with gaming and coding communities. You can create a Discord server for free, then configure it to serve as an authentication method for Supabase. So I already have this Discord account set up with my Kitchen Supply company website, and then it has an application ID down here and also some information for OAuth2. This is where you would get your client ID and secret for the configuration in Supabase. I'm going to go back to the Supabase panel. And now let's scroll down to Discord and I already have Discord enabled and I copied the client ID and Client Secret from the Discord panel here into Supabase. Then I copied the callback URL from Supabase, into the Discord configuration. I've created an Express.js app that implements this authentication system with Discord and Supabase. So let's have a look at the code. First, we have a client, that we are pulling in through the CDN. It's the Supabase client. You can pull this in through MPM or package manager if you prefer. Then we are creating an instance of that client with our Supabase URL and public key. Next we have a form handling function, and that is going to call sign in with Discord. Sign in with Discord takes our client and calls the sign in with OAuth function. With our sign in, with OAuth function, we're specifying Discord as the provider. Then we're also waiting for the HTML document to be ready and we're getting the user. This is important because once we have signed in, we want to greet the user with their email address. We don't want to display the login button again. And then there's one more piece here in the backend of this Express app. I adapted this code from the Supabase documentation. This is code that accepts a callback after we've passed through Discord. Once we call this endpoint, we are parsing the cookie and then setting the cookie. Then that way, once we're redirected back to the page, we have the cookie available and we're able to look up the user through the Supabase client. Let's start this server now. Alright, and let's go to the customer area. I'm going to log in with Discord, and then I'm going to click authorize. And now I'm greeted by my email address. Using Discord or other authentication providers, gives your users a convenient method of logging in without creating more passwords. Remember that setting up a provider, may involve an approval process, so plan accordingly.

Contents