Clerk Integration
Clerk is a complete set of embeddable UI, flexible API, and management dashboard to verify and manage your users.
Overview
This guide provides developers with step descriptions to quickly integrate Clerk and tutorials for project deployment on EdgeOne Pages. The following context introduces in detail how to integrate Clerk in the project and quickly complete the development of the user management feature.
Getting Started
You can choose the Clerk integration template provided by Pages to quickly enter development. Click the Clerk Authentication Starter template. This tutorial is divided into three steps: Clerk configuration, local integration, and EdgeOne Pages deployment configuration. The following details each step's specific operation.
Clerk Configuration
Go to clerk.com to register an account and create a new project. Upon first login, you must
Create your project, then you will enter the Overview. On the Overview Page, find the corresponding development framework. This guide uses a Next.js project with the routing mode set to Pages Router as an example.
If a Next.js project is not yet created, the following command can be used to create a Next.js project.
npx create-next-app@latest# oryarn create next-app
After creating the Next.js project, install the Clerk package.
# npmnpm install @clerk/nextjs# yarnyarn add @clerk/nextjs# pnpmpnpm add @clerk/nextjs
1. Fill in API Keys to Local Project
After Clerk installation, create an
.env file in the project root directory and fill in the API keys. API keys can be found in the Clerk dashboard at Dashboard -> Configure -> Developers under the first directory API keys.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_CLERK_SECRET_KEY=sk_
2. Creating a Middleware Alternative Solution
Clerk provides multiple middleware for seamless integration of identity authentication and user management feature across different frameworks. The most commonly used middleware is the route protection middleware. Since projects deployed on Pages currently do not support middleware settings, it is advisable to use client-side verification method in Pages.
// pages/dashboard.jsximport { 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 Auth status loading completeif (isLoaded && !isSignedIn) {router.replace(/sign-in?redirect_url=${encodeURIComponent(router.asPath)});}}, [isLoaded, isSignedIn, router]);// Display loading... or unauthorized stateif (!isLoaded || !isSignedIn) {return <div>Loading...</div>;}// User verified, display contentreturn (<div></div>);}
or create a uniform protected page packaging to manage.
3. Add the Clerk Component to the Code
Add the
<ClerkProvider> component to your application. This component feature provides session and user context. 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 exiting can you see the sub-items of this component.<UserButton>: Displays the user avatar and includes a pull-down menu for user operations.
<SignInButton>: A styleless component that links to the login page.// pages/_app.tsximport '@/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
Deploy to EdgeOne Pages
This section will introduce in detail how to integrate Clerk in EdgeOne Pages deployment. It is divided into selecting the Clerk template directly from
Pages template for deployment, and deploying a custom project to Pages. In this step, if there is no online Git association, you need to complete Git authorization (supports Github/Gitee).
1. Deploying Pages Template Clerk Template (Template Deployment)
You can use the Clerk frontend template in EdgeOne Pages directly. Click
Create project -> Start from template, select Authentication -> Clerk -> Clerk Authentication Starter.
Then click
Deploy, fill in Environment Variables. Parameter description:NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: Clerk publishable key.NEXT_PUBLIC_CLERK_SIGN_IN_URL: Sign-in page address.NEXT_PUBLIC_CLERK_SIGN_UP_URL: Signup page address.NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL: Redirect address after sign-in.NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL: Redirect address after signup.
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
DashboardClick the
New button in the upper right cornerFill in the repository name, description
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)
Commit and push project files to a new remote repository
Then associate the local repository with the remote one and upload the local code.
# Push your code to your git repository (e.g. GitHub, Gitee).git initgit 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 managed on GitHub, making necessary preparations for 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 setting page.
Here you can just fill in the basic parameters for connection. After deployment, you can set them again in the project. In the left sidebar, find
Project Setting, then locate Environment Variables on the page. Modify or add new ones and redeploy.
When Congratulations appears, it indicates deployment success. Deployment typically takes 1-3 minutes. If the project fails during deployment, you can modify the project based on
Build Logs and Build Summary info, or contact staff to resolve the issue.
More Related Content
Learn more about Clerk operations: Clerk Operation Instructions
