> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> Aprende cómo y dónde almacenar los tokens utilizados en la autenticación basada en tokens.

# Almacenamiento de tokens

<Card title="Descripción general">
  Conceptos clave

  * La forma en que decidas almacenar el token es fundamental para proteger tu aplicación frente a ataques maliciosos.
  * Revisa los escenarios de cada tipo de aplicación.
  * Decide qué método se adapta mejor a tu tecnología.
</Card>

Proteger las SPA que realizan llamadas a API conlleva sus propias consideraciones. Debes asegurarte de que los tokens y otros datos sensibles no sean vulnerables a [cross-site scripting](https://owasp.org/www-community/attacks/xss/) (XSS) ni puedan ser leídos por JavaScript malicioso.

Para obtener más información, consulta [JWT Handbook](https://auth0.com/resources/ebooks/jwt-handbook) y [The Ultimate Guide to Next.js Authentication with Auth0](https://auth0.com/blog/ultimate-guide-nextjs-authentication-auth0/?utm_source=twitter\&utm_medium=sc\&utm_campaign=nextjs_authn_guide).

<div id="nextjs-static-site-scenarios">
  #### Escenarios de sitios estáticos de Next.js
</div>

Cuando estás creando una aplicación Next.js, la autenticación puede ser necesaria en los siguientes casos:

1. Al acceder a una página
2. Al acceder a una ruta de API
3. Cuando tu aplicación llama a una API alojada fuera de tu aplicación Next.js en nombre del usuario

Cuando hay un servidor disponible, tu aplicación puede gestionar la interacción con Auth0 y crear una sesión, pero en este modelo no tenemos un backend. Todo el trabajo ocurre en el frontend:

1. El usuario es redirigido a Auth0.
2. Cuando el usuario haya iniciado sesión correctamente, será redirigido de vuelta a la aplicación.
3. El cliente completará el intercambio del código de autorización con Auth0 y recuperará el `id_token` y el `access_token` del usuario, que se almacenarán en memoria.

   <Frame>
     <img src="https://mintcdn.com/translations/6GE5Z24GDCZehiJ9/docs/images/cdy7uua7fh8z/6a4aA0TH8PJQpvhkLaGSIp/e38aae00318515f2a0efa0dfce24dca2/in-memory-token-storage.png?fit=max&auto=format&n=6GE5Z24GDCZehiJ9&q=85&s=a355d66bcb483b20eaede4a54bbd36bd" alt="Diagrama de prácticas recomendadas para el almacenamiento de tokens en memoria" width="600" height="462" data-path="docs/images/cdy7uua7fh8z/6a4aA0TH8PJQpvhkLaGSIp/e38aae00318515f2a0efa0dfce24dca2/in-memory-token-storage.png" />
   </Frame>

<Tabs>
  <Tab title="Aplicación web tradicional">
    Si tu aplicación usa un escenario de inicio de sesión que no requiere llamadas a la API, solo se necesita un token de ID. No es necesario almacenarlo. Puedes validarlo y obtener de él los datos que necesites.

    Si tu aplicación necesita llamar a APIs en nombre del usuario, se necesitan tokens de acceso y, opcionalmente, tokens de actualización. Estos pueden almacenarse del lado del servidor o en una cookie de sesión. La cookie debe estar cifrada y tener un tamaño máximo de 4 KB. Si los datos que se van a almacenar son muchos, almacenar tokens en la cookie de sesión no es una opción viable.

    Usa los siguientes tipos de flujo en estos escenarios:

    * [Authorization Code Flow](/es/docs/get-started/authentication-and-authorization-flow/authorization-code-flow)
    * [Guías de inicio rápido para aplicaciones web regulares](/es/docs/quickstart/webapp)
  </Tab>

  <Tab title="Aplicación nativa/móvil">
    Almacena los tokens en un almacenamiento seguro que ofrezca el sistema operativo y limita el acceso a ese almacenamiento. Por ejemplo, usa KeyStore para Android y KeyChain para iOS.

    Usa los siguientes tipos de flujo en estos escenarios:

    * [Authorization Code Flow with Proof Key for Code Exchange](/es/docs/get-started/authentication-and-authorization-flow/authorization-code-flow-with-pkce)
    * [Guardar y renovar tokens para Swift](/es/docs/libraries/auth0-swift/auth0-swift-save-and-renew-tokens)
    * [Guías de inicio rápido para aplicaciones nativas/móviles](/es/docs/quickstart/native)
  </Tab>

  <Tab title="Aplicación de página única">
    Recomendamos usar el [Auth0 SPA SDK](/es/docs/libraries/auth0-single-page-app-sdk) para que gestione por ti el almacenamiento de tokens, la gestión de sesiones y otros detalles.

    Cuando la SPA llama únicamente a una API servida desde un dominio que puede compartir cookies con el dominio de la SPA, no se necesitan tokens. OAuth añade vectores de ataque adicionales sin aportar valor extra y debe evitarse en favor de un enfoque tradicional basado en cookies.

    Cuando la SPA llama a varias APIs que residen en un dominio diferente, se necesitan tokens de acceso y, opcionalmente, tokens de actualización.

    * Si el backend de la SPA puede gestionar las llamadas a la API, entonces funciona de forma similar a una aplicación web tradicional que gestiona tokens del lado del servidor mediante:

      * [Authorization Code Flow](/es/docs/get-started/authentication-and-authorization-flow/authorization-code-flow)
      * [Authorization Code Flow with Proof Key for Code Exchange](/es/docs/get-started/authentication-and-authorization-flow/authorization-code-flow-with-pkce)
    * Si el backend de la SPA no puede gestionar las llamadas a la API, entonces funciona de forma similar a una aplicación móvil que almacena tokens en el backend de la SPA, pero la SPA necesita obtener los tokens desde el backend para realizar solicitudes a la API. Se debe establecer un protocolo entre el backend y la SPA para permitir la transferencia segura del token desde el backend a la SPA.
    * Si tienes una SPA **sin** un servidor backend correspondiente, tu SPA debe solicitar nuevos tokens al iniciar sesión y almacenarlos en memoria sin ningún tipo de persistencia. Para hacer llamadas a la API, tu SPA usaría entonces la copia en memoria del token.

    <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
      De conformidad con las especificaciones de OAuth2, cuando un navegador solicita un Token de actualización desde el endpoint /token, Auth0 solo devolverá un Token de actualización si [Refresh Token Rotation](/es/docs/secure/tokens/refresh-tokens/refresh-token-rotation) está habilitada para ese cliente.
    </Callout>

    Para obtener más detalles, consulta [Auth0 SPA SDK en GitHub](https://github.com/auth0/auth0-spa-js).
  </Tab>
</Tabs>

<div id="browser-in-memory-scenarios">
  ### Escenarios de almacenamiento en memoria en el navegador
</div>

Auth0 recomienda almacenar los tokens en la memoria del navegador como la opción más segura. Usar [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) para gestionar la transmisión y el almacenamiento de los tokens es la mejor forma de protegerlos, ya que los Web Workers se ejecutan en un ámbito global separado del resto de la aplicación. Use Auth0 SPA SDK, cuya opción de almacenamiento predeterminada es el almacenamiento en memoria mediante Web Workers.

Si no puede usar Web Workers, Auth0 recomienda como alternativa usar [clausuras de JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures#emulating_private_methods_with_closures) para emular métodos privados.

Use Auth0 SPA SDK, cuya opción de almacenamiento predeterminada es el almacenamiento en memoria, para aprovechar tanto Web Workers como clausuras de JavaScript según el tipo de token.

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  El método de almacenamiento en memoria en el navegador **no** ofrece persistencia entre recargas de la página ni entre pestañas del navegador.
</Callout>

<div id="browser-local-storage-scenarios">
  ### Escenarios de almacenamiento local del navegador
</div>

Usar el almacenamiento local del navegador puede ser una alternativa viable a los mecanismos que requieren recuperar el <Tooltip tip="Token de acceso: Credencial de autorización, en forma de una cadena opaca o JWT, utilizada para acceder a una API." cta="Ver glosario" href="/es/docs/glossary?term=access+token">token de acceso</Tooltip> desde un iframe y a la autenticación basada en cookies entre dominios cuando esto no es posible debido a restricciones del navegador (por ejemplo, ITP2).

<Warning>
  Almacenar tokens en el almacenamiento local del navegador permite mantenerlos entre recargas de página y pestañas del navegador. Sin embargo, si un atacante logra ejecutar JavaScript en la SPA mediante un ataque de cross-site scripting (XSS), puede recuperar los tokens almacenados en el almacenamiento local. Una vulnerabilidad que permita llevar a cabo un ataque XSS con éxito puede estar en el código fuente de la SPA o en cualquier código JavaScript de terceros (como Bootstrap, jQuery o Google Analytics) incluido en la SPA.
</Warning>

Para reducir los riesgos de seguridad si tu SPA usa flujos implícitos (en su lugar, te recomendamos usar el flujo de código de autorización con PKCE) o híbridos, puedes reducir el tiempo absoluto de expiración del token. Esto reduce el impacto de un ataque XSS reflejado (pero no de uno persistente). Para reducir el tiempo de expiración, ve a **Dashboard > APIs > Settings > Token Expiration For Browser Flows (Seconds)**.

Reduce al mínimo necesario la cantidad de código JavaScript de terceros incluido desde una fuente externa a tu dominio (como enlaces a jQuery, Bootstrap, Google Analytics, etc.). Reducir el código JS de terceros disminuye la probabilidad de una vulnerabilidad XSS. También es más seguro realizar comprobaciones de [Subresource Integrity (SRI)](https://developer.mozilla.org/en-US/docs/Web/Security/Defenses/Subresource_Integrity) en scripts de terceros (cuando sea posible) para verificar que los recursos obtenidos se entregan sin manipulaciones inesperadas.

<div id="learn-more">
  ## Más información
</div>

* [ID Tokens](/es/docs/secure/tokens/id-tokens)
* [Tokens de acceso](/es/docs/secure/tokens/access-tokens)
* [Tokens de actualización](/es/docs/secure/tokens/refresh-tokens)
* [Prácticas recomendadas para tokens](/es/docs/secure/tokens/token-best-practices)