Clerk and Astro Quickstart (Cloudflare)

Introduction

Clerk is a developer-first authentication and user management solution. It provides pre-built React components and hooks for sign-in, sign-up, user profile, and organization management. Clerk is designed to be easy to use and customize, and can be dropped into any Astro application.

This quickstart repo contains an example Astro project integrated with Clerk authentication ready to be deployed to Cloudflare pages.

This quickstart contains examples of:

• Using Clerk components for signing in and out.
• Displaying different components depending on whether the user is signed in.
• Protecting routes with clerkMiddleware.
• Using Tailwind CSS to customize Clerk components.
• Using themes from @clerk/themes to customize components.
• Accessing user data with $userStore
• Using environment variable redirects

Running the template

git clone https://github.com/jeremy-clerk/clerk-astro-cloudflare-quickstart

To run the example locally, you need to:

1. Sign up for a Clerk account at https://clerk.com.

2. Go to the Clerk dashboard and create an application.

3. Rename the wrangler.example.toml example file to wrangler.toml

4. In wrangler.toml, change the value of PUBLIC_CLERK_PUBLISHABLE_KEY to be your publishable key from the Clerk Dashboard.

5. Rename the .dev.vars.example example file to .dev.vars

6. In .dev.vars change the value of CLERK_SECRET_KEY to be your secret key from the Clerk Dashboard

7. Run pnpm install to install the required dependencies.

8. Run pnpm dev to launch the development server.

9. Go to http://localhost:4321 in your browser to see the example.

Preview

Preview the application locally with Wrangler

Install Wrangler

pnpm add wrangler --save-dev

Build your project locally

pnpm build

Run the preview script

pnpm preview

Deploy

Easily deploy to Cloudflare Pages

# Install Wrangerl CLI
pnpm  i -g wrangler
# Login into your Cloudflare account
wrangler login
# Run your build command
pnpm run build
# Create new deployment
pnpx wrangler pages deploy ./dist

Once deployed you need to set the CLERK_SECRET_KEY via the settings for the project via the Cloudflare dashboard.

Learn more

To learn more about Clerk and Astro, check out the following resources:

• Quickstart: Get started with Astro and Clerk

• Clerk Documentation

• Astro Documentation

Found an issue or want to leave feedback

Feel free to create a support thread on our Discord. Our support team will be happy to assist you in the #support channel.

Connect with us

You can discuss ideas, ask questions, and meet others from the community in our Discord.

If you prefer, you can also find support through our Twitter, or you can email us!