Zum Inhalt springen

Authentication

Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.

Authentication and authorization are two security processes that help you control who has access to different parts of your website or app. Authentication is the process of verifying a vistor’s identity, and authorization is the process of allowing visitors access to protected routes 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) provide utilities for multiple authentication methods such as email sign-in and OAuth providers.

See how to add authentication with Supabase or add authentication with Firebase in our dedicated guides for these backend services.

Lucia is a framework-agnostic, session-based authentication library with great Astro support.

Install Lucia using the package manager of your choice.

Terminal window
npm install lucia

Use Lucia’s “Getting started in Astro” guide to initialize Lucia with an adapter and set up a database to store users and sessions.

Auth.js is a framework agnostic solution for authentication. A community framework adapter auth-astro is available for Astro.

Use the astro add command for your preferred package manager to add the astro-auth integration.

Terminal window
npx astro add auth-astro

To install astro-auth manually, install the required package for your package manager:

Terminal window
npm install auth-astro

Then, apply the integration to your astro.config.* file using the integrations property:

astro.config.mjs
import { defineConfig } from 'astro/config';
import auth from 'auth-astro';
export default defineConfig({
// ...
integrations: [auth()],
});

Create 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.

auth.config.mjs
import GitHub from '@auth/core/providers/github';
import { defineConfig } from 'auth-astro';
export default defineConfig({
providers: [
GitHub({
clientId: import.meta.env.GITHUB_CLIENT_ID,
clientSecret: import.meta.env.GITHUB_CLIENT_SECRET,
}),
],
});

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.

.env
AUTH_TRUST_HOST=true
AUTH_SECRET=<my-auth-secret>

You can add sign-in and sign-out buttons using the auth-astro/client module in a script tag or client-side framework component.

src/pages/index.astro
---
import Layout from 'src/layouts/Base.astro';
---
<Layout>
<button id="login">Login</button>
<button id="logout">Logout</button>
<script>
const { signIn, signOut } = await import("auth-astro/client")
document.querySelector("#login").onclick = () => signIn("github")
document.querySelector("#logout").onclick = () => signOut()
</script>
</Layout>

You can fetch the user’s session using the getSession method.

src/pages/index.astro
---
import Layout from 'src/layouts/Base.astro';
import { getSession } from 'auth-astro/server';
const session = await getSession(Astro.request);
---
<Layout>
{
session ? (
<p>Welcome {session.user?.name}</p>
) : (
<p>Not logged in</p>
)
}
</Layout>