Update: hey, I shipped skillcraft.ai
Learn tech from the best. Ranked by developers. Search courses, tutorials, and books voted on by developers. Skip the guesswork. Try it out, for free!
Up to date
Published
4 min read

Add Auth to Astro 5 with Clerk in 5 Minutes

The simplest setup for adding Clerk authentication to your Astro project, with minimal code

Authentication has always been a pain point. Either you spend weeks building a robust auth system, or you piece together various services that don’t quite fit. That’s why I was excited to discover how well Astro and Clerk work together.

Why Astro?

Astro’s content-focused approach means I can build fast, SEO-friendly sites without shipping unnecessary JavaScript. It’s perfect for my personal site (trevorlasn.com) because it delivers exactly what I need: fast load times and seamless content management.

What really sold me on Astro was its “islands architecture”; I can write most of my site in static HTML and sprinkle in interactivity only where needed. This means my authentication UI can be dynamic while keeping the rest of the site lightweight.

Astro’s “islands” of interactivity give me the best of both worlds: the speed of static HTML with the power of React when I actually need it.

Why Clerk?

Authentication is complex. You need to handle sessions, manage tokens, deal with OAuth providers, implement 2FA, and much more. Clerk handles all of this out of the box, and their free tier is generous - 10,000 monthly active users is more than enough for most projects.

The integration with Astro is surprisingly straightforward. A few lines of code, and you have a complete auth system.

Getting Started

First, start an Astro project from scratch. If you want to see the code first, you can find it here

Next, install Clerk.

Finally, add Clerk to your Astro project.

Set your Clerk API keys. You can find these in your Clerk dashboard.

Middleware is required to protect your routes. Add the following to your middleware.ts file.

You can customize the routes Clerk protects by modifying the createRouteMatcher array. For this example, Clerk will protect the /dashboard route.

That’s all that’s needed to setup the functionality. Next, let’s add the UI components.

Clerk provides SignedOut, SignedIn, SignInButton and UserButton components. These components make it easy to build a custom authentication UI.

  • SignedIn: Children of this component can only be seen while signed in.
  • SignedOut: Children of this component can only be seen while signed out.
  • UserButton: Shows the signed-in user’s avatar. Selecting it opens a dropdown menu with account management options.
  • SignInButton: An unstyled component that links to the sign-in page.

Start by creating a route that will be accessible to all users.

Next, let’s create a protected route. This route will only be accessible to signed-in users. Remember, we protected the /dashboard route in the middleware.ts file.

Finally, we can test our setup. Run the following command to start the Astro server.

  • '/' should display the sign-in button.

Home view

Clicking the sign-in button should open the Clerk modal.

Clerk signup modal

After signing in, you should see the signed in view. The sign-in button should be replaced with the user profile image.

Signed in home view

  • If everything went smoothly, the '/dashboard' route should be accessible only to signed-in users. Otherwise, you’ll be redirected to the sign-in page.

Dashboard view

When we head to the Clerk dashboard, we can see the user we just created.

Clerk dashboard

That’s it! You now have a fully functional authentication system in your Astro project. You can customize the UI, add 2FA, and much more. Clerk’s documentation is excellent, so you’ll have no trouble getting started.


Found this article helpful? You might enjoy my free newsletter. I share dev tips and insights to help you grow your coding skills and advance your tech career.


Check out these related articles that might be useful for you. They cover similar topics and provide additional insights.

Webdev
8 min read

Become a Web Developer in 180 Days

A comprehensive roadmap to becoming a proficient web developer

Oct 29, 2019
Read article
Webdev
4 min read

Self-Taught Developer's Guide to Thriving in Tech

How to turn your non-traditional background into your biggest asset

Sep 28, 2024
Read article
Webdev
4 min read

Speed Up Your Website With rel='preconnect' and increase PageSpeed Insights Score

Using link rel='preconnect' can improve your website's performance by reducing connection setup times to key external domains.

Sep 13, 2024
Read article
Webdev
4 min read

How To Implement Content Security Policy (CSP) Headers For Astro

Content Security Policy (CSP) acts like a shield against XSS attacks. These attacks are sneaky - they trick your browser into running malicious code by hiding it in content that seems trustworthy. CSP's job is to spot these tricks and shut them down, while also alerting you to any attempts it detects.

Oct 16, 2024
Read article
Webdev
3 min read

scrollbar-width & scrollbar-gutter: CSS Properties for Layout Control

Prevent content shifts and refine scrollable UIs with scrollbar-width and scrollbar-gutter

Dec 19, 2024
Read article
Webdev
3 min read

CSS Supports Nesting Now

CSS nesting is finally supported in all major browsers. Write cleaner, organized stylesheets without Sass or Less

Dec 6, 2024
Read article
Webdev
4 min read

Explicit is better than implicit

Clarity is key: being explicit makes your code more readable and maintainable.

Sep 4, 2024
Read article
Webdev
5 min read

WebAssembly (Wasm): When (and When Not) to Use It

Understanding the real use cases for WebAssembly beyond the performance hype

Nov 25, 2024
Read article
Webdev
3 min read

Form Validation That Doesn't Annoy Users: CSS :user-valid and :user-invalid

The new pseudo-classes :user-valid and :user-invalid give us a smarter way to style form validation states based on user interaction

Dec 12, 2024
Read article

This article was originally published on https://www.trevorlasn.com/blog/astro-and-clerk. It was written by a human and polished using grammar tools for clarity.