# 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 [#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 [#prerequisites-8]

    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 [#implement-basic-authentication-8]

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

    ### Use a token [#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 [#reference-8]

    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)