# Use tokens (/en/realtime-media/voice/build/set-up-token-authentication/use-tokens/javascript)

> For AI agents: see the complete documentation index at [llms.txt](/llms.txt).

To protect your business, it is best practice to authenticate every client that joins a channel. This guide explains how to fetch an authentication token from your token server, use it to join a channel, and renew the token when it expires.

## Understand the tech

      
  
      
  
      
  
      
  
      
  
      
  
      
  
      
  
      
When a user attempts to connect to an Agora channel, your app retrieves a token from the token server in your security infrastructure. Your app then sends this token to Agora SDRTN® for authentication. Agora SDRTN® reads the information stored in the token to validate the request.

The following figure shows the call flow you implement to create step-up-authentication with Agora Voice Calling:

**Token authentication flow**

![token authentication flow](https://assets-docs.agora.io/images/video-sdk/token-authentication.svg)

## Prerequisites

Before starting, ensure that you have:

* Implemented the [Quickstart](../index.mdx) in your project.

* Deployed a token server using either of the following guides:

  * [Deploy a token server](deploy-token-server.mdx)
  * [Deploy a middleware server](middleware-token-server.md)

## Implement basic authentication

This section shows you how to implement basic authentication by acquiring a token and using it to join a channel.

### Use a token

1. **Import the components and hooks you need to handle the authentication workflow**:

   ```typescript
   import { useClientEvent, useRTCClient } from "agora-rtc-react";
   ```

2. **Retrieve a token from the authentication server**:

   ```typescript
   async function fetchRTCToken(channelName: string) {
    if (config.serverUrl !== "") {
     try {
      const response = await fetch(
       `${config.proxyUrl}${config.serverUrl}/rtc/${channelName}/publisher/uid/${config.uid}/?expiry=${config.tokenExpiryTime}`
      );
      const data = await response.json();
      console.log("RTC token fetched from server: ", data.rtcToken);
      return data.rtcToken;
     } catch (error) {
      console.error(error);
      throw error;
     }
    } else {
     return config.rtcToken;
    }
   }
   ```

3. **Handle the event triggered by Agora SDRTN® when the token is about to expire**:

   A token expires after the `tokenExpiryTime` specified in the call to the token server or after 24 hours, if the time is not specified. The `useTokenWillExpire` method receives a callback when the current token is about to expire so that a fresh token may be retrieved and used.

   ```typescript
   const useTokenWillExpire = () => {
    const agoraEngine = useRTCClient();
    useClientEvent(agoraEngine, "token-privilege-will-expire", () => {
     if (config.serverUrl !== "") {
      fetchRTCToken(config.channelName)
       .then((token: string) => {
        console.log("RTC token fetched from server: ", token);
        return agoraEngine.renewToken(token);
       })
       .catch((error) => {
        console.error(error);
       });
     } else {
      console.log("Please make sure you specified the token server URL in the configuration file");
     }
    });
   };
   ```

<CalloutContainer type="info">
  <CalloutDescription>
    The user ID and channel name used to join a channel must be consistent with the values used to generate the token.
  </CalloutDescription>
</CalloutContainer>

## Reference

This section contains content that completes the information on this page, or points you to documentation that explains other aspects to this product.

* [Reference app](https://github.com/AgoraIO/video-sdk-samples-reactjs/tree/main#samples)