CursosEmpresasBlogLiveConfPrecios

Implementación de Cookies de Acceso en Shopify con Next.js

Clase 42 de 57 • Curso de Next.js 14

Clase anteriorSiguiente clase
Resumen

¿Cómo se autentica un usuario con un token de acceso en Shopify?

Implementar un sistema de autenticación sólido es esencial para garantizar la seguridad y el buen funcionamiento de cualquier aplicación web. Uno de los métodos más comunes es el uso de tokens de acceso almacenados en cookies. Este método no solo es seguro, sino también muy eficaz para manejar sesiones de usuario. Aquí, te mostraré cómo hacerlo utilizando la API de Shopify.

¿Cómo crear un access token con la API de Shopify?

Empezamos creando un script dedicado para generar tokens de acceso. Para ello:

  1. Organización del proyecto: Crea una nueva carpeta utils dentro del directorio source. Dentro de utils, añade una subcarpeta llamada out y un archivo create_access_token.js donde residirá el script para generar el token.

  2. Uso de Postman: Nos dirigimos a Postman para crear el token de acceso. Necesitarás dos variables: el email y la contraseña del usuario. Al enviar esta consulta, recibirás un token de acceso que podrás implementar con cookies.

export const createAccessToken = async (email, password) => {
  const client = getGraphQLClient(); // Obtenemos el cliente GraphQL

  const { data } = await client.mutate({
    mutation: CustomerAccessTokenMutation,
    variables: { email, password },
  });

  if (data) {
    const { accessToken, expiresAt } = data.customerAccessTokenCreate.customerAccessToken;

    const cookieStore = cookies();
    cookieStore.set('accessToken', accessToken, {
      path: '/',
      expires: new Date(expiresAt),
      httpOnly: true,
      sameSite: 'strict',
    });
  }
};

En este ejemplo, aseguramos que el token se almacene de forma segura en una cookie con opciones como httpOnly y sameSite: 'strict'.

¿Cómo se almacena el token en una cookie?

El siguiente paso es almacenar el token en una cookie una vez que lo obtienes. Next.js provee una herramienta útil y sencilla para manejar cookies en el servidor.

  1. Instanciación de la cookie: Usa las capacidades de Next.js para gestionar las cookies. Crea un cookieStore y verifica la existencia del token antes de almacenar los datos de forma segura.

  2. Protección de la cookie: Es esencial establecer prácticas seguras al configurar las cookies, como usar httpOnly para evitar el acceso del lado del cliente, y sameSite: 'strict' para limitar el uso de la cookie solo en tu sitio.

¿Cuáles son las consideraciones de seguridad y mejoras?

El sistema de autenticación que hemos visto es eficaz, pero siempre hay margen para mejorar la seguridad:

  • Encriptación de la cookie: Actualmente, el token de acceso se guarda en texto plano. Para protegerlo de posibles ataques y robo de identidad, considera encriptar la cookie para dificultar el acceso no autorizado.

  • Manejo de errores: Implementa estructuras try-catch para gestionar y solucionar errores de manera eficaz. Esto evita que la aplicación falle inesperadamente por fallas en la red o errores de autenticación.

  • Verificación de contraseñas: Mejora el flujo de registro asegurando que las contraseñas y sus confirmaciones coincidan antes de proceder con acciones importantes.

Estos consejos no solo incrementan la seguridad de tu aplicación, sino que también mejoran su fiabilidad y la experiencia del usuario.

Con estas herramientas en mano, tendrás un robusto sistema de autenticación mediante tokens de acceso. Te invitamos a seguir experimentando e implementando estas técnicas, ¡y no olvides seguir aprendiendo y mejorando tu aplicación día a día!