• Product Introduction
  • Quick Start
    • Agent Development
    • Importing a Git Repository
    • Starting From a Template
    • Direct Upload
    • Start with AI
  • Framework Guide
    • Agent
    • Frontends
      • Vite
      • React
      • Vue
      • Hugo
      • Other Frameworks
    • Backends
    • Full-stack
      • Next.js
      • Nuxt
      • Astro
      • React Router
      • SvelteKit
      • TanStack Start
      • Vike
    • Custom 404 Page
  • Project Guide
    • Project Management
    • edgeone.json
    • Configuring Cache
    • Building Output Configuration
    • Error Codes
  • Build Guide
  • Deployment Guide
    • Overview
    • Create Deploys
    • Manage Deploys
    • Deploy Button
    • Using Github Actions
    • Using Gitlab CI/CD
    • Using CNB Plugin
    • Using IDE PlugIn
    • Using CodeBuddy IDE
  • Domain Management
    • Overview
    • Custom Domain
    • HTTPS Configuration
      • Overview
      • Apply for Free Certificate
      • Using Managed SSL Certificate
    • Configure DNS CNAME Record
  • Observability
    • Overview
    • Metric Analysis
    • Log Analysis
  • Functions
    • Overview
    • Edge Functions
    • Cloud Functions
      • Overview
      • Node.js
      • Python
      • Go
  • Agents
    • Overview
    • Quick Start
    • Conversation Storage
    • Observability
    • Sandbox Tool
      • Overview
      • Using the Agent Framework
      • Sandbox Atomic API
      • Network Search Tool
    • Agent Authentication
  • Models
    • Overview
    • Models and Vendors
      • Overview
      • Using Vendor Keys
        • OpenAI
        • Anthropic
        • Google AI Studio
        • DeepSeek
        • MiniMax
        • Hunyuan
        • Zhipu
        • MoonShot AI
    • FAQs
  • Storage
    • Overview
    • KV
    • Blob
  • Middleware
  • AI Tools
    • MCP
    • Skills
    • Plugin
  • Copilot
    • Overview
    • Quick Start
  • API Token
  • EdgeOne CLI
  • Message Notification
  • Integration Guide
    • AI
      • Dialogue Large Models Integration
      • Large Models for Images Integration
    • Database
      • Supabase Integration
      • Pages KV Integration
    • Ecommerce
      • Shopify Integration
      • WooCommerce Integration
    • Payment
      • Stripe Integration
      • Integrating Paddle
    • CMS
      • WordPress Integration
      • Contentful Integration
      • Sanity Integration
      • Payload Integration
    • Authentication
      • Supabase Integration
      • Clerk Integration
  • Best Practices
    • AI Dialogue Deployment: Deploy Project with One Sentence Using Skill
    • Using General Large Model to Quickly Build AI Application
    • Use the DeepSeek model to quickly build a conversational AI site
    • Building an Ecommerce Platform with Shopify
    • Building a SaaS Site Using Supabase and Stripe
    • Building a Company Brand Site Quickly
    • How to Quickly Build a Blog Site
  • Migration Guides
    • Migrating from Vercel to EdgeOne Pages
    • Migrating from Cloudflare Pages to EdgeOne Pages
    • Migrating from Netlify to EdgeOne Pages
  • Troubleshooting
  • FAQs
  • Limits
  • Pricing
  • Contact Us
  • Release Notes

Supabase Integration

Supabase Authentication (commonly referred to as Supabase Auth) is a complete user authentication and management system provided by the platform. It enables developers to easily achieve user registration, sign-in, identity authentication, and access control features without building these complex security systems from scratch.
This guide provides developers with step descriptions for quickly integrating Supabase Auth with Next.js full stack development, and offers a deployment template for development reference. The following context introduces the integration steps in detail to quickly complete the user management feature development in the project.

Getting Started

You can select the Supabase Auth integration template provided by Makers to quickly enter development. Click the Supabase Auth Starter template. This tutorial is roughly divided into three steps: Supabase configuration, integration details, and local development debugging. The following sections detail the specific operations for each step.

1. Preparing Supabase

If you are first time exposed to Supabase, see our Supabase Integration Guide to obtain account signup and environment initialization complete process.
The Authentication feature provided by the Supabase platform efficiently manages user data. Access the Authentication management interface via the left navigation pane, where you will see the pre-configured user data table and related settings. This interface supports core features such as email verification process, access Policies, and Session parameters. To learn more about specific features, see the official documentation for details.


2. One-Click Deployment

Go to the template page Supabase Auth Starter, click Deploy, and log in to enter the console deployment page. In the console deployment configuration panel, you need to fill in the environment variables obtained above.

When "Congratulations!" appears, it indicates deployment success. Deployment typically takes about 1 minute. If the project fails during deployment, you can modify the project based on Build Logs and Build Summary information, or contact staff to resolve the issue.

After successful deployment, go to the project homepage and copy the Domain. Go to the Supabase console and navigate to the URL configuration section. Copy your domain name info to the Site URL field. This way, after registration completion, users will be auto-redirected to your website homepage.


Integration Details

After deployment, the system will create an appropriate code repository under the user's GitHub account. This section introduces the project implementation details, convenient for you to conduct follow-up feature integration and development.

Downloading Code

Go to your Github repository, copy the Clone address, and run in the terminal:
git clone https://github.com/${your-github-account}/supabase-auth-starter
cd supabase-auth-starter

Core Feature Introduction

This is a user authentication solution template built based on Supabase and Next.js. Some webpage of the project use server-side rendering (SSR) architecture, providing user registration, sign-in, and session management features.
1. User Sign-up and Login
Registration feature (signup/page.tsx): Users create new account through mailbox and password
Login feature (signin/page.tsx): Registered users authenticate through credentials
Logout feature (signout/route.js): Securely purge user sessions and authentication status
2. Cookie Authentication Logic
The project uses an HTTP Cookies-based session management mechanism to underwrite secure transmission of user status between client and server. Cookie setting policy:
access_token: User access token used for API request authentication
refresh_token: Refresh token for session auto-renewal
user_id: Unique user identifier
Cookie security configuration:
// Production environment configuration
{
path: '/',
maxAge: 604800, // 7-day valid period
httpOnly: true, // prevent XSS attack
secure: true, // HTTPS transmission
sameSite: 'lax' // CSRF protection
}
3. API Routing Architecture
signin/route.js: Handle user login requests, verify credentials, and set authentication cookies
signup/route.js: Handle user registration requests and create a new user account
user/route.js: Verify user authentication status and return current user info
signout/route.js: Handle user logout and purge ALL authentication cookies

Local Development and Debugging

After downloading the project to your local system and parsing its details, the developer may need to develop locally, debug, or preview it.
To enable local debugging, you also need to configure environment variables, which can be cumbersome. In this case, you can use EdgeOne CLI. It can synchronize the configuration information deployed on EdgeOne Makers to your local environment and also deploy the project locally.
Using EdgeOne CLI needs to be installed and log in. For details, see the document introduction of EdgeOne CLI.

ai-agent
You can ask me like
What types of applications can I deploy?