[🐛] Bug Report - token not set cannot authenticate

[abdulragib]

Issue

Describe your issue here
I am using stream video sdk in react native, when i am using in development version it work fine , but showing some errors,

WARN: [location-hint]: Failed to get location hint from https://hint.stream-io-video.com/ [AbortError: Aborted]
INFO ERROR: [coordinator]: Token not set, can't connect authenticate
INFO WARN: [coordinator]: connection:WS failed with code: -1 and reason: {"event": {"connection_id": "", "created_at": "2025-01-01T21:02:27.65087297Z", "error": {"StatusCode": 500, "code": -1, "details": [Array], "duration": "", "message": "", "more_info": ""}, "type": "connection.error"}}
INFO ERROR: [client]: Failed to connect [Error: {"code":-1,"StatusCode":500,"message":"WS failed with code: -1 and reason: ","isWSFailure":false}]

My setup code for React native:--

const streamTokenFun = async () => {
try {
const token = await fetchStreamToken(users[0]?.user_id);
return token;
} catch (error) {
Sentry.captureException(error);
console.error('Failed to fetch stream token:', error);
}
};

const apiKey: string = process.env.STREAM_UNLOCK || 'default_api_key'; // Replace with your Stream API key
useEffect(() => {
const initializeClient = async () => {
try {
const clientInstance = StreamVideoClient.getOrCreateInstance({
apiKey,
user: users[0] || {id: 'user'},
tokenProvider: streamTokenFun,
});
setClient(clientInstance);
} catch (error) {
Sentry.captureException(error);
console.error('Failed to initialize StreamVideo client:', error);
}
};
initializeClient();
}, [users]);

Steps to reproduce

Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error
   etc...

Expected behavior

Project Related Information

Customization

Click To Expand

# N/A

Offline support

• I have enabled offline support.
• The feature I'm having does not occur when offline support is disabled. (stripe out if not applicable)

Environment

Development and production

Click To Expand

package.json:

"dependencies": {
"@aws-sdk/client-s3": "^3.637.0",
"@babel/plugin-proposal-export-namespace-from": "^7.18.9",
"@notifee/react-native": "^7.8.2",
"@nozbe/watermelondb": "^0.27.1",
"@nozbe/with-observables": "^1.6.0",
"@react-native-camera-roll/camera-roll": "^7.8.1",
"@react-native-community/cli": "^14.0.0",
"@react-native-community/cli-platform-android": "^14.0.0",
"@react-native-community/netinfo": "^11.3.2",
"@react-native-firebase/app": "^20.5.0",
"@react-native-firebase/messaging": "^20.5.0",
"@react-navigation/bottom-tabs": "^6.5.20",
"@react-navigation/native": "^6.1.17",
"@react-navigation/native-stack": "^6.9.26",
"@rneui/base": "^4.0.0-rc.8",
"@rneui/themed": "^4.0.0-rc.8",
"@sentry/react-native": "^6.4.0",
"@shopify/flash-list": "^1.7.2",
"@stream-io/react-native-webrtc": "^124.0.2",
"@stream-io/video-react-native-sdk": "^1.5.2",
"@types/crypto-js": "^4.2.2",
"@types/react-dom": "^18.3.0",
"axios": "^1.7.4",
"babel-plugin-module-resolver": "^5.0.2",
"babel-plugin-react-native-web": "^0.19.12",
"css-loader": "^7.1.2",
"empty-module": "^0.0.2",
"i18n-iso-countries": "^7.12.0",
"patch-package": "^8.0.0",
"react": "18.2.0",
"react-dom": "^18.3.1",
"react-hook-form": "^7.51.4",
"react-native": "0.74.0",
"react-native-animatable": "^1.4.0",
"react-native-audio-recorder-player": "^3.6.11",
"react-native-background-timer": "^2.4.1",
"react-native-compressor": "^1.9.0",
"react-native-country-picker-modal": "^2.0.0",
"react-native-deep-linking": "^2.2.0",
"react-native-document-picker": "^9.3.0",
"react-native-fast-image": "^8.6.3",
"react-native-file-viewer": "^2.1.5",
"react-native-fs": "^2.20.0",
"react-native-gesture-handler": "^2.16.2",
"react-native-get-random-values": "^1.11.0",
"react-native-google-mobile-ads": "^14.4.2",
"react-native-image-picker": "^7.1.2",
"react-native-incall-manager": "^4.2.0",
"react-native-international-phone-number": "^0.7.6",
"react-native-linear-gradient": "^2.8.3",
"react-native-localize": "^3.1.0",
"react-native-mmkv": "2.12.2",
"react-native-otp-entry": "^1.6.1",
"react-native-paper": "^5.12.3",
"react-native-permissions": "^4.1.5",
"react-native-progress": "^5.0.1",
"react-native-raw-bottom-sheet": "^3.0.0",
"react-native-reanimated": "^3.13.0",
"react-native-safe-area-context": "^5.0.0",
"react-native-screens": "^4.4.0",
"react-native-share": "^11.0.2",
"react-native-svg": "^15.2.0",
"react-native-toast-notifications": "^3.4.0",
"react-native-tooltip-progress-bar": "^1.1.5",
"react-native-track-player": "^4.1.1",
"react-native-translator": "^1.2.0",
"react-native-vector-icons": "^10.1.0",
"react-native-video": "^6.5.0",
"react-native-web": "^0.19.12",
"react-native-web-linear-gradient": "^1.1.2",
"react-native-webview": "^13.12.4",
"rn-emoji-keyboard": "^1.7.0",
"rn-fetch-blob": "^0.12.0",
"rn-secure-storage": "^3.0.1",
"rxjs": "^7.8.1",
"socket.io-client": "^4.7.5",
"style-loader": "^4.0.0",
"vexo-analytics": "^1.4.0",
"zustand": "^4.5.5"
},
"devDependencies": {
"@babel/core": "^7.24.7",
"@babel/plugin-proposal-class-properties": "^7.18.6",
"@babel/plugin-proposal-decorators": "^7.24.7",
"@babel/plugin-transform-runtime": "^7.24.7",
"@babel/preset-env": "^7.24.7",
"@babel/preset-react": "^7.24.7",
"@babel/preset-typescript": "^7.24.7",
"@babel/runtime": "^7.20.0",
"@react-native/babel-preset": "0.74.83",
"@react-native/eslint-config": "0.74.83",
"@react-native/metro-config": "0.74.83",
"@react-native/typescript-config": "0.74.83",
"@svgr/webpack": "^8.1.0",
"@types/react": "^18.2.6",
"@types/react-native-background-timer": "^2.0.2",
"@types/react-native-vector-icons": "^6.4.18",
"@types/react-test-renderer": "^18.0.0",
"babel-jest": "^29.6.3",
"babel-loader": "^9.1.3",
"eslint": "^8.19.0",
"html-webpack-plugin": "^5.6.0",
"jest": "^29.6.3",
"metro-react-native-babel-preset": "^0.77.0",
"prettier": "2.8.8",
"react-native-dotenv": "^3.4.11",
"react-native-svg-transformer": "^1.3.0",
"react-test-renderer": "18.2.0",
"typescript": "5.0.4",
"url-loader": "^4.1.1",
"webpack": "^5.92.1",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^5.0.4"
},
"engines": {
"node": ">=18"
},
"packageManager": "[email protected]"
}

# N/A

react-native info output:

 OUTPUT GOES HERE

• Platform that you're experiencing the issue on:
  • iOS
  • Android
  • iOS but have not tested behavior on Android
  • Android but have not tested behavior on iOS
  • Both
• stream-chat-react-native version you're using that has this issue:
  • e.g. 5.4.3
• Device/Emulator info:
  • I am using a physical device
  • OS version: e.g. Android 13
  • Device/Emulator: e.g. iPhone 11

Additional context

because of this error , i m not able to produce production build bcz i got white or gray screen when i open production version

Screenshots

Click To Expand

---

[khushal87]

Hey @abdulragib, this issue is relevant to the stream-video-js repo, so I have moved it here. Nothing to do with chat here.

[oliverlaz]

hi @abdulragib, on first sight, the code looks correct.
Can you please check whether fetchStreamToken correctly returns the token?

[oliverlaz]

hi @abdulragib, did you manage to solve the issue in the meantime?