How to add Github oAuth in Nextjs with Supabase Auth | Login with Github

In this blog, we will learn how to add Github oAuth to your Nextjs app with Supabase Auth. I will cover:

• Setup a github oAuth app for oAuth
• How to add github oAuth to your Nextjs app using server actions and compnents

You can watch the video tutorial here for better understanding.

Setup nextjs with supabase

You can check this blog to learn how to setup nextjs with supabase.

Setup a github oAuth app

• Go to Github settings -> Developer settings -> OAuth Apps -> New OAuth App

Add the following details:

• Application name: Your app Name
• Homepage URL: Your app URL

• Callback URL:

  • Go to supabase dashboard -> Auth -> Providers -> Github
  • Enable and copy the callback url. This is the redirect uri.

• Click Register application and copy the Client ID and Client Secret and paste it in supabase dashboard -> Auth -> Providers -> Github.

Create a server action to add github oAuth

• Create a new file src/utils/actions.js and add the following code:

'use server'
import { createClientForServer } from '@/utils/supabase/server'
import { redirect } from 'next/navigation'

const signInWith = provider => async () => {
  const supabase = await createClientForServer()

  const auth_callback_url = `${process.env.SITE_URL}/auth/callback`

  const { data, error } = await supabase.auth.signInWithOAuth({
    provider,
    options: {
      redirectTo: auth_callback_url,
    },
  })

  if (error) {
    console.log(error)
  }

  redirect(data.url)
}

export const signinWithGithub = signInWith('github')

Explanation:

• We call the signInWithOAuth method with the provider github and the auth_callback_url.
• Auth callback url is the url where the user will be redirected after the login. <domain>/auth/callback.

• We redirect the user to the data.url which is the github login page.

• Create a new file src/apps/auth/callback/route.js for an api route and add the following code:
  

import { NextResponse } from 'next/server'
// The client you created from the Server-Side Auth instructions
import { createClientForServer } from '@/utils/supabase/server'

export async function GET(request) {
  const { searchParams, origin } = new URL(request.url)
  const code = searchParams.get('code')
  // if "next" is in param, use it as the redirect URL
  const next = searchParams.get('next') ?? '/'

  if (code) {
    const supabase = await createClientForServer()
    const { error } = await supabase.auth.exchangeCodeForSession(code)
    if (!error) {
      const forwardedHost = request.headers.get('x-forwarded-host') // original origin before load balancer
      const isLocalEnv = process.env.NODE_ENV === 'development'
      if (isLocalEnv) {
        // we can be sure that there is no load balancer in between, so no need to watch for X-Forwarded-Host
        return NextResponse.redirect(`${origin}${next}`)
      } else if (forwardedHost) {
        return NextResponse.redirect(`https://${forwardedHost}${next}`)
      } else {
        return NextResponse.redirect(`${origin}${next}`)
      }
    }
  }

  // return the user to an error page with instructions
  return NextResponse.redirect(`${origin}/auth/auth-code-error`)
}

This code is just copied from the Supabase docs. It exchanges the code for a session and redirects the user to the website. And finally user will be logged in logged in.

Now add the UI:

import { signinWithGithub } from '@/utils/actions'

const Component = () => {
  return (
    <form>
      <button className='btn' formAction={signinWithGithub}>
        Sign in with Github
      </button>
    </form>
  )
}

That's it. Now you have added github oAuth to your Nextjs app with Supabase Auth. You can now get the user session data and use it in your app.

If you have any questions, feel free to ask in the comments.
I am looking for a new job opportunity. Please feel free to contact me if you or your team are hiring.

Contacts:
Email: [e-mail]
Portfolio: https://thatanjan.com/
Linkedin: https://www.linkedin.com/in/thatanjan/
Github: https://github.com/thatanjan/

Next, you can check these videos:

Happy coding! 🚀