Skip to content

Latest commit

 

History

History
232 lines (163 loc) · 9.9 KB

index.mdx

File metadata and controls

232 lines (163 loc) · 9.9 KB
title keywords contributors
Qwik City y Auth.js
authentication, autenticación, auth, oauth
the-r3aper7
ulic75

Auth.js

Auth.js permite a los desarrolladores configurar el flujo de autenticación en su aplicación web. Admite una amplia gama de proveedores de autenticación y otras opciones. Ten en cuenta que la biblioteca Auth.js aún se encuentra en una etapa previa a la versión 1.0 y podría tener errores.

Instalación

Puedes agregar Auth.js fácilmente utilizando el siguiente script de inicialización de Qwik:

npm run qwik add auth

Este comando agregará los siguientes paquetes:

  • @auth/core
  • @builder.io/qwik-auth

y creará un nuevo archivo llamado plugin@auth.ts con una configuración de ejemplo.

Acción Manual Requerida

Después de instalar el paquete de autenticación utilizando npm run qwik add auth, deberás agregar el paquete @auth/core a la configuración de optimización de dependencias del archivo vite.config.js:

export default defineConfig(() => {
  return {
    plugins: [qwikCity(), qwikVite(), tsconfigPaths()],
    preview: {
      headers: {
        'Cache-Control': 'public, max-age=600',
      },
    },
    optimizeDeps: {
      include: [ "@auth/core" ]
    }
  };
});

API de Qwik

useAuthSession

Un routerLoader$ que devuelve un objeto de sesión o un objeto vacío si no hay sesión. El contenido del objeto de sesión devuelto es configurable con el callback de sesión. Los datos de sesión también se pueden obtener utilizando la API REST de session.

import { component$ } from '@builder.io/qwik';
import { useAuthSession } from '~/routes/plugin@auth';

export default component$(() => {
  const session = useAuthSession();
  return <p>{session.value?.user?.email}</p>;
});

useAuthSignin

Una routeAction$ utilizada para iniciar un flujo de inicio de sesión o enviar al usuario a la página de inicio de sesión que muestra todos los proveedores posibles. El token CSRF se maneja internamente al iniciar sesión con useAuthSignin.

Parámetros

  • providerId: Un parámetro opcional de tipo string con el nombre del proveedor. Cuando se proporciona, iniciará la Solicitud de Autorización a tu Proveedor de Identidad. Cuando se omite, se redirigirá a la página de inicio de sesión integrada/sin marca.
  • options: Un objeto opcional de opciones.
    • callbackUrl: Una cadena opcional que especifica a qué URL se redirigirá al usuario después de iniciar sesión. Por defecto, es la URL de la página desde la que se inició la sesión.
  • authorizationParams: Un objeto opcional de parámetros adicionales enviados al endpoint /authorize. Consulta la especificación de Solicitud de Autorización OIDC para obtener algunas ideas.

NOTA: También puedes establecer authorizationParams a través de la configuración provider.authorizationParams

Ejemplo de uso de useAuthSignin con el componente <Form> y los parámetros opcionales providerId y options.callbackUrl:

import { component$ } from '@builder.io/qwik';
import { Form } from '@builder.io/qwik-city';
import { useAuthSignin } from '~/routes/plugin@auth';

export default component$(() => {
  const signIn = useAuthSignin();
  return (
    <Form action={signIn}>
      <input type="hidden" name="providerId" value="github" />
      <input type="hidden" name="options.callbackUrl" value="http://qwik-auth-example.com/dashboard" />
      <button>Iniciar sesión</button>
    </Form>
  );
});

Ejemplo de uso de useAuthSignin programáticamente con los parámetros opcionales providerId y options.callbackUrl:

import { component$ } from '@builder.io/qwik';
import { useAuthSignin } from '~/routes/plugin@auth';

export default component$(() => {
  const signIn = useAuthSignin();
  return (
    <button onClick$={() => signIn.submit({ providerId: 'github', options: { callbackUrl: 'http://qwik-auth-example.com/dashboard' } })}>Iniciar sesión</button>
  );
});

useAuthSignout

Una routeAction$ utilizada para iniciar un flujo de cierre de sesión. La sesión del usuario se invalidará/eliminará de la cookie/base de datos, según el flujo que elijas para almacenar las sesiones.

Parámetros

  • callbackUrl: Una cadena opcional que especifica a qué URL se redirigirá al usuario después de cerrar sesión. Por defecto, es la URL de la página desde la que se inició la sesión.

La 'callbackUrl' debe considerarse válida por el controlador de devolución de llamada (callback) de redirección. De forma predeterminada, requiere que la URL sea una URL absoluta en el mismo nombre de host, o también puedes proporcionar una URL relativa que comience con una barra diagonal. Si no coincide, se redirigirá a la página de inicio. Puedes definir tu propio controlador de devolución de llamada de redirección para permitir otras URL.

Ejemplo de uso de useAuthSignout con el componente <Form> y el parámetro opcional callbackUrl:

import { component$ } from '@builder.io/qwik';
import { Form } from '@builder.io/qwik-city';
import { useAuthSignout } from '~/routes/plugin@auth';

export default component$(() => {
  const signOut = useAuthSignout();
  return (
    <Form action={signOut}>
      <input type="hidden" name="callbackUrl" value="/signedout" />
      <button>Cerrar sesión</button>
    </Form>
  );
});

Ejemplo de uso de useAuthSignout programáticamente con callbackUrl optional:

import { component$ } from '@builder.io/qwik';
import { useAuthSignout } from '~/routes/plugin@auth';

export default component$(() => {
  const signOut = useAuthSignout();
  return <button onClick$={() => signOut.submit({ callbackUrl: '/signedout' })}>Cerrar sesión</button>;
});

REST API

Todas las mismas API REST que proporciona Auth.js están disponibles.

signin

GET /api/auth/signin

Muestra la página de inicio de sesión integrada/sin marca.

POST /api/auth/signin/:provider

Inicia un flujo de inicio de sesión específico del proveedor. En el caso de un proveedor de OAuth, llamar a este endpoint iniciará la Solicitud de Autorización a tu Proveedor de Identidad. Este endpoint también es utilizado por la acción useAuthSignin internamente.

callback

GET/POST /api/auth/callback/:provider

signout

GET /api/auth/signout

Muestra la página de cierre de sesión integrada/sin marca.

POST /api/auth/signout

Maneja el cierre de sesión del usuario; es una petición POST para evitar que enlaces maliciosos desencadenen el cierre de sesión de un usuario sin su consentimiento. La sesión del usuario se invalidará/eliminará de la cookie/base de datos, según el flujo que hayas elegido para almacenar las sesiones. Este endpoint también es utilizado por el método useAuthSignout internamente.

session

GET /api/auth/session

Devuelve un objeto de sesión seguro para el cliente, o un objeto vacío si no hay sesión. El contenido del objeto de sesión devuelto es configurable con el callback de sesión. Los datos de sesión también se pueden obtener utilizando el routerLoader useAuthSession.

csrf

GET /api/auth/csrf

Devuelve un objeto que contiene el token CSRF. En NextAuth.js, la protección CSRF está presente en todas las rutas de autenticación. Utiliza el "método de cookie de doble envío", que utiliza una cookie firmada HttpOnly, solo para el host. El token CSRF devuelto por este endpoint debe pasarse como una variable de formulario llamada csrfToken en todas las peticiones POST a cualquier endpoint de la API.

providers

GET /api/auth/providers

Devuelve una lista de servicios OAuth configurados y detalles (por ejemplo, URLs de inicio de sesión y de devolución de llamada) para cada servicio. Es útil para generar dinámicamente páginas de registro personalizadas y para verificar qué URLs de devolución de llamada están configuradas para cada proveedor de OAuth configurado.

Ejemplos

GitHub

  1. Sigue la Guía de OAuth de GitHub para obtener tu GitHub Client ID, GitHub Client Secrets y generar AUTH_SECRET utilizando openssl rand -base64 32 o Generador de Secretos.
  2. Dado que el plugin@auth.ts predeterminado utiliza GitHub como ejemplo, no es necesario cambiar nada allí. Sin embargo, se puede utilizar otro proveedor que no sea GitHub o se pueden agregar proveedores adicionales. Auth.js también admite muchas opciones adicionales que se pueden configurar en este archivo.
import { serverAuth$ } from '@builder.io/qwik-auth';
import GitHub from '@auth/core/providers/github';
import type { Provider } from '@auth/core/providers';

export const { onRequest, useAuthSession, useAuthSignin, useAuthSignout } = serverAuth$(
  ({ env }) => ({
    secret: env.get("AUTH_SECRET"),
    trustHost: true,
    providers: [
      GitHub({
        clientId: env.get("GITHUB_ID"),
        clientSecret: env.get("GITHUB_SECRET"),
      }),
    ] as Provider[],
  })
);
  1. Crea o edita el archivo .env.local en la raíz de tu proyecto para almacenar los secretos
GITHUB_ID=
GITHUB_SECRET=
AUTH_SECRET=

IMPORTANTE: Lee la documentación de Qwik sobre Variables de Entorno para asegurarte de que las estás utilizando de forma segura. Muchos secretos de proveedores deben mantenerse seguros y no estar expuestos al cliente/navegador.

  1. La aplicación está lista para implementar la autenticación utilizando Auth.js.
  2. ¡Disfruta!