Authentication can be tricky to implement, but it lets us do so much in our apps.

In this series, we’ll be covering how to use Supabase with Nuxt 3 to add auth to our apps:

1. Setting up Supabase Auth with Nuxt 3 👈 we’re here
2. Logging in and out with Github
3. Protecting Routes
4. Protecting Server Routes

In this first article, we’ll go over how to set up Supabase in our Nuxt project.

Here are the main steps we’ll cover in this article:

1. Create the Supabase project
2. Set up the Github OAuth app
3. Install the Nuxt 3 Supabase module
4. Adding in our environment variables

1. Create the Supabase Project

The first step is to create our project in Supabase.

Head over to supabase.com:

• Sign in using Github
• Click on New project to create a project
• Save the Database password somewhere safe if you plan to use the database in the future We don’t need this to get authentication working, and it can be easily reset later on if you forget it.
• Click Create new project

Now, you just wait! It can take a few minutes for Supabase to initialize everything your project needs.

Next, we need to set up Github as an OAuth provider:

• On the left side nav go to Authentication and then Providers — you’ll see a big list of all the possible providers we can use
• Scroll down and expand the Github section
• Enable Github and then copy the redirectURL — we’ll need it for when we set up the Github OAuth app

Keep the Github settings open in a tab, since we’ll need it shortly.

2. Setup the Github OAuth App

Next, we’ll configure a Github OAuth app that will allow our Supabase project to connect with Github on behalf of our users.

In a new tab, go to the OAuth Apps settings: https://github.com/settings/developers

• You can also get here by going to your settings, then Developer Settings at the very bottom, and then clicking on OAuth Apps

We’ll create a new OAuth App:

• Click Create OAuth App
• Put the name of your app in Application Name
• Put the URL of your app in Homepage, or the redirectURL — this part doesn’t affect the auth process
• Use the redirectURL we copied from Supabase for the Authorization Callback URL
• Click Register Application to create it

Before moving on, we need to grab two values:

• Client ID — we can always find this here
• Client Secret — click on Generate a new client secret. To keep things secure, Github will only show this value to us once. Copy this value down or keep the tab open.

Github also has great documentation for creating OAuth Apps.

Now we’ll take the two values from our Github App and use them to configure our Supabase Github provider:

• If you closed the tab, go back to the Github Provider settings in Supabase by going to Authentication and then Providers, then scroll down and expand the Github section
• Copy over both Client ID and Client Secret into the settings
• You can now close the Github tab — we’ll need some Supabase values shortly, and we no longer need the Client Secret

3. Install the @nuxtjs/supabase module

The Supabase module for Nuxt 3 handles SSR and some other things for us, so it’s convenient to have.

Install and configure the module:

• Install by running pnpm add -D @nuxtjs/supabase — or the relevant command for whichever package manager you like
• Add the module to nuxt.config.ts

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

4. Add in the environment variables

We’re nearly there, we just need to connect our Supabase project to our Nuxt 3 app.

We do this through some environment variables:

• Create .env at the root of your directory — this is where all your environment variables live

• Add SUPABASE_URL and SUPABASE_KEY to your .env file

  SUPABASE_URL="<URL>"
  SUPABASE_KEY="<anon>"
  

• In Supabase go to Project Settings then click on the API section

• Grab the URL under Project URL and add it as the SUPABASE_URL

• Grab the anon key under Project API Keys and add it as the SUPABASE_KEY

Wrapping Up

At this point we have a Nuxt 3 app with Supabase and Github configured exactly how need.

The next step is to use the Supabase API to log in and out of our app, which is what we’ll cover in the next article in this series.