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:
- Setting up Supabase Auth with Nuxt 3 👈 we’re here
- Logging in and out with Github
- Protecting Routes
- 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:
- Create the Supabase project
- Set up the Github OAuth app
- Install the Nuxt 3 Supabase module
- 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 thenProviders
— 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
, thenDeveloper Settings
at the very bottom, and then clicking onOAuth 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 theredirectURL
— this part doesn’t affect the auth process - Use the
redirectURL
we copied from Supabase for theAuthorization Callback URL
- Click
Register Application
to create it
Before moving on, we need to grab two values:
Client ID
— we can always find this hereClient Secret
— click onGenerate 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 thenProviders
, then scroll down and expand theGithub
section - Copy over both
Client ID
andClient 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
@nuxtjs/supabase
module
3. Install the 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
andSUPABASE_KEY
to your.env
fileSUPABASE_URL="<URL>" SUPABASE_KEY="<anon>"
-
In Supabase go to
Project Settings
then click on theAPI
section -
Grab the
URL
underProject URL
and add it as theSUPABASE_URL
-
Grab the
anon
key underProject API Keys
and add it as theSUPABASE_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.