> ## Documentation Index
> Fetch the complete documentation index at: https://docs.gcore.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Add token auto-refresh to a video player
> Add token auto-refresh to a video player with TokenRefreshPlugin for hls.js and dash.js streams.
The examples below use the [demo token endpoint](/streaming/interaction-with-cdn/token-api-fastedge#demo-endpoint). Replace `TOKEN_API_URL` with an authenticated backend endpoint before deploying to production. The [live demo](https://g-core.github.io/gcore-videoplayer-js/example/protected-content.html) uses the Gcore Video Player tab below and shows token status and refresh log in real time.
**Gcore Video Player**
`TokenRefreshPlugin` handles token rotation without a custom URL loader or request interceptor. The plugin reads the initial token from the source URL, rewrites every outgoing request, and calls `getToken` automatically before expiry.
The package is on GitHub at [github.com/G-Core/gcore-videoplayer-js](https://github.com/G-Core/gcore-videoplayer-js).
```html theme={null}
```
**hls.js**
For React, Vue, Angular, or any setup using [hls.js](https://github.com/video-dev/hls.js) directly, configure a custom URL-rewriting loader and a refresh timer.
`TokenRewriteLoader` extends the default hls.js XHR loader and rewrites the `{token}/{expires}` path segments in every request before the connection opens. A chained `setTimeout` scheduler fetches a fresh token before expiry.
```html theme={null}
```
**dash.js**
For MPEG-DASH streams, [dash.js](https://github.com/Dash-IF/dash.js) provides a `RequestModifier` extension. The same token-rewriting logic as hls.js applies — only the manifest suffix differs.
The demo token API returns HLS URLs ending in `master.m3u8`. For DASH, replace that suffix with `index.mpd` — the token and expires values embedded in the path are the same for both formats.
```html theme={null}
```