Edge Developer Platform
  • Pages
    • Product Introduction
    • Quick Start
      • Importing a Git Repository
      • Starting From a Template
      • Direct Upload
    • Framework Guide
    • Project Guide
      • Project Management
      • edgeone.json
      • Error Codes
    • Build Guide
    • Deployment Guide
      • Overview
      • Create Deploys
      • Manage Deploys
      • Deploy Button
    • Domain Management
      • Overview
      • Custom Domain Name
      • Configuring an HTTPS Certificate
      • How to Configure a DNS CNAME Record
    • Pages Functions
    • KV Storage
    • Edge AI
    • API Token
    • EdgeOne CLI
    • Pages MCP
    • Integration Guide
      • Database
        • Supabase Integration
        • Pages KV Integration
      • Ecommerce
        • WooCommerce Integration
      • Payment
        • Stripe Integration
      • CMS
        • WordPress Integration
        • Contentful Integration
        • Sanity Integration
      • Authentication
        • Clerk Integration
    • Best Practices
      • Use the Deepseek-R1 model to quickly build a conversational AI site
      • Building an Ecommerce Platform with WordPress + WooCommerce and GatsbyJS
      • Building a SaaS Site Using Supabase and Stripe
      • Building a Company Brand Site Quickly
    • Migration Guides
      • Migrating from Vercel to EdgeOne Pages
      • Migrating from Cloudflare Pages to EdgeOne Pages
      • Migrating from Netlify to EdgeOne Pages
    • Troubleshooting
    • FAQs
    • Contact Us
    • Release Notes
Unlock 1 Year of EdgeOne + 1TB CDN: Join Our Developer Journey
Get Started Now !
Docs Overview/
Edge Developer Platform/
Pages/
Integration Guide/
Authentication/
Clerk Integration/

Clerk Integration

Clerk is a complete embeddable UI, flexible API, and management dashboard for verifying and managing your users.


Overview

This guide provides developers with step-by-step instructions for quickly integrating Clerk and offers tutorials for deploying projects on EdgeOne Pages. The following context will introduce in detail how to integrate Clerk in the project and quickly complete the development of user management features in the project.


Getting Started

You can choose the Clerk integration template provided by Pages to quickly get started with development. Click the Clerk Authentication Starter template. This tutorial is roughly divided into three steps: Clerk configuration, local integration, and EdgeOne Pages deployment configuration. The following will introduce in detail the specific operations for each step.


Clerk Configuration

Go to clerk.com to register an account and create a project. Upon first login, you need to Create your project. You will then enter the Overview page, where you can find the corresponding development framework in the Overview Page. This guide uses a Next.js project with the Pages Router routing mode as an example.

If you haven't created a Next.js project yet, you can use the following command to create a Next.js project.
npx create-next-app@latest
# or
yarn create next-app
After creation, install the Clerk package for the Next.js project.
# npm
npm install @clerk/nextjs
# yarn
yarn add @clerk/nextjs
# pnpm
pnpm add @clerk/nextjs


1. Filling API Keys Into a Local Project

After installation, create a .env file in the project root directory and fill in the API keys. The API keys can be found in the Clerk dashboard under Dashboard -> Configure -> Developers, in the first directory API keys.
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_
CLERK_SECRET_KEY=sk_


2. Alternative Solutions for Creating Middleware

Clerk provides multiple middleware options for easy integration of identity authentication and user management features across different frameworks. The most commonly used middleware is the route protection middleware. Since middleware configuration is currently not supported in Pages-deployed projects, it is advisable to use client-side verification methods in Pages.
// pages/dashboard.jsx
import { useAuth } from "@clerk/nextjs";
import { useRouter } from "next/router";
import { useEffect } from "react";

export default function Dashboard() {
  const { isLoaded, userId, isSignedIn } = useAuth();
  const router = useRouter();

  useEffect(() => {
    // Wait for the Auth status to load complete
    if (isLoaded && !isSignedIn) {
      router.replace(/sign-in?redirect_url=${encodeURIComponent(router.asPath)});
    }
  }, [isLoaded, isSignedIn, router]);

  // Display loading status or unauthorized state
  if (!isLoaded || !isSignedIn) {
    return <div>Loading...</div>;
  }

  // User verified, display content
  return (
    <div></div>
  );
}
Or create a uniform protected page wrapper for management.


3. Add the Clerk Component to the Code

Add the <ClerkProvider> component to your application. This component provides session and user context features. It is advisable to integrate it at the application entry.

In addition, you can add the <SignedIn> <SignedOut> <UserButton> <SignInButton> components to your application. These components enable:
<SignedIn>: Only logged-in users can see the sub-items of this component.
<SignedOut>: Only after logging out can you see the sub-items of this component.
<UserButton>: Displays the user avatar and includes a pull-down menu for user operations.
<SignInButton>: An unstyled component linking to the login page.
// pages/_app.tsx

import '@/styles/globals.css'
import { ClerkProvider, SignInButton, SignedIn, SignedOut, UserButton } from '@clerk/nextjs'
import type { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ClerkProvider {...pageProps}>
      <SignedOut>
        <SignInButton />
      </SignedOut>
      <SignedIn>
        <UserButton />
      </SignedIn>
      <Component {...pageProps} />
    </ClerkProvider>
  )
}

export default MyApp



Deploying to EdgeOne Pages

This section will provide a detailed introduction on how to integrate Clerk during EdgeOne Pages deployment. Below are divided into directly selecting the Clerk template from Pages template for deployment, and deploying a custom project to Pages. In this step, if there is no need to associate with an online Git, Git authorization (supports Github/Gitee) needs to be completed.


1. Deploying Pages Template Clerk Template (Template Deployment)

You can directly use the Clerk frontend template of EdgeOne Pages. Click Create project -> Start from template, select Authentication -> Clerk -> Clerk Authentication Starter.



Then click Deploy, fill in Environment Variables. The parameter descriptions are as follows:
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: Clerk public key.
NEXT_PUBLIC_CLERK_SIGN_IN_URL: Sign-in page address.
NEXT_PUBLIC_CLERK_SIGN_UP_URL: Sign-up page address.
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL: Redirect address after sign-in.
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL: Redirect address after registration.

Click Create to start deployment.


2. Deploying a Custom Project to Pages (Custom Deployment)

1. Create a new repository
Log in to your GitHub account and enter Dashboard
Click the New button in the upper right corner
Fill in the repository name, description, and other information
Select repository visibility (Public or Private)
Click Create repository to complete the creation

2. Upload a local project
Initialize Git in the local project directory (if uninitialized)
Submit and push the project file to the newly created remote repository

Then collocate the remote repository locally and upload the local code.
# Push your code to your git repository (e.g. GitHub, Gitee).

git init
git add .
git commit -m "First commit"
git remote add origin "your Git address"
git push -u origin master
Through these steps, your project code will be successfully hosted on GitHub, making necessary preparations for subsequent deployment.

Enter the EdgeOne Pages console, upload your own project to Github, click Create project -> Import Git repository, and select your project.

Fill in Environment Variables on the deployment settings page.

You can fill in only the basic parameters of the connection here. After deployment, you can set them again in the project. In the left navigation bar, find Project Setting, then locate Environment Variables on the page. Modify or add new ones and redeploy.

When Congratulations appears, it indicates deployment success. The deployment will take approximately 1-3 minutes. 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.



More Related Content

Learn more about Clerk operations: Clerk Operation Instructions