Clerk Integration
This guide provides developers with step-by-step instructions for quickly integrating Clerk and a tutorial for deploying projects on EdgeOne Makers. The following sections detail how to integrate Clerk into a project to rapidly develop its user management feature.
Getting Started
You can select the Clerk integration template provided by Makers to quickly enter the development phase. Click the Clerk Authentication Starter template. This tutorial is roughly divided into three steps: Clerk configuration, local integration, and EdgeOne Makers deployment configuration. The following sections detail the specific operations for each step.
Clerk Configuration
Go to clerk.com to sign up for an account and create a new project. On your first login, you need to
Create your project. You will then be directed to the Overview page. On the Overview page, locate the corresponding development framework. This guide uses a Next.js project with the Makers Router routing mode 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 various middleware to easily integrate authentication and user management features across different frameworks. The most commonly used middleware is the route protection middleware. Because projects deployed on Makers currently do not support middleware configuration, it is recommended to use the client-side verification method in Makers.
// 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
Deploying to EdgeOne Makers
This section details how to integrate Clerk into EdgeOne Makers deployments. The following two approaches are covered: directly selecting the Clerk template from the Makers
template for deployment, and deploying a custom project to Makers. In this step, if you have not linked an online Git repository, you need to complete Git authorization (supports Github/Gitee).1. Deploy the Makers Template Clerk Template (Template Deployment)
You can directly use the Clerk frontend template from EdgeOne Makers. Choose
Create project -> Start from template, then choose 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. Deploy a Custom Project to Makers (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 creation2. 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.
Go to the EdgeOne Makers console, upload your project to Github, choose
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
