Name: Set up GitHub Authorization with Supabase
Uploaded: 2021-08-02T13:42:17-05:00
Description: In this lesson, we'll integrate the GitHub provider to allow the users to log in with their GitHub credentials. We'll also build the UI for this authorization, which will take us to the third-party provider.

Create a New Supabase Project

Navigate the Supabase Admin Interface

Create PostgreSQL Tables Using Supabase's Interface

Configure Supabase Auth to Allow Users to Login with GitHub

Use Triggers to Automatically Update Supabase Tables

Set up a Supabase Client in Next.js

Set up a Login Page in Next.js with Supabase's auth.session()

Set up GitHub Authorization with Supabase

Manage Third-Party Authorization Errors in Supabase

Executing Raw SQL using Supabase's Interface

Retrieve Data with a Supabase API Request

Subscribe to Database Changes using Supabase's Realtime Client

Enable Realtime Only for Individual Tables using supabase_realtime

Insert Submitted Data to Supabase Tables

Keep Track of the Current User Using Next.js with Supabase

Logout and Update Users with React and Supabase's upsert Method

Request User Details for a Given User Using Supabase's API

Retrieve and Displaying User Details with User Subscriptions

Deploy a Supabase Application to Production with Cloudflare Pages

Building Supabase Serverless Workflows with Cloudflare Workers

Build a Real-Time Data Syncing Chat Application with Supabase and Next.js

In this lesson, we'll integrate the GitHub provider to allow the users to log in with their GitHub credentials. We'll also build the UI for this authorization, which will take us to the third-party provider.

https://app.egghead.io/api/v1/lessons/javascript-set-up-github-authorization-with-supabase/subtitles

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.

Set up GitHub Authorization with Supabase

Share this video with your friends

Course

Build a Real-Time Data Syncing Chat Application with Supabase and Next.js