Supabase Integration

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

The Nexty boilerplate uses Supabase's database and authentication services, making Supabase API keys essential for setup.

Installing and Updating Supabase CLI

Install Supabase CLI:

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

Update Supabase CLI:

# mac OS or Linux
brew upgrade supabase
 
# Windows
scoop update supabase

For more Supabase CLI related commands, see the documentation

Database Integration Steps

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

2. Click New Project to create a new project

Remember the password you enter in this step

3. Copy the environment variables to your .env or .env.local file

4. Initialize the database

## login supabase, press Enter as prompted, then copy the random code from the webpage, paste it into the command line, and press Enter to successfully log in
pnpm db:login
 
## connect to database, you'll be asked to enter the database password, copy the password remembered from step 2, paste it into the command line (the command line won't display the password), press Enter directly, and it will prompt successful connection
pnpm db:link
 
## automatically initialize database and initial data
pnpm db:update

Good to know:

• Version 1.x provided manual initialization methods. If you want to manually initialize, you can still manually execute all SQL files in the supabase/migrations directory one by one
• Starting from version 2.x, the automatic initialization commands above are recommended

On Windows systems, if you get an "Invalid project ref format" error when running pnpm db:update, as shown below:

Update the db:update script in your package.json:

  "scripts": {
    // "db:update": "npm run db:push && npm run db:gen-types" // Remove this line
    "db:update": "npm run db:push ; npm run db:gen-types" // Use this instead
  }

After execution, open the Table Editor and you'll see all the built-in tables and pricing data in the Nexty boilerplate.

Open the Database module and you'll see all the designed Indexes, Triggers, Functions, and RLS Policies (Row Level Security policies).

Database Update Method

When you start developing your own features, whether adding new data tables or modifying existing ones, you can use this command to create new table design files:

pnpm db:new-migration <update-name>
 
## eg: pnpm db:new-migration add_image_jobs_table

After executing the command, a new migration file will be generated in supabase/migrations.

Then write the SQL for creating or updating data tables in the new file. If you're unsure about database design, you can first discuss the functionality with AI, then have AI design complete Supabase data tables for you and Ask AI to write the SQL directly into the migration file.

Then execute this command to update the database:

pnpm db:update

Authentication Integration Steps

The Nexty boilerplate supports three login methods by default: Google authentication, GitHub authentication, and email Magic Link via Supabase Auth.

Good to know:

• GitHub login is recommended for debugging as it's simpler to configure and less error-prone than Google login.
• If GitHub login works successfully, Google login will also work properly (assuming correct configuration).

Email Login

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

Click Email to open the email settings panel

Change the Email OTP Expiration value to 600 (seconds), then click Save

The Magic Link login method provides a default email notification template, but the default template doesn't support cross-browser login. Therefore, you need to navigate to Email - Sign Up and Email - Magic Link to modify the email template. Here's a reference example:

<h2>Confirm your signup</h2>
 
<p>Follow this link to confirm your user:</p>
<p>
  <a href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=email">Confirm your mail</a>
</p>

<p>Hi there!</p>
 
<p>Click the link below to sign in to your Nexty.dev account:</p>
 
<p>
  <a href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=email">Sign In to Nexty.dev</a>
</p>
 
<p>If you didn't request this, you can safely ignore this email.</p>
 
<p>The Nexty.dev Team</p>

The href attribute in the <a> tag must match the example above, while other content can be customized as needed.

GitHub Login

Click Github to open the GitHub settings panel

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

Open GitHub's OAuth Apps page, click New OAuth App to start creating a new OAuth App

You can fill in your future production address for Homepage URL, or temporarily use the development environment address (eg: http://localhost:3000). Fill in the Callback URL you just copied for Authorization 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 both values to Supabase Auth's Client ID and Client Secret fields.

Google Login

Click Google 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

Enter the project name, then click Create

Start setting up Project information

Create Client ID

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

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

Also add the Client ID to the environment variable NEXT_PUBLIC_GOOGLE_CLIENT_ID, which will enable your product to support Google One Tap, helping users avoid one page redirect.

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

Good to konw

To enable Google One Tap, add your Client ID to the NEXT_PUBLIC_GOOGLE_CLIENT_ID environment variable.

Configuring Redirect URLs

To ensure users are redirected to the correct page after signing in, you need to configure the URL Configuration.

The Site URL is the default redirect destination. When no specific Redirect URL is provided, the system automatically redirects users to the SITE_URL. If you have a production URL ready, enter your production environment address here. If your domain isn't live yet, you can temporarily use your development environment address and change it to the production address when you go live.

Redirect URLs specify the allowed addresses that can be used with the redirectTo parameter in your code for custom redirects. You can add both production and development environment URLs to ensure proper redirection works in both environments. However, it's recommended to remove the development URLs once you deploy to production.

Getting API Keys

The final and most important step is getting the API keys.

• On the Project Settings - Data API page，copy the URL to the environment variable NEXT_PUBLIC_SUPABASE_URL
• On the Project Settings - API Keys page，copy the anon key and service_role key to the environment variables NEXT_PUBLIC_SUPABASE_ANON_KEY and SUPABASE_SERVICE_ROLE_KEY

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

Conclusion

Among all the third-party services used by the Nexty boilerplate, only Supabase is mandatory. This means if you want to start the source code repository now, you can temporarily skip configuring other third-party platforms and continue reading from the Start Source Code Repository chapter.