Authentication
Authentication and authorization are two security processes that manage access to your website or app. Authentication verifies a visitor’s identity, while authorization grants access to protected areas and resources.
Authentication allows you to customize areas of your site for logged-in individuals and provides the greatest protection for personal or private information. Authentication libraries (e.g. Lucia Auth, Auth.js, Clerk) provide utilities for multiple authentication methods such as email sign-in and OAuth providers.
There is no official authentication solution for Astro, but you can find community “auth” integrations in the integrations directory.
Auth.js
Section titled Auth.jsAuth.js is a framework agnostic solution for authentication. A community framework adapter auth-astro
is available for Astro.
Installation
Section titled InstallationUse the astro add
command for your preferred package manager to add the auth-astro
integration.
Manual installation
Section titled Manual installationTo install auth-astro
manually, install the required package for your package manager:
Then, apply the integration to your astro.config.*
file using the integrations
property:
Configuration
Section titled ConfigurationCreate an auth.config.mjs
file in your project’s root directory. Add any auth providers or methods you wish to support, along with any environment variables they require.
Create a .env
file in the root of your project if it does not already exist. Add the following two environment variables. AUTH_SECRET
should be a private string with a minimum of 32 characters.
Usage
Section titled UsageYou can add sign-in and sign-out buttons using the auth-astro/client
module in a script tag or client-side framework component.
You can fetch the user’s session using the getSession
method.
Next Steps
Section titled Next StepsBetter Auth
Section titled Better AuthBetter Auth is a framework-agnostic authentication (and authorization) framework for TypeScript. It provides a comprehensive set of features out of the box and includes a plugin ecosystem that simplifies adding advanced functionalities.
It supports Astro out of the box, and you can use it to add authentication to your astro project.
Installation
Section titled InstallationFor detailed setup instructions, check out the Better Auth Installation Guide.
Configuration
Section titled ConfigurationConfigure your database table to store user data and your preferred authentication methods as described in the the Better Auth Installation Guide. Then, you’ll need to mount the Better Auth handler in your Astro project.
Follow the Better Auth Astro Guide to learn more.
Usage
Section titled UsageBetter Auth offers a createAuthClient
helper for various frameworks, including Vanilla JS, React, Vue, Svelte, and Solid.
For example, to create a client for React, import the helper from 'better-auth/react'
:
Once your client is set up, you can use it to authenticate users in your Astro components or any framework-specific files. The following example adds the ability to log in or log out with your configured signIn()
and signOut()
functions.
You can then use the auth
object to get the user’s session data in your server-side code. The following example personalizes page content by displaying an authenticated user’s name:
You can also use the auth
object to protect your routes using middleware. The following example checks whether a user trying to access a logged-in dashbord route is authenticated, and redirects them to the home page if not.
Next Steps
Section titled Next Steps- Better Auth Astro Guide
- Better Auth Astro Example
- Better Auth Documentation
- Better Auth GitHub Repository
Clerk
Section titled ClerkClerk is a complete suite of embeddable UIs, flexible APIs, and admin dashboards to authenticate and manage your users. An official Clerk SDK for Astro is available.
Installation
Section titled InstallationInstall @clerk/astro
using the package manager of your choice.
Configuration
Section titled ConfigurationFollow Clerk’s own Astro Quickstart guide to set up Clerk integration and middleware in your Astro project.
Usage
Section titled UsageClerk provides components that allow you to control the visibility of pages based on your user’s authentication state. Show logged out users a sign in button instead of the content available to users who are logged in:
Clerk also allows you to protect routes on the server using middleware. Specify which routes are protected, and prompt unauthenticated users to sign in:
Next Steps
Section titled Next Steps- Read the official
@clerk/astro
documentation - Start from a template with the Clerk + Astro Quickstart project
Lucia
Section titled LuciaLucia is a resource for implementing session-based authentication in a number of frameworks, including Astro.
Guides
Section titled Guides- Create a basic sessions API with your chosen database.
- Add session cookies using endpoints and middleware.
- Implement GitHub OAuth using the APIs you implemented.
Examples
Section titled Examples- GitHub OAuth example in Astro
- Google OAuth example in Astro
- Email and password example with 2FA in Astro
- Email and password example with 2FA and WebAuthn in Astro