Set up GitHub Authorization with Supabase

Lecturer: [0:00] we do here in order to log in with GitHub. What I'm going to do instead of just dumping the code in here is I'm going to make a new component.

[0:08] Here, in my directory, I'm just going to say right click New File, and I'm going to say components/auth.js. This is going to be a new auth component, which will contain all of the information for authorizing our user.

[0:22] Now, inside of this, this is going to be a pretty basic React component that has some form information in it. Let's create a new function called auth. For now, I'll return null, and then we'll export that from this function. Now, we know that we can use this here in index.js.

[0:39] Let's say import auth from components/auth. Then inside of here, let's replace this login button with the auth component. Of course, nothing will render here because it's null inside of our off component. Let's actually show something here. Let's just give it a div. Then inside of that we'll have a button which says log in with GitHub.

[1:07] There is our button. If we click it, nothing happens. Of course because we haven't given it any sort of functionality. Let's start thinking about how we want to do this.

[1:16] Here in our Supabase dashboard, where we've looked at our project before and modified the tables and things like that. If we come to the API section here, this will show you all of the information you need to do the basics of all kinds of different things in your Supabase application, including authentication, which is what we're trying to figure out right now.

[1:36] If we scroll down here, you can see that this is an example of creating a Supabase client which we've already done, and we've already exposed as part of our front-end application. If we come down to user management here, and then scroll down to login with third-party OAuth, you can see that there is already code written here for signing in with a provider.

[1:58] Let user or error, these are the two things that come back from this object. Then await Supabase.auth.signIn, passing in an object with provider set to GitHub. This is perfect. This is exactly what we need and we want to sign in with GitHub. Let's copy and paste this code and put it in our project.

[2:17] Inside of my code, I'm going to make a new function called sign in with GitHub. This is going to be an asynchronous function and I'm going to call this await Supabase.auth.signIn passing in provider in GitHub.

[2:32] Now, you might be wondering, where does the Supabase come from? We have it set up here inside of our index page. We have Supabse coming in as a prop. In order for the auth component to use it, we need to pass it as a prop into that component.

[2:49] I'll say, auth supabase=supabase. Then inside of here, in the auth component, I'll destructure it coming into that function. Now I can use it here, inside of the sign in with GitHub.

[3:04] In the default instructions for this code, it will show you that you can say, let user error=await supabase.auth.signIn. This is the default code that it provides. It lets you do things like look at what the user is, look at errors and things like that.

[3:21] One interesting thing about doing a third-party OAuth providers with Supabase is that you have to go through an entire third-party flow. As you'll see in a sec, when we click on this button, it will send us to GitHub. Then it'll send us back to this application.

[3:36] Because of that, we don't even need to hold on to the user or error variables, because this component isn't going to stay running, we're going to go to a different page. This is all going to get blown away in favor of whatever the third-party provider OAuth flow is. You might not quite understand what I mean yet.

[3:56] The conclusion here is that you can delete this code. We can make this a non-async function. Instead, we can simplify it to this supabase.signIn. It's simple. The only thing we need to do is, do something with this function. Let's copy this. In our button here, I'm going to say, onClick, call this sign in with GitHub function.

[4:21] It's simple. It doesn't know that much about auth. In fact, a more complicated version of this might do things like look at actual inputs for emails and passwords and things like that. Supabase makes it easy to call one of these providers and have them do everything for you, all the auth stuff that you don't care about or maybe don't want to do.

[4:42] Then all of your Supabase stuff is constrained to working with your specific data and managing your specific information. If we come back here into our application, and we click login with GitHub, you can see that I get redirected to the authorized Supabase example. That's awesome.

[4:58] This is exactly what we did all of that work for setting up our application earlier to make happen. It's a straightforward authorization workflow. If I authorize here, you can see I get redirected to localhost:3001. What happened? It looks like it tried to log in and was redirected back to the application. Ultimately, I'm still looking at login with GitHub. We're missing some piece here that's causing this to not fully work correctly.