Astro Quickstart
You will learn the following:
- Install
@clerk/astro
- Set your Clerk API keys
- Add
clerkMiddleware()
- Create a header with Clerk components for users to sign in and out
Before you start
Example repository
Install @clerk/astro
Clerk's Astro SDK provides a set of components, hooks, and stores that make it easy to build authentication and user management features in your Astro app.
Add the SDK to your project by running the following command:
Update astro.config.mjs
To configure Clerk in your Astro app, you will need to update your astro.config.mjs
.
- Add the Clerk integration to the
integrations
list. - Install an SSR adapter. This quickstart uses the
@astrojs/node
adapter. - Set
output
toserver
. This is required when deploying to a host supporting SSR.
Add clerkMiddleware()
to your app
clerkMiddleware()
grants you access to user authentication state throughout your app, on any route or page. It also allows you to protect specific routes from unauthenticated users. To add clerkMiddleware()
to your app, follow these steps:
- Create a
middleware.ts
file.- If you're using the
/src
directory, createmiddleware.ts
in the/src
directory. - If you're not using the
/src
directory, createmiddleware.ts
in the root directory alongside.env.local
.
- If you're using the
- In your
middleware.ts
file, export anonRequest
constant and assign the result of theclerkMiddleware()
function to it. - By default,
clerkMiddleware()
will not protect any routes. All routes are public and you must opt-in to protection for routes. See theclerkMiddleware()
reference to learn how to require authentication for specific routes.
Add TypeScript declarations
Update the env.d.ts
file in your src/
directory to add type definitions for the locals
added by the middleware.
Add Clerk components to your app
You can control which content signed-in and signed-out users can see with Clerk's prebuilt control components. Create a header using the following components:
<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. In this example, since no props or environment variables are set for the sign-in URL, this component links to the Account Portal sign-in page.
Then, use the layout on your homepage:
Create your first user
Run your project with the following command:
Now visit your app's homepage at http://localhost:4321
. Sign up to create your first user.
Protect routes using Clerk Middleware
Learn how to protect specific routes from unauthenticated users.
Read session and user data
Learn how to use Clerk's stores and helpers to access the active session and user data in your Astro app.
Clerk + Astro Quickstart Repo
The official companion repo for Clerk's Astro Quickstart.
Feedback
Last updated on