# Use tokens (/en/realtime-media/video/build/authenticate-users/authentication-workflow/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 Video Calling:

<Accordions>
  <Accordion title="Token authentication flow">
    ![token authentication flow](https://assets-docs.agora.io/images/video-sdk/token-authentication.svg)
  </Accordion>
</Accordions>

## Prerequisites [#prerequisites]

Before starting, ensure that you have:

* Implemented the [Quickstart](/en/realtime-media/video/get-started-sdk) in your project.

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

  * [Deploy a token server](/en/realtime-media/video/build/authenticate-users/deploy-token-server)
  * [Deploy a middleware server](/en/realtime-media/video/build/authenticate-users/middleware-token-server)

## Implement basic authentication [#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 [#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="warning">
  <CalloutTitle>
    Note
  </CalloutTitle>

  <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]

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)