diff --git a/src/content/docs/es/guides/authentication.mdx b/src/content/docs/es/guides/authentication.mdx
index ec611bbb15782..a95e453511424 100644
--- a/src/content/docs/es/guides/authentication.mdx
+++ b/src/content/docs/es/guides/authentication.mdx
@@ -4,7 +4,7 @@ description: Una introducción a la autenticación en Astro
i18nReady: true
---
-import { Steps } from '@astrojs/starlight/components'
+import { Steps, Tabs, TabItem } from '@astrojs/starlight/components'
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import UIFrameworkTabs from '~/components/tabs/UIFrameworkTabs.astro'
import ReadMore from '~/components/ReadMore.astro'
@@ -17,7 +17,7 @@ La autenticación te permite personalizar áreas de tu sitio para personas que h
No hay una solución oficial de autenticación para Astro, pero puedes encontrar [integraciones de "auth" de la comunidad](https://astro.build/integrations/?search=auth) en el directorio de integraciones.
:::
-Consulta como [agregar autenticación con Supabase](/es/guides/backend/supabase/#agregar-autenticación-con-supabase) o [agregar autenticación con Firebase](/es/guides/backend/firebase/#agregando-autenticación-con-firebase) en nuestras guías dedicadas para estos servicios de backend.
+Consulta como [agregar autenticación con Supabase](/es/guides/backend/supabase/#agregar-autenticación-con-supabase) o [agregar autenticación con Firebase](/es/guides/backend/firebase/#agregando-autenticación-con-firebase) o [agregar autenticación con Scalekit](/es/guides/backend/scalekit/#adding-authentication-with-scalekit) en nuestras guías dedicadas para estos servicios de backend.
## Better Auth
@@ -66,9 +66,9 @@ Sigue la [Guía de Better Auth en Astro](https://www.better-auth.com/docs/integr
### Uso
-Better Auth ofrece un asistente `createAuthClient` para varios frameworks, incluidos Vanilla JS, React, Vue, Svelte y Solid.
+Better Auth ofrece un helper `createAuthClient()` para varios frameworks, incluidos Vanilla JS, React, Vue, Svelte y Solid.
-Por ejemplo, para crear un cliente para React, importa el ayudante desde `'better-auth/react'`:
+Por ejemplo, para crear un cliente para React, importa el helper desde `'better-auth/react'`:
@@ -113,19 +113,26 @@ Una vez configurado el cliente, puedes utilizarlo para autenticar usuarios en tu
```astro title="src/pages/index.astro"
---
-import Layout from 'src/layouts/Base.astro';
+import Layout from "../layouts/Base.astro";
---
+
```
@@ -134,36 +141,53 @@ A continuación, puedes utilizar el objeto `auth` para obtener los datos de sesi
```astro title="src/pages/index.astro"
---
-import { auth } from "../../../lib/auth"; // importa tu instancia de Better Auth
+import { auth } from "../lib/auth"; // importa tu instancia de Better Auth
export const prerender = false; // Innecesario en modo 'server'
-
+
const session = await auth.api.getSession({
- headers: Astro.request.headers,
+ headers: Astro.request.headers,
});
---
{session.user?.name}
```
-También puedes utilizar el objeto `auth` para proteger tus rutas mediante middleware. El siguiente ejemplo comprueba si un usuario que intenta acceder a una ruta del panel de control en la que ha iniciado sesión está autenticado y, si no es así, lo redirige a la página de inicio.
+También puedes utilizar el objeto `auth` para proteger tus rutas. El siguiente ejemplo utiliza [el enrutamiento avanzado de Astro](/es/guides/routing/#enrutamiento-avanzado) con [Hono](https://hono.dev/) para requerir una sesión autenticada en todas las rutas bajo `/dashboard`, redirigiendo a la página de inicio en caso contrario:
-```ts title="src/middleware.ts"
-import { auth } from "../../../auth"; // importa tu instancia de Better Auth
-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();
-});
+```ts title="src/fetch.ts"
+import { Hono, type Context, type Next } from "hono";
+import { astro } from "astro/hono";
+import { auth } from "./lib/auth"; // importa tu instancia de Better Auth
+
+const app = new Hono();
+
+// Protege todas las rutas bajo /dashboard.
+app.use("/dashboard", requireAuth);
+app.use("/dashboard/*", requireAuth);
+
+// Ejecuta el pipeline integrado de Astro para todas las demás solicitudes.
+app.use(astro());
+
+export default app;
+
+async function requireAuth(c: Context, next: Next) {
+ const session = await auth.api.getSession({
+ headers: c.req.raw.headers,
+ });
+ if (!session) {
+ return c.redirect("/");
+ }
+ return next();
+}
```
+:::caution
+No hay garantía de que el pathname público que ve un middleware sea el mismo que la ruta que Astro resuelve internamente: una `base` configurada, la codificación de la URL y las barras duplicadas pueden hacer que difieran. Un atacante puede explotar esta brecha para acceder a una ruta protegida con un pathname que tu comprobación no reconozca.
+
+No autorices solicitudes comparando `context.url.pathname` con una cadena de texto (p. ej. `context.url.pathname === "/dashboard"` o `context.url.pathname.startsWith("/dashboard")`). En su lugar, restringe el acceso en un enrutador que resuelva las rutas por ti.
+:::
+
### Siguientes pasos
- [Guía de Better Auth en Astro](https://www.better-auth.com/docs/integrations/astro)
@@ -207,37 +231,67 @@ Clerk proporciona componentes que te permiten controlar la visibilidad de las p
```astro title="src/pages/index.astro"
---
-import Layout from 'src/layouts/Base.astro';
-import { SignedIn, SignedOut, UserButton, SignInButton } from '@clerk/astro/components';
+import Layout from "../layouts/Base.astro";
+import { Show, UserButton, SignInButton } from "@clerk/astro/components";
export const prerender = false; // Innecesario en modo 'server'
---
+
-
-
-
-
-
-
+
+
+
+
+
+
```
-Clerk también te permite proteger rutas en el servidor usando middleware. Especifica qué rutas están protegidas y pide a los usuarios no autenticados que inicien sesión:
+Clerk también te permite proteger rutas en el servidor usando middleware:
-```ts title="src/middleware.ts"
-import { clerkMiddleware, createRouteMatcher } from '@clerk/astro/server';
+
-const isProtectedRoute = createRouteMatcher([
- '/dashboard(.*)',
- '/forum(.*)',
-]);
+1. Configura `clerkMiddleware()` como el manejador de `onRequest` en tu middleware:
-export const onRequest = clerkMiddleware((auth, context) => {
- if (!auth().userId && isProtectedRoute(context.request)) {
- return auth().redirectToSignIn();
- }
-});
-```
+ ```ts title="src/middleware.ts"
+ import { clerkMiddleware } from "@clerk/astro/server";
+
+ export const onRequest = clerkMiddleware({
+ /* opciones */
+ });
+ ```
+
+2. Accede al estado de autenticación en tus páginas y rutas de API con `locals.auth()`. Esto te permite comprobar si un usuario está autenticado y tomar las acciones adecuadas (p. ej. redirigir a la página de inicio de sesión o devolver una respuesta diferente).
+
+
+
+ ```astro title="src/pages/dashboard.astro"
+ ---
+ const { isAuthenticated, redirectToSignIn } = Astro.locals.auth();
+
+ if (!isAuthenticated) return redirectToSignIn();
+ ---
+
+
Dashboard
+ ```
+
+
+ ```ts title="src/pages/api/data.ts"
+ import type { APIRoute } from "astro";
+
+ export const GET: APIRoute = ({ locals }) => {
+ const { isAuthenticated, userId } = locals.auth();
+
+ if (!isAuthenticated) {
+ return new Response("Unauthorized", { status: 401 });
+ }
+
+ return Response.json({ userId });
+ };
+ ```
+
+
+
### Siguientes pasos
@@ -248,7 +302,7 @@ export const onRequest = clerkMiddleware((auth, context) => {
[Lucia](https://lucia-auth.com/) es un recurso para implementar la autenticación basada en sesiones en varios frameworks, incluido Astro.
-### Guides
+### Guías
@@ -265,6 +319,20 @@ export const onRequest = clerkMiddleware((auth, context) => {
- [Ejemplo de correo electrónico y contraseña con 2FA en Astro](https://github.com/lucia-auth/example-astro-email-password-2fa)
- [Ejemplo de correo electrónico y contraseña con 2FA y WebAuthn en Astro](https://github.com/lucia-auth/example-astro-email-password-webauthn)
+## Scalekit
+
+[Scalekit](https://scalekit.com/) es una plataforma de autenticación para aplicaciones B2B y de IA. Gestiona el flujo completo de OAuth 2.0 y OIDC, admitiendo métodos como el inicio de sesión social, SSO empresarial y enlaces mágicos. Luego, devuelve los tokens y un perfil de usuario sin requerir una UI de inicio de sesión personalizada.
+
+Un único entorno de Scalekit puede admitir múltiples aplicaciones. Esto te permite autenticarte una vez y compartir la misma sesión en todas tus propiedades (p. ej. `app.yourcompany.com` y `docs.yourcompany.com`).
+
+### Guía
+
+Sigue la [guía de Scalekit y Astro](/es/guides/backend/scalekit/) para agregar autenticación a tu proyecto SSR de Astro utilizando el inicio de sesión social, SSO empresarial y más.
+
+### Ejemplos
+
+- [Tutorial de un blog en Astro con autenticación de Scalekit (flujo de código de autorización)](https://github.com/scalekit-developers/astro-scalekit-auth-example)
+- [Código fuente del sitio de documentación para desarrolladores de Scalekit (flujo PKCE, sin SDK)](https://github.com/scalekit-inc/developer-docs)
## Recursos de la comunidad