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.
- Let's install this module using your favourite package manager:
yarn add --dev @nuxtjs/supabase
- Then, let's register the module in the
modules
array innuxt.config.ts
file:
export default defineNuxtConfig({
modules: ['@nuxtjs/supabase'],
})
- 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:
- We are calling
useSupabaseClient
composable to create local instance of supabase. - In
signInWithOAuth
method we are callingsupabase.auth.signInWithOAuth
method and destructuring an error object that can be used to handle errors. - As options for the
signInWithOAuth
method, we are passingprovider
with valuegithub
andoptions.redirectTo
with the value ofhttp://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.
- 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)
Top comments (0)