Settings

sb-kit supports the following auth flows:

Password-based login with email OTP
Social login (OAuth)

This guide covers how to set up and connect each flow using the Supabase Dashboard and the sbKitClient.

Supabase Settings

To use password-based login with email OTP, follow these steps in the Supabase Dashboard:

Set up the email and password auth policy
Go to Auth > Sign In / Providers > Email.

Set up things like the minimum password length, password requirements, and OTP length. We’ll cover how to sync these with sb-kit later.
Configure Email Templates and custom SMTP
Go to Auth > Emails.

Refer to the Supabase Docs to configure a custom SMTP server. Then Customize email templates for Confirm signup and Reset password using {{ .Token }} variable.
Set URL Configuration
Go to Auth > URL Configuration.

Set the Site URL and Redirect URLs. See Supabase Docs for detailed guidance.

Password Setup — (sb-kit default) Email and password auth policy

Reset Password — (example) Reset password template

When integrating social login with sb-kit, there’s nothing different from the official Supabase setup. Just follow the official documentation as is.

sb-kit Settings

/lib/supabase/sb-kit.ts

import { sbKitClient } from '@sb-kit/core';

import { middlewareClient } from './client/middleware';
import { serverClient } from './client/server';

export const sbKit = sbKitClient({
  supabaseClients: {
    server: serverClient,
    middleware: middlewareClient,
  },
  options: {
    passwordPolicy: {
      minLength: 8,
      passwordRule: 'letters-digits',
    },
    emailOtpLength: 6,
  },
});

Option	Description
`passwordPolicy`	Match this with the Minimum password length and Password requirements settings in your Supabase dashboard.
`emailOtpLength`	match this with the Email OTP Length setting in your Supabase dashboard.

/lib/supabase/sb-kit.ts

import { sbKitClient } from '@sb-kit/core';

import { middlewareClient } from './client/middleware';
import { serverClient } from './client/server';

export const sbKit = sbKitClient({
  supabaseClients: {
    server: serverClient,
    middleware: middlewareClient,
  },
  options: {
    oauthProviders: {
      github: {
        buttonText: 'Continue with GitHub',
      },
    },
  },
});

Option	Description
`oauthProviders`	After configuring the providers you want to use in the Supabase dashboard, define each one here with its own `buttonText`.

Route & Redirect Settings

/lib/supabase/sb-kit.ts

import { sbKitClient } from '@sb-kit/core';

import { middlewareClient } from './client/middleware';
import { serverClient } from './client/server';

export const sbKit = sbKitClient({
  supabaseClients: {
    server: serverClient,
    middleware: middlewareClient,
  },
  options: {
    authRoutes: {
      signIn: '/signin',
      signUp: '/signup',
      forgotPassword: '/forgot-password',
      setPassword: '/set-password',
      oauthCallback: '/api/auth/callback',
    },
    redirectPolicy: {
      defaultPathAfterAuth: '/',
      allowedHosts: ['localhost:3000'],
      blockedPaths: ['/api/auth/callback'],
    },
    routeGuardPolicy: {
      onlyPrivate: [],
      onlyPublic: [],
    },
  },
});

Option	Description
`authRoutes`	Defines the routes used by sb-kit for authentication. Defaults are shown above.
`redirectPolicy`	When a `redirect_to` query parameter is present in the URL, users will be redirected to that path only if the host is in `allowedHosts` and not in `blockedPaths`. If `redirect_to` is not present, the user will be redirected to `defaultPathAfterAuth`. Defaults are shown above.
`routeGuardPolicy`	Protects routes based on authentication state in middleware. Unauthenticated users are blocked from `onlyPrivate` routes, and authenticated users are blocked from `onlyPublic` routes.

Settings

Supabase Settings

Password-based login with email OTP

Social login (OAuth)

sb-kit Settings

Password-based login with email OTP

Social login (OAuth)

Route & Redirect Settings

On this page