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 choose the Supabase Auth integration template provided by Pages to quickly enter development. Click the Supabase Auth Starter template. This tutorial is divided into three steps: Supabase configuration, integration details, and local development and debugging. The following describes each step in detail.
Supabase Preparation
1. Account Registration and Configurations
If you are first time exposed to Supabase, see our Supabase Integration Guide to obtain account signup and environment initialization complete process.
2. Authentication Introduction
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.
3. One-Click Deployment
After completing the preparation for Supabase, you can fill in the
Environment Variables via template deployment in the EdgeOne console.
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.
1. Download 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-startercd supabase-auth-starter
2. 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.
User Registration and Login
Registration feature (
signup/page.tsx): Users create new account through mailbox and passwordLogin feature (
signin/page.tsx): Registered users authenticate through credentialsLogout feature (
signout/route.js): Securely purge user sessions and authentication status
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 authenticationrefresh_token: Refresh token for session auto-renewaluser_id: Unique user identifier
Cookie security configuration:
// Production environment configuration{path: '/',maxAge: 604800, // 7-day valid periodhttpOnly: true, // prevent XSS attacksecure: true, // HTTPS transmissionsameSite: 'lax' // CSRF protection}
API routing architecture
signin/route.js: Handle user login requests, verify credentials, and set authentication cookiessignup/route.js: Handle user registration requests and create a new user accountuser/route.js: Verify user authentication status and return current user infosignout/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 must configure environment variables, which seems complex. At this point, you can use EdgeOne CLI. It can synchronize the configuration message from the previous EdgeOne Pages deployment locally and also directly deploy the project locally.
Using EdgeOne CLI needs to be installed and log in. For details, see the document introduction of EdgeOne CLI.
