Implementing OAuth in Nuxt with Supabase
Tags: nuxt, vue, javascript, webdev
Published: 2023-08-07 07:40:07

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](https://www.supabase.com) 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](https://dev.to/jacobandrewsky/nuxt-supabase-technology-stack-of-dreams-4dop)

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:

![OAuth](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/saixepak3vpzwf1iha2k.png)

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:

```bash
yarn add --dev @nuxtjs/supabase
```

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

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

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

```bash
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](https://supabase.com/docs/reference/javascript/auth-api). Here is an example for signing in and out:

```ts
<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:

```ts
  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.

4. 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](https://n3-supabase.netlify.app/)

![Nuxt OAuth With Supabase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fz2qmgb9fijeuirvb921.png)

There is also a video that you can check [here](https://www.youtube.com/watch?v=jIyiRT6zT8Q)

## 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)