> ## 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.

> Describe el SDK de Auth0 para aplicaciones de una sola página de React

# SDK de Auth0 para aplicaciones de una sola página de React

export const AuthCodeBlock = ({filename, icon, language, highlight, children}) => {
  const [displayText, setDisplayText] = useState(children);
  const [copyText, setCopyText] = useState(children);
  const wrapperRef = React.useRef(null);
  useEffect(() => {
    let unsubscribe = null;
    function init() {
      if (!window.autorun || !window.rootStore) {
        return;
      }
      unsubscribe = window.autorun(() => {
        let processedChildrenForDisplay = children;
        let processedChildrenForCopy = children;
        for (const [key, value] of window.rootStore.variableStore.values.entries()) {
          const escapedKey = key.replaceAll(/[.*+?^${}()|[\]\\]/g, (String.raw)`\$&`);
          let displayValue = value;
          if (key === "{yourClientSecret}" && value !== "{yourClientSecret}") {
            displayValue = value.substring(0, 3) + "*****ENMASCARADO*****";
          }
          processedChildrenForDisplay = processedChildrenForDisplay.replaceAll(new RegExp(escapedKey, "g"), displayValue);
          processedChildrenForCopy = processedChildrenForCopy.replaceAll(new RegExp(escapedKey, "g"), value);
        }
        setDisplayText(processedChildrenForDisplay);
        setCopyText(processedChildrenForCopy);
      });
    }
    if (window.rootStore) {
      init();
    } else {
      window.addEventListener("adu:storeReady", init);
    }
    return () => {
      window.removeEventListener("adu:storeReady", init);
      unsubscribe?.();
    };
  }, [children]);
  useEffect(() => {
    if (!wrapperRef.current) return;
    const originalWriteText = navigator.clipboard.writeText.bind(navigator.clipboard);
    let isOverriding = false;
    const handleClick = e => {
      const button = e.target.closest('[data-testid="copy-code-button"]');
      if (!button || !wrapperRef.current.contains(button)) return;
      isOverriding = true;
      navigator.clipboard.writeText = text => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
          return originalWriteText(copyText);
        }
        return originalWriteText(text);
      };
      setTimeout(() => {
        if (isOverriding) {
          isOverriding = false;
          navigator.clipboard.writeText = originalWriteText;
        }
      }, 100);
    };
    const wrapper = wrapperRef.current;
    wrapper.addEventListener('click', handleClick, true);
    return () => {
      wrapper.removeEventListener('click', handleClick, true);
      if (navigator.clipboard.writeText !== originalWriteText) {
        navigator.clipboard.writeText = originalWriteText;
      }
    };
  }, [copyText]);
  return <div ref={wrapperRef}>
      <CodeBlock filename={filename} icon={icon} language={language} lines highlight={highlight}>
        {displayText}
      </CodeBlock>
    </div>;
};

El SDK de React de Auth0 (auth0-react.js) es una biblioteca de JavaScript para implementar autenticación y autorización en aplicaciones React con Auth0. Proporciona un hook personalizado de React y otros componentes de orden superior para que puedas proteger aplicaciones React siguiendo prácticas recomendadas y escribiendo menos código.

El SDK de React de Auth0 se encarga de los detalles de las concesiones y los protocolos, la expiración y renovación de tokens, así como del almacenamiento y almacenamiento en caché de tokens. Internamente, implementa [Universal Login](/es/docs/authenticate/login/auth0-universal-login) y el [flujo de código de autorización con PKCE](/es/docs/get-started/authentication-and-authorization-flow/authorization-code-flow-with-pkce).

La biblioteca está [alojada en GitHub](https://github.com/auth0/auth0-react), donde puedes [obtener más información sobre la API](https://auth0.github.io/auth0-react/).

<div id="installation">
  ## Instalación
</div>

Tiene varias opciones para usar auth0-react.js en su proyecto.

* Desde [npm](https://npmjs.org/):

  `npm install @auth0/auth0-react`
* Desde [yarn](https://yarnpkg.com/):
  `yarn add @auth0/auth0-react`

<div id="getting-started">
  ## Primeros pasos
</div>

Primero, debes envolver tu aplicación en un único componente `Auth0Provider`. Esto proporcionará el contexto de React a los componentes que estén dentro de tu aplicación.

export const codeExample = `import React from 'react';
    import ReactDOM from 'react-dom';
    import { Auth0Provider } from '@auth0/auth0-react';
    import App from './App';
    ReactDOM.render(
      <Auth0Provider
        domain="{yourDomain}"
        clientId="{yourClientId}"
        authorizationParams={{
          redirect_uri: window.location.origin
        }}
    >
      <App />
    </Auth0Provider>,
    document.getElementById('app')
 );`;

<AuthCodeBlock children={codeExample} language="js" />

<div id="isloading-and-error">
  ## isLoading y error
</div>

Espera a que se inicialice el SDK y gestiona cualquier error con los estados `isLoading` y `error`.

```js lines theme={null}
import React from 'react';
import { useAuth0 } from '@auth0/auth0-react';
function Wrapper({ children }) {
  const {
    isLoading,
    error,
  } = useAuth0();
  if (isLoading) {
    return <div>Loading...</div>;
  }
  if (error) {
    return <div>Oops... {error.message}</div>;
  }
  return <>{children}</>;
}
export default Wrapper;
```

<div id="login">
  ## Login
</div>

Usa `loginWithRedirect` o `loginWithPopup` para iniciar la sesión de tus usuarios.

```js lines theme={null}
import React from 'react';
import { useAuth0 } from '@auth0/auth0-react';

function LoginButton() {
  const {
    isAuthenticated,
    loginWithRedirect,
  } = useAuth0();

  return !isAuthenticated && (
    <button onClick={loginWithRedirect}>Log in</button>
  );
}

export default LoginButton;
```

<div id="logout">
  ## Cerrar sesión
</div>

Use `logout` para cerrar la sesión de los usuarios. Asegúrese de que `returnTo` esté especificado en "Allowed Logout URLs" en el <Tooltip tip="Auth0 Dashboard: el producto principal de Auth0 para configurar sus servicios." cta="Ver glosario" href="/es/docs/glossary?term=Auth0+Dashboard">Auth0 Dashboard</Tooltip>.

```js lines theme={null}
import React from 'react';
import { useAuth0 } from '@auth0/auth0-react';

function LogoutButton() {
  const {
    isAuthenticated,
    logout,
  } = useAuth0();

  return isAuthenticated && (
    <button onClick={() => {
      logout({ 
        logoutParams: {
          returnTo: window.location.origin
        }
      });
    }}>Log out</button>
  );
}

export default LogoutButton;
```

<div id="user">
  ## Usuario
</div>

Accede a la información del perfil de usuario con el valor `user`.

```js lines theme={null}
import React from 'react';
import { useAuth0 } from '@auth0/auth0-react';

function Profile() {
  const { user } = useAuth0();

  return <div>Hello {user.name}</div>;
}

export default Profile;
```

<div id="use-with-a-class-component">
  ## Uso con un componente de clase
</div>

Utiliza el componente de orden superior `withAuth0` para añadir la propiedad `auth0` a los componentes de clase en lugar de usar el Hook.

```jsx lines theme={null}
import React, { Component } from 'react';
import { withAuth0 } from '@auth0/auth0-react';

class Profile extends Component {
  render() {
    const { user } = this.props.auth0;
    return <div>Hello {user.name}</div>;
  }
}

export default withAuth0(Profile);
```

<div id="protect-a-route">
  ## Proteger una ruta
</div>

Protege un componente de ruta mediante el componente de orden superior `withAuthenticationRequired`. Si se accede a esta ruta sin autenticarse, se redirigirá al usuario a la página de Login y, después del Login, de vuelta a esta página.

```js lines theme={null}
import React from 'react';
import { withAuthenticationRequired } from '@auth0/auth0-react';

const PrivateRoute = () => (<div>Private</div>);

export default withAuthenticationRequired(PrivateRoute, {
  // Muestra un mensaje mientras el usuario espera ser redirigido a la página de Login.
  onRedirecting: () => (<div>Redirecting you to the login page...</div>)
});
```

**Nota** Si utiliza un router personalizado, deberá proporcionar a `Auth0Provider` un método `onRedirectCallback` personalizado para realizar la acción que hace que el usuario vuelva a la página protegida. Consulte los ejemplos de [react-router](https://github.com/auth0/auth0-react/blob/master/EXAMPLES.md#1-protecting-a-route-in-a-react-router-dom-app), [Gatsby](https://github.com/auth0/auth0-react/blob/master/EXAMPLES.md#2-protecting-a-route-in-a-gatsby-app) y [Next.js](https://github.com/auth0/auth0-react/blob/master/EXAMPLES.md#3-protecting-a-route-in-a-nextjs-app-in-spa-mode).

<div id="call-an-api">
  ## Llamar a una API
</div>

Para llamar a una API protegida con un <Tooltip tip="Token de acceso: credencial de autorización, en forma de una cadena opaca o un JWT, que se utiliza para acceder a una API." cta="Ver glosario" href="/es/docs/glossary?term=Access+Token">Token de acceso</Tooltip>, asegúrate de especificar la `audience` y el `scope` de tu [token de acceso](/es/docs/secure/tokens/access-tokens/get-access-tokens), ya sea en `Auth0Provider` o en `getAccessTokenSilently`. Después, úsalo para llamar a una API protegida pasándolo en el encabezado `Authorization` de la solicitud.

```jsx lines expandable theme={null}
import React, { useEffect, useState } from 'react';
import { useAuth0 } from '@auth0/auth0-react';

const Posts = () => {
  const { getAccessTokenSilently } = useAuth0();
  const [posts, setPosts] = useState(null);

  useEffect(() => {
    (async () => {
      try {
        const token = await getAccessTokenSilently({
          authorizationParams: {
            audience: 'https://api.example.com/', // Valor en el campo Identifier para la API que se está llamando.
            scope: 'read:posts', // Scope que existe para la API que se está llamando. Puede crearlos a través de la Auth0 Management API o mediante el Auth0 Dashboard en la vista Permissions de su API.
          }
        });
        const response = await fetch('https://api.example.com/posts', {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        });
        setPosts(await response.json());
      } catch (e) {
        console.error(e);
      }
    })();
  }, [getAccessTokenSilently]);

  if (!posts) {
    return <div>Loading...</div>;
  }

  return (
    <ul>
      {posts.map((post, index) => {
        return <li key={index}>{post}</li>;
      })}
    </ul>
  );
};

export default Posts;
```