login failure, please check your network

[alexwenbj]

I used the web demo as following:

1. Got the App ID;
2. Got the customer ID and customer certificate from https://console.agora.io/restfulApi;
3. Generate the REACT_APP_AGORA_RESTFULL_TOKEN with Java code as below:

import java.util.Base64;
import java.util.Base64.Decoder;
public class C{
	public static void main(String[] args){
		String plainCredentials = "my customer ID:my customer certificate";
		String base64Credentials = new String(Base64.getEncoder().encodeToString(plainCredentials.getBytes()));
		System.out.println(base64Credentials);
	}
}

4. Put the base64 encrypt code to the REACT_APP_AGORA_RESTFULL_TOKEN
5. run npm run dev
6. In the open page, input the information and click the button, and got the error message "login fail,please check your network",in the console log, I got the log:
   fetch.ts:32 POST https://api.agora.io/edu/v1/apps/73f8eb931098411988249ac93737cf5f/room/entry 401 (Unauthorized) fetchRequest @ fetch.ts:32 (anonymous) @ fetch.ts:38 Fetch @ fetch.ts:9 AgoraFetch @ fetch.ts:49 AgoraFetchJson @ edu-api.ts:49 entry @ edu-api.ts:254 Login @ edu-api.ts:470 LoginToRoom @ room.ts:632 handleSubmit @ home.tsx:102 callCallback @ react-dom.development.js:189 invokeGuardedCallbackDev @ react-dom.development.js:238 invokeGuardedCallback @ react-dom.development.js:291 invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:306 executeDispatch @ react-dom.development.js:391 executeDispatchesInOrder @ react-dom.development.js:416 executeDispatchesAndRelease @ react-dom.development.js:3300 executeDispatchesAndReleaseTopLevel @ react-dom.development.js:3309 forEachAccumulated @ react-dom.development.js:3281 runEventsInBatch @ react-dom.development.js:3326 runExtractedPluginEventsInBatch @ react-dom.development.js:3536 handleTopLevel @ react-dom.development.js:3580 batchedEventUpdates$1 @ react-dom.development.js:21726 batchedEventUpdates @ react-dom.development.js:798 dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3590 attemptToDispatchEvent @ react-dom.development.js:4310 dispatchEvent @ react-dom.development.js:4231 unstable_runWithPriority @ scheduler.development.js:656 runWithPriority$1 @ react-dom.development.js:11076 discreteUpdates$1 @ react-dom.development.js:21743 discreteUpdates @ react-dom.development.js:811 dispatchDiscreteEvent @ react-dom.development.js:4210 index.ts:71 Error: Unauthorized at onResponse (fetch.ts:12)
   What is the problem with it?I have check the issue #143 #153 ,and enclose all the 4 IDs(App ID,Customer ID,Customer certificate and the generated base64 token) with double quotes. Thank you.

[srs888001]

it looks like the REACT_APP_AGORA_RESTFULL_TOKEN generation error.
Maybe you can use it in the browser console：
window.btoa ("customer ID:customer certificate")
to generate the base64 code

[alexwenbj]

@srs888001 Thank you , but it still not worked, and it seems the base64 code generated in your way is the same as my Java code.

[srs888001]

Can you paste the request parameters of the wrong request?

[alexwenbj]

@srs888001

{userName: "nnn", roomName: "r1111", role: 1, type: 1, roomUuid: "r1111",…}
role: 1
roomName: "r1111"
roomUuid: "r1111"
type: 1
userName: "nnn"
userUuid: "10e6ebeb-02bf-4537-b621-f35a9d6ff90c"

[srs888001]

what's the request header? And can you upload the log? There is a button to upload the log in the upper right corner of the web page.

[alexwenbj]

Uploaded the log, and the request header is:

POST /edu/v1/apps/73f8eb931098411988249ac93737cf5f/room/entry HTTP/1.1
Host: api.agora.io
Connection: keep-alive
Content-Length: 125
Authorization: Basic agora_restful_api_token
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.97 Safari/537.36
Content-Type: application/json
Accept: */*
Origin: http://localhost:3000
Sec-Fetch-Site: cross-site
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Referer: http://localhost:3000/
Accept-Encoding: gzip, deflate, br
Accept-Language: en,zh-CN;q=0.9,zh;q=0.8,sm;q=0.7,la;q=0.6

[srs888001]

Have you rename .env.example to .env.local and replaced agora_restful_api_token with the the generated code ?

[alexwenbj]

Yes,I renamed it and replaced the token with the generated code.

[srs888001]

But I see no replacement in your network request. Iust like Authorization: Basic agora_restful_api_token.

[alexwenbj]

Yeah,I just saw the reqeust header Authorization is still the unconfigured one, but in fact I renamed the .env.example to .env.local and replaced the token.

[Matrixbirds]

Did u use cache-loader in config-overrides.js? I guess your bundle hit cache file, you can try to remove node_modules/.cache then rebuild again.

[alexwenbj]

@Matrixbirds Yes, you are right! Thank you!