Implementing OAuth in Nuxt with Supabase

Few years ago, I have tried to implement OAuth in my web application completely from scratch and I can assure you that it is not an easy task. In order to do that, you have to implement a flow in your web application that will be followed by both frontend and backend.

I finally managed to do it and it was working quite well but I wasn't happy about the fact that I needed to implement all of it from scratch even thought the process is relatively copy/paste for any web app.

Then, I found out about Supabase that does just that. And it is a pure DX magic.

In this article, I will show you how to implement OAuth in Nuxt with Supabase 🚀

Supabase

If you are not yet familiar Supabase, I have published an article few weeks ago about it that you can check out here

In it, I also explained why I think that it is my technology stack of dreams. Make sure to test it and let me know if you think the same :)

OAuth

To understand OAuth, I looked at the Wikipedia definition that is quite good IMO:

OAuth is an open standard for access delegation, commonly used as a way for internet users to grant websites or applications access to their information on other websites but without giving them the passwords. This mechanism is used by companies such as Amazon, Google, Facebook, Microsoft, and Twitter to permit users to share information about their accounts with third-party applications or websites.

Let's take a look at the following diagram to understand better how this standard works:

In the next section, we will be implementing this OAuth in Nuxt with Supabase to show how easy it is.

Code

We will be using @nuxtjs/supabase module to handle all the logic.

1. Let's install this module using your favourite package manager:

yarn add --dev @nuxtjs/supabase

1. Then, let's register the module in the modules array in nuxt.config.ts file:

export default defineNuxtConfig({
  modules: ['@nuxtjs/supabase'],
})

1. Now, add following environment variables to your .env file:

SUPABASE_URL="https://example.supabase.co"
SUPABASE_KEY="<your_key>"

Ok, we have Supabase connected. Now into the actual Authentication process and OAuth standard.

The useSupabaseClient composable is providing all methods to manage authorization under useSupabaseClient().auth. For more details please see the supabase-js auth documentation. Here is an example for signing in and out:

<script setup lang="ts">
const supabase = useSupabaseClient()

const signInWithOAuth = async () => {
  const { error } = await supabase.auth.signInWithOAuth({
    provider: 'github',
    options: {
      redirectTo: 'http://localhost:3000/confirm',
    },
  })
  if (error) console.log(error)
}

const signOut = async () => {
  const { error } = await supabase.auth.signOut()
  if (error) console.log(error)
}
</script>

Let's stop for a second here to explain each step individually:

1. We are calling useSupabaseClient composable to create local instance of supabase.
2. In signInWithOAuth method we are calling supabase.auth.signInWithOAuth method and destructuring an error object that can be used to handle errors.
3. As options for the signInWithOAuth method, we are passing provider with value github and options.redirectTo with the value of http://localhost:3000/confirm. This /confirm endpoint is actually registered in the module configuration by default thanks to the following default options:

  redirectOptions: {
    login: '/login',
    callback: '/confirm', // <--
    exclude: [],
  }

If you wish to have a different callback after auth, make sure to configure it in the module configuration as well.

1. If there is an error, we are logging it in the console.

For the signOut, the situation is similiar but even simpler as we do not need to pass any providers or configuration. We just call supabase.auth.signOut and thats it. This is a pure magic!

If you would like to see a demo of application that utilizes this OAuth standard, check out the following website here

There is also a video that you can check here

Resources

• https://supabase.nuxtjs.org/
• https://levelup.gitconnected.com/implementing-google-oauth-sign-in-in-nuxtjs-a-step-by-step-guide-c37a737f96e4 (this one uses Sidebase and Google instead of Supabase and GitHub as in this article)