Implement Third Party Authentication with GitHub in Next.js Using Supabase
Supabase offers a number of authentication options out of the box. In this video, we look at implementing third party auth using GitHub as a provider.
In order to do this, we need to register a new OAuth application in GitHub, and configure it to communicate with our Supabase project. Supabase automatically handles receiving tokens at the /auth/v1/callback endpoint.
Additionally, we implement /login and /logout pages to handle authentication in our Next.js application. We can use the supabase-js library to detect whether or not a user is signed in using the supabase.auth.user() function.
Instructor: [0:00] Currently, our application displays public data. If we want to add some additional information for our subscribed users, we're going to need them to authenticate with our application. I'm going to have my users sign in with GitHub, but Supabase does offer us a collection of third-party logins.
[0:13] Let's head over to GitHub and go to our User Settings. We want to scroll down and click Developer Settings. We want to select OAuth Apps and create a new OAuth app. I'm going to keep the name of our application consistent, so Supabase-SaaS.
[0:28] Then, our home page URL is going to come from Supabase, under settings/api, and then our URL. Then, our authorization callback URL is going to be that Supabase URL /auth/v1/callback. Now we can register our application. This will give us our client ID and client secrets that we need to enter into Supabase.
[0:50] If we go over to Auth Settings and then scroll down, I'm going to disable email signup. I'm also going to disable email confirmations. Under the external OAuth providers, I'm going to enable GitHub. You'll see I need to enter in my client ID and secret. We'll need to generate a new client secret. Now when we scroll down, we can click Copy. When I click Save, Supabase is now configured to use GitHub.
[1:20] Let's implement that in our application. I'm going to create a simple Login page. I'm going to import useEffect from React and our Supabase Client. When our component mounts, we would like to call Supabase.auth.signin and pass it a configuration object with the key provider set to GitHub.
[1:47] If we navigate to our Login page, you'll see that it redirects us to GitHub to authorize this application and then passes us back to the Landing page. We can check our user has successfully signed in by going back to our index.js page and console logging out Supabase.auth.user.
[2:04] If we refresh our application and open up the console, we'll see that we have that user complete with all of the information from GitHub. If we want to be able to sign our user out, we need to create a Logout page. Again, bring in useEffect and our Supabase client.
[2:25] Again, we want to run this logic on mount. Only this time, we want to wait for that sign out logic to complete, which means we need to put it in its own async function. Once the user has successfully signed out, we want to redirect them to the Landing page.
[2:41] We're also going to import useRouter from Next.js Router. We can initialize our router before our useEffect runs. Then, inside our Logout function, we can call router.push, and navigate the user to our Home page. Lastly, we just need to call our function.
[2:57] Now, when I refresh our application, we can see we have a user. If I navigate to our new logout route, our user is signed out.
Excellent call out! Thanks! 🙌
BTW, you may need to restart your Next.js dev server whenever you add new variables to .env.local.