--- title: "Autenticar usuarios en Astro con Clerk y React" description: "¿Cómo autenticar usuarios en la aplicación Astro usando React y Clerk?" source: "https://www.launchfa.st/es/blog/react-astro-clerk" author: "Rishi Raj Jain" created_at: 2024-04-12T00:00:00.000Z --- > **Site index for agents** > Fetch https://www.launchfa.st/llms.txt to discover every page on this site. > Every page is also available as Markdown by appending `.md` to its URL. Authenticating users in Astro with Clerk and React En esta guía, aprenderá cómo autenticar usuarios en una aplicación Astro usando Clerk y React. Pasará por el proceso de configuración de un nuevo proyecto Astro, habilitando la representación del lado del servidor usando el adaptador Nodejs e integrando Clerk para autenticar usuarios sin problemas. ## Requisitos previos Necesitará lo siguiente: - [Nodejs 18](https://nodejs.org/en/blog/announcements/v20-release-announce) o posterior - Una cuenta de [Secretario](https://dashboardclerk.com) ## Tabla de contenido - [Crear una nueva aplicación Astro](#crea-una-nueva-aplicación-astro) - [Integra React en tu proyecto Astro](#integra-react-en-tu-proyecto-astro) - [Integra el adaptador Nodejs en tu proyecto Astro](#integra el adaptador-nodejs en tu-proyecto-astro) - [Crear una nueva solicitud de secretario](#crear-una-nueva-aplicación-de-secretario) - [Integra Clerk en tu proyecto Astro](#integra Clerk-en-tu-proyecto-astro) - [Instalar el SDK de Clerk's Community para Astro](#install-the-clerks-community-sdk-for-astro) - [Interceptar todas las solicitudes entrantes utilizando el middleware Astro](#interceptar-todas-las-solicitudes-entrantes-utilizando-astro-middleware) - [Crear la ruta índice](#crear-la-ruta-índice) - [Crear una página de inicio de sesión personalizada](#create-a-custom-sign-in-page) - [Crea y prueba tu aplicación Astro localmente](#construye y prueba-tu-aplicación-astro-localmente) ## Crea una nueva aplicación Astro Comencemos creando un nuevo proyecto Astro. Ejecute el siguiente comando: ```bash npm create astro@latest my-app ``` `npm create astro` es la forma recomendada de desarrollar rápidamente un proyecto Astro Cuando se le solicite, elija: - `Empty` cuando se le pregunta cómo iniciar el nuevo proyecto - `Sí` cuando se le pregunte si planea escribir Typecript - `Estricto` cuando se le pregunta qué tan estricto debe ser Typecript. - `Sí` cuando se le solicita instalar dependencias - `Sí` cuando se le solicita inicializar un repositorio de git Una vez hecho esto, puede ir al directorio del proyecto e iniciar la aplicación: ```bash cd my-app npm run dev ``` La aplicación debería estar ejecutándose en [localhost:4321](http://localhost:4321/) Ahora, pasemos a integrar React en tu aplicación Astro. ## Integra React en tu proyecto Astro Para crear interfaces de usuario dinámicas con Clerk, integrará React en su proyecto Astro. Ejecute el siguiente comando: ```bash npx astro add react ``` `npx` nos permite ejecutar paquetes binarios npm sin tener que instalarlo primero globalmente Cuando se le solicite, elija lo siguiente: - `Sí` cuando se le pregunta si desea instalar las dependencias de React - `Sí` cuando se le pregunta si desea realizar cambios en el archivo de configuración de Astro - `Sí` cuando se le pregunta si desea realizar cambios en el archivo `tsconfigjson` Ahora, pasemos a habilitar la renderización del lado del servidor en su aplicación Astro. ## Integre el adaptador Nodejs en su proyecto Astro Para autenticar y mantener sesiones de usuario con Clerk, habilitará la representación del lado del servidor en su proyecto Astro a través del adaptador Nodejs. Ejecute el siguiente comando: ```bash npx astro add node ``` Cuando se le solicite, elija lo siguiente: - `Sí` cuando se le pregunta si desea instalar las dependencias de Nodejs - `Sí` cuando se le pregunta si desea realizar cambios en el archivo de configuración de Astro Ahora, pasemos a crear una nueva aplicación de Secretario. ## Crear una nueva aplicación de secretario - En su [Panel del empleado](https://dashboardclerk.com/), para crear una nueva aplicación, presione la tarjeta **+ Nueva aplicación** para comenzar a seleccionar de forma interactiva su propio formulario de configuración de autenticación. Create a new Clerk Application - Con un nombre de aplicación de su elección, habilite la autenticación de usuario mediante credenciales activando **Correo electrónico** y permita la autenticación de usuario mediante inicio de sesión social activando proveedores como **Google**, **GitHub** y * *Microsoft** Select authentication providers - Una vez que se crea la aplicación en el panel de Clerk, de forma predeterminada se le mostrarán las claves API de su aplicación para Nextjs. Copie y almacene de forma segura estas claves API en un archivo llamado `env` para usar en su aplicación Astro de la siguiente manera: ```bash # .env # Clerk Environment Variables PUBLIC_ASTRO_APP_CLERK_PUBLISHABLE_KEY="pk_test_..." CLERK_SECRET_KEY="sk_test_..." ``` Clerk Environment Variables Ahora, pasemos a integrar Clerk en tu proyecto Astro.## Integra Clerk en tu proyecto Astro ### Instale el SDK de la comunidad de secretarios para Astro Ejecute el siguiente comando para instalar el paquete necesario para crear autenticación con Clerk: ```bash npm install astro-clerk-auth ``` El comando instala la siguiente biblioteca: - `astro-clerk-auth`: un paquete que integra Clerk con Astro a través de soporte de Middleware y componentes integrados de React y Astro para Clerk Además, realice las siguientes adiciones en `astroconfigmjs` para usar la integración de Clerk: ```tsx // File: astro.config.mjs import node from "@astrojs/node"; import react from "@astrojs/react"; import clerk from "astro-clerk-auth"; // [!code ++] // [!code focus] import { defineConfig } from "astro/config"; export default defineConfig({ output: "server", adapter: node({ mode: "standalone", }), integrations: [ react(), clerk({ // [!code ++] // [!code focus] afterSignInUrl: "/", // [!code ++] // [!code focus] afterSignUpUrl: "/", // [!code ++] // [!code focus] }), // [!code ++] // [!code focus] ], }); ``` ### Intercepta todas las solicitudes entrantes utilizando el middleware Astro Para asegurarse de que cada solicitud mantenga una sesión de usuario accesible a través de los puntos finales del lado del servidor y en las páginas "astro" durante la representación del lado del servidor, creará un middleware que utilice Clerk para decodificar/codificar una sesión de usuario a partir de la cookie. Cree un archivo `middlewarets` en el directorio `src` con el siguiente código: ```tsx // File: src/middleware.ts import { clerkMiddleware } from "astro-clerk-auth/server"; export const onRequest = clerkMiddleware(); ``` ### Crear la ruta de índice Cree un `Appjsx` dentro del directorio `src` con el siguiente código: ```tsx import { SignedIn, SignedOut, UserButton } from "astro-clerk-auth/client/react"; export default function () { return <> Sign In } ``` El código anterior hace lo siguiente: - Importa los componentes `SignedIn` y `SignedOut` que describen el estado del usuario, ya sea que haya iniciado sesión o no. - Crea estados condicionales, mostrando un botón "Iniciar sesión" si el usuario ha cerrado sesión; de lo contrario, presenta un componente "UserButton" interactivo que permite al usuario cerrar sesión y administrar su configuración. Para usar este componente de React en la página de inicio de su aplicación, realice los siguientes cambios en el archivo `src/pages/indexastro`: ```astro --- // File: src/pages/index.astro import App from "../App"; // [!code ++] // [!code focus] --- Astro // [!code ++] // [!code focus] ``` Los cambios anteriores importan el componente React `App` y usan la directiva client:load de Astro para asegurarse de que este componente React se hidrate inmediatamente en la página. ### Crear una página de inicio de sesión personalizada Cree un archivo `sign-inastro` dentro del directorio `src/pages` con el siguiente comando: ```astro --- // File: src/pages/sign-in.astro import { SignIn as ClerkSignIn } from "astro-clerk-auth/client/react"; --- Astro ``` El código anterior hace lo siguiente: - Importa el componente `SignIn` que muestra todos los métodos de autenticación habilitados al crear la aplicación Clerk a través del panel - Utilice la directiva client:load de Astro para asegurarse de que este componente de React se hidrate inmediatamente en la página. ## Cree y pruebe su aplicación Astro localmente Para probar la aplicación, prepare una compilación y ejecute el servidor de vista previa usando el siguiente comando: ```bash npm run build && node ./dist/server/entry.mjs ``` ## Conclusión En esta guía, habilitó la autenticación de usuario a través de varios métodos con la ayuda de Clerk en una aplicación de Astro. También adquirió algo de experiencia en el uso de React en Astro y comprendió cómo puede ayudarlo a crear interfaces de usuario dinámicas. Si tiene alguna pregunta o comentario, no dude en comunicarse conmigo en [Twitter](https://twitter.com/direct_messages/create/rishi_raj_jain_)