Subscribe

Next.js Supabase adding a GitHub login

✍️

How to add a GitHub login to Next.js using Supabase social authentication

11 Dec, 2021 · 3 min read

Now that we have our basic Supabase auth setup with our magic link login let’s see how we can add GitHub as a login provider.

That way, users can also sign up by using their GitHub accounts.

The result will be the following flow:

Getting the GitHub tokens

The first thing we need to do is create an app on GitHub to get the API token from there.

Go to the GitHub developer center and create a new OAuth app.

GitHub new OAuth app

You’ll need to fill out the details on the next step. To find your Authorization callback URL, visit the Supabase interface.

The URL we need is the following one:

Supabase API URL

However, you’ll have to add the following to the end of this URL: /auth/v1/callback.

My end URL looks like this:

https://texcivmahyzsgwyjdvvj.supabase.co/auth/v1/callback

Finish creating this OAuth app on GitHub. You should get a page where you have to generate a new secret.

Generate secret in GitHub

Once you generate the secret, note this down and the client id.

And then head back over to Supabase. Click the Authentication menu and visit the settings.

Here you can enable all separate providers. In our case, we want GitHub.

GitHub provider in Supabase

Fill out the client id and secret as you just retrieved them from GitHub.

Adding the GitHub login to Next.js

Now it’s finally time to open our Next.js application. We’ll be using the one we made before. Which you can find on GitHub.

Open up the components/Login.js component. Let’s start by adding the function that will authenticate the user.

We can use the loading state we created before.

const handleGitHubLogin = async () => {
  try {
    setLoading(true);
    const { error } = await supabase.auth.signIn({
      provider: 'github',
    });
    if (error) throw error;
  } catch (error) {
    alert(error.error_description || error.message);
  } finally {
    setLoading(false);
  }
};

And now, all we need to do is render the button in our HTML.

<button
  className='mt-4 p-2 pl-5 pr-5 bg-blue-500 text-gray-100 text-lg rounded-lg focus:border-4 border-blue-300'
  onClick={() => handleGitHubLogin()}
  disabled={loading}
>
  {loading ? 'Logging in' : 'Login with GitHub'}
</button>

And that’s it! We can now log in through GitHub and still enrich our profile.

You can download the complete code on GitHub.

Thank you for reading, and let’s connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

Next portfolio - Filter by category

30 Nov, 2022 · 5 min read

Next portfolio - Filter by category

A glance at Turbopack

17 Nov, 2022 · 3 min read

A glance at Turbopack

Join 2099 devs and subscribe to my newsletter