Supabase Integration

Supabase is an open-source Firebase alternative that provides Backend-as-a-Service (BaaS) features, including databases, authentication, storage, and real-time functionality, helping developers quickly build applications.

In the Next.dev template, we use Supabase's database and authentication services. Among these, obtaining Supabase's API keys is a necessary step for the template.

Next, I'll introduce the integration process of Supabase in the Nexty.dev template.

Registration and Project Creation

1. Visit the Supabase official website. You can register using the domain email created in the previous step.

2. After registration, click "new project"

3. Enter project information, then click "Create new project".

Database Initialization

When I promote the Nexty.dev template, I emphasize that "the template comes with xx built-in features." The foundation of these features actually comes from a complete database structure design.

We provide all necessary SQL files in the data folder of the code repository. You only need to execute these files to complete database initialization.

💡

Comprehensive database design is one of the major features of the Nexty.dev template. Our SQL files not only include basic table structure definitions but also complete Indexes (index design), Triggers (trigger logic), Functions (related functions), and Policies (permission design).
Among similar templates I'm aware of, only Nexty.dev provides such comprehensive database design.

Open SQL Editor, click "Create a new snippet", and execute all SQL files in the data folder in sequence

After execution, open Table Editor, and you'll see all tables built into the Nexty.dev template.

Open the Database module, where you can see all designed Indexes, Triggers, Functions, and Policies.

Configure Supabase Auth

The Nexty.dev template supports three login methods by default: Google OAuth, GitHub OAuth, and Email Magic Link through Supabase Auth.

Email Login

Supabase Auth enables email login by default, but the default link expiration time is 1 hour. It's generally recommended to change this to 10 minutes.

Click the "Email" item to open the email settings panel

Change the "Email OTP Expiration" value to 600, then click "Save"

Github Login

Click the "Github" item to open the Github settings panel

Click the "Enable" button to enable Github login, then copy the "Callback URL"

Then open GitHub's "OAuth Apps" page, click "New OAuth App" to start creating a new OAuth App

The "Homepage URL" can be filled with the future production address or temporarily set to the development environment address (like http://localhost:3000). Fill the "Authorization callback URL" with the copied "Callback URL"

After creation, you'll see the "Client ID". Click the "Generate a new client secret" button to generate the "Client Secret", then copy them to Supabase Auth's "Client ID" and "Client Secret".

Google Login

Click the "Google" item to open the Google settings panel

Click the "Enable" button to enable Google login, then copy the "Callback URL"

Open Google Cloud Console, click "New Project" to start creating a new project

Enter project name, then click "Create"

Start setting up Project information

Create Client ID

Select "Web application" for "Application type". For "Authorized JavaScript origins", fill in http://localhost:3000 and http://localhost for local development. Fill the "Authorized redirect URIs" with the "Callback URL" copied earlier

Copy the generated "Client ID" and "Client secret" to Supabase Auth's "Client ID" and "Client Secret".

Return to Google Cloud Console and check the permissions we need on the Data Access page

Configure Redirect URLs

To ensure users are redirected to the correct page after login, we need to configure "URL Configuration".

Set Site URL to the production address and add development environment addresses to Redirect URLs to ensure proper redirection during local development.

Get API Keys

The final and most important step is to get the API keys.

On the Data API page, copy the URL, anon key, and service_role key to the environment variables in your code.

# .env.local or .env
 
NEXT_PUBLIC_SUPABASE_URL=""
NEXT_PUBLIC_SUPABASE_ANON_KEY=""
SUPABASE_SERVICE_ROLE_KEY=""

Updating Local Supabase Database Definitions

Install the Supabase CLI:

# macOS or Linux
brew install supabase/tap/supabase
 
# Windows
scoop bucket add supabase https://github.com/supabase/scoop-bucket.git
scoop install supabase

After installation, first log in to the CLI:

supabase login

Then run the gen command to generate types.ts:

supabase gen types typescript --project-id <your-project-id> --schema public > lib/supabase/types.ts

Replace <your-project-id> with your actual project ID.

If you see a message saying A new version of Supabase CLI is available ... when running the generate command, you'll need to update the CLI first:

If you're not sure what your ID is, simply log into the Supabase dashboard and look at the URL - the string after /project/ is your project ID. For example: https://supabase.com/dashboard/project/<your-project-id>.

# macOS or Linux
brew upgrade supabase
 
# Windows
scoop update supabase

For more information about Supabase CLI commands, please refer to the documentation.

Conclusion

Among all third-party services used by the Nexty.dev template, only Supabase is required. This means if you want to start the source repository now, you can temporarily skip configurations for other third-party platforms and continue reading from the Starting the Source Repository chapter.