Supabase

Nuxtbe utilizes Supabase for authentication, data storage and edge functions. The Kit ships with all the relevant migration files, edge functions and webhooks. Here you can find the instructions on how to configure Supabase for your project.

Supabase project setup

First step is to create a Supabase account and project. In order to do this, you need to follow these steps:

1. Create a Supabase account.
2. Create a new project in the Supabase Dashboard.
3. Enter your project details.
4. Wait for the new database to launch.

Installing the Supabase CLI

Before we get started we need to install the Supabase CLI. You can find the details in the Supabase CLI documentation.

Supabase Database setup

Project ID can be found on the API Settings page in the Supabase Dashboard.

Under the supabase/migrations directory, you can find the SQL file which is used to create the database tables. All you need to do is to run the following command to apply the migrations:

npx supabase db push

pnpm dlx supabase db push

bunx supabase db push

supabase db push

This will create the tables needed for authentication and other features as well as functions and triggers needed for the application to work.

Supabase Auth setup

Supabase supports Email/Password authentication by default. But in order to use Oauth authentication or Magic Link authentication, you need to do some configuration in the Supabase Dashboard.

Please read the Supabase Auth documentation on how to set up third-party providers.

After you have set up the providers, you can use oauth authentication using example method in the pages/sign-in.vue file called signInWithOAuth.

Supabase Edge Functions/Hooks setup

Nuxtbe comes with a set of edge functions that are used to handle authentication and post-login emails. You can find them in the supabase/functions directory. You can deploy them by running the following command:

npx supabase functions deploy <function_name>

pnpm dlx supabase functions deploy <function_name>

bunx supabase functions deploy <function_name>

supabase functions deploy <function_name>

supabase functions deploy send-auth-mail-hook --no-verify-jwt

After you have deployed all the functions, you can find them in the Supabase Dashboard under the Edge Functions tab.

Next step is to configure the webhook for sending authentication emails. To do this, you need to go to the Hooks tab in the Supabase Dashboard and create a new Send Email hook. Hook type should be HTTPS, and url should look like this:

https://[your-project-id].supabase.co/functions/v1/send-auth-mail-hook
# You can get <project-id> from your project's dashboard URL: https://supabase.com/dashboard/project/<project-id>

This url will point to the send-auth-mail-hook function which sends custom emails to the user during the authentication process. Then generate the webhook secret and add it to the Edge Function Secrets page.

You need to add the hook secret SEND_EMAIL_HOOK_SECRET and Resend API key RESEND_API_KEY to the Edge Function Secrets Management page.

Also you need to add the BASE_URL variable to the Project Variables page.

Next, let's configure automatic user profile creation on first login. Follow these steps:

1. Navigate to Database Webhooks in the Supabase Dashboard
2. Create a new webhook with the following settings:
   • Table: users
   • Trigger: insert
   • Type of webhook: Supabase Edge Function
   • Function: user-created-hook
3. Add HTTP Header by:
   • Clicking "Add a new header" in "HTTP Headers" section.
   • Selecting Add auth header with service key from the dropdown. Dropdown will be visible if you've chosen Supabase Edge Function webhook type.
   • This will automatically add the header Authorization: Bearer <your-service-key>
   • Click on the "Create webhook" button to save the changes.

Supabase custom SMTP setup

To use custom SMTP for sending emails, you need to add SMTP credentials to the Project Variables page.

For production use, it's highly probable that you will want to change rate limits for the SMTP service. It can be found here: SMTP Rate Limits.

Project variables configuration

To link your Supabase project to the application, you need to configure the supabase credentials in the .env file located in the root of the project.

SUPABASE_URL=your-project-url
SUPABASE_KEY=your-anon-key
SUPABASE_SERVICE_KEY=your-service-key

Those keys can be found on the API Settings page in the Supabase Dashboard.

Supabase module configuration

You can configure the Supabase module in the nuxt.config.ts file. By default, the module is configured to redirect users to the /sign-in page when they are not authenticated. You can customize this behavior by modifying the redirectOptions property. To exclude certain routes from authentication, you can use the exclude property.

export default defineNuxtConfig({
 ...
 supabase: {
    redirectOptions: {
      login: '/sign-in',
      callback: '/api/auth/callback',
      exclude: [
        '/',
        '/privacy-policy',
        '/terms-of-service',
        '/license',
        '/contact',
        '/faq',
        '/pricing',
        '/sign-up',
        '/forgot-password',
        '/sign-in-otp',
        '/error',
      ],
      cookieRedirect: true,
    },
  },
})