Full Stack Github Authentication with Supabase and React
In this video we'll build out an entire GitHub OAuth authentication flow from scratch using Supabase and React. We'll first create a new Supabase project. Next, we'll configure a new OAuth application in the GitHub console, using the Supabase project URI. Finally, we'll create and wire up a React front end to handle the authentication flow, managing the local user state to show and hide UI based on the authentication state of the current user.
Instructor: [0:00] In this video, we're going to build out GitHub authentication in a React application using Supabase. To get started, we'll visit app.supabase.io, sign in, and then click New project. Here, we'll give the project a name and password and then click Create new project.
[0:21] Once the project's been created, we'll click on Settings and then API and then copy the config URL to our clipboard. Next, we'll go to GitHub and open our Settings. Here, we can click Developer settings and then OAuth Apps. Here, we can register a new OAuth application, giving the application a name and a home page URL of localhost:3000.
[0:58] For the callback URL, we can use our Supabase URI appended with /auth/v1/callback. Once the application's been registered, we'll be given a client ID. Click Generate a new client secret to generate a client secret.
[1:14] Back in the Supabase dashboard, we can configure this new application. Here, we'll click on Authentication and then Settings and then toggle GitHub enabled. In the GitHub configuration, we can now paste in our GitHub client ID and client secret.
[1:38] Once we've saved this new configuration, we can open up our terminal and start building out the frontend. Here, we'll use npx to create a new React application. Next, we'll change into the new directory and install @supabase/supabase-js.
[2:11] Now, we can open up the project in our text editor. The first thing we'll do here is create a client.js file in the src directory. Here, we'll be configuring our Supabase client. Here, we'll import createClient() from Supabase and then create a new variable called supabase, calling createClient(), passing in two empty strings.
[2:39] CreateClient() takes in two arguments -- one for the Supabase URI and the other for the anonymous public key. We can get those values by clicking on Settings and then API in the Supabase dashboard.
[2:59] Next, let's open src/App.js. Here, we'll start by deleting some of this boilerplate code. We'll import useState() and useEffect() from React to manage local state and deal with lifecycle methods. We'll also import the Supabase client that we created in the previous step.
[3:40] In the app component, we'll create some local state to manage the user state. We'll then configure useEffect(). Here, we'll be needing to call a function called checkUser(), which we'll create, and we'll populate later. We'll also add a window event listener for hashchange so that we can detect when the OAuth redirect has happened and then recalling checkUser() on redirect.
[4:15] In the checkUser() function, we can call supabase.auth.user() and then call the setUser() function, passing in the user returning from Supabase. The signInWithGitHub() method will call supabase.auth.signIn(), setting the provider as GitHub.
[4:41] Finally, we'll create a function called signOut() that will call supabase.auth.signOut() and then update the local state of the user, setting it to null. In our UI, we can now check if the user exists. If it does, we can say, "Hello, user.email," and then giving them an option to sign out.
[5:08] If the user does not exist, we say, "Hello. Please sign in," and then give them a button to sign in with GitHub. We can now test this out by opening our terminal and running npm start. When we click Sign in, we're redirected to GitHub to authenticate.
[5:36] Once we've authenticated, we're now redirected back to our local application. We can also log out the user information to take a look at the metadata returned from Supabase.