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. Auth.js, Clerk) 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.

Auth.js

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

Installation

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

npx astro add auth-astro

pnpm astro add auth-astro

yarn astro add auth-astro

Manual installation

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

npm install auth-astro @auth/core@^0.18.6

pnpm add auth-astro @auth/core@^0.18.6

yarn add auth-astro @auth/core@^0.18.6

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

import { defineConfig } from 'astro/config';
import auth from 'auth-astro';

export default defineConfig({
  // ...
  integrations: [auth()],
});

Configuration

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.

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.

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

Usage

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

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

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

Next Steps

Better Auth

Better 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

npm install better-auth

pnpm add better-auth

yarn add better-auth

For detailed setup instructions, check out the Better Auth Installation Guide.

Configuration

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

import { auth } from "../../../lib/auth"; // import your Better Auth instance
import type { APIRoute } from "astro";

export const ALL: APIRoute = async (ctx) => {
  return auth.handler(ctx.request);
};

Follow the Better Auth Astro Guide to learn more.

Usage

Better 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':

import { createAuthClient } from 'better-auth/react';

export const authClient = createAuthClient();

export const { signIn, signOut } = authClient;

import { createAuthClient } from 'better-auth/solid';

export const authClient = createAuthClient();

export const { signIn, signOut } = authClient;

import { createAuthClient } from 'better-auth/svelte';

export const authClient = createAuthClient();

export const { signIn, signOut } = authClient;

import { createAuthClient } from 'better-auth/vue';

export const authClient = createAuthClient();

export const { signIn, signOut } = authClient;

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.

---
import Layout from 'src/layouts/Base.astro';
---
<Layout>
  <button id="login">Login</button>
  <button id="logout">Logout</button>

  <script>
    const { signIn, signOut } = await import("./lib/auth-client")
    document.querySelector("#login").onclick = () => signIn.social({
      provider: "github",
      callbackURL: "/dashboard",
    })
    document.querySelector("#logout").onclick = () => signOut()
  </script>
</Layout>

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:

---
import { auth } from "../../../lib/auth"; // import your Better Auth instance

const session = await auth.api.getSession({
  headers: Astro.request.headers,
});
---

<p>{session.user?.name}</p>

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.

import { auth } from "../../../auth"; // import your Better Auth instance
import { defineMiddleware } from "astro:middleware";

export const onRequest = defineMiddleware(async (context, next) => {
  const isAuthed = await auth.api
    .getSession({
      headers: context.request.headers,
    })
  if (context.url.pathname === "/dashboard" && !isAuthed) {
    return context.redirect("/");
  }
  return next();
});

Next Steps

Clerk

Clerk 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

Install @clerk/astro using the package manager of your choice.

npm install @clerk/astro

pnpm add @clerk/astro

yarn add @clerk/astro

Configuration

Follow Clerk’s own Astro Quickstart guide to set up Clerk integration and middleware in your Astro project.

Usage

Clerk 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:

---
import Layout from 'src/layouts/Base.astro';
import { SignedIn, SignedOut, UserButton, SignInButton } from '@clerk/astro/components';
---

<Layout>
    <SignedIn>
        <UserButton />
    </SignedIn>
    <SignedOut>
        <SignInButton />
    </SignedOut>
</Layout>

Clerk also allows you to protect routes on the server using middleware. Specify which routes are protected, and prompt unauthenticated users to sign in:

import { clerkMiddleware, createRouteMatcher } from '@clerk/astro/server';

const isProtectedRoute = createRouteMatcher([
  '/dashboard(.*)',
  '/forum(.*)',
]);

export const onRequest = clerkMiddleware((auth, context) => {
  if (!auth().userId && isProtectedRoute(context.request)) {
    return auth().redirectToSignIn();
  }
});

Next Steps

Read the official @clerk/astro documentation
Start from a template with the Clerk + Astro Quickstart project

Lucia

Lucia is a resource for implementing session-based authentication in a number of frameworks, including Astro.

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

Community Resources

Using Microsoft Entra Id EasyAuth with Astro and Azure Static Web App

ساهم

المجتمع

Authentication

Auth.js

Installation

Manual installation

Configuration

Usage

Next Steps

Better Auth

Installation

Configuration

Usage

Next Steps

Clerk

Installation

Configuration

Usage

Next Steps

Lucia

Guides

Examples

Community Resources

بماذا تفكّر؟

انشئ مشكلة على GitHub

أرسل تعليقات

أرسل تعليقات