Not able to view the emualtor on the web browser

[hridhar]

Hi,

Please help and support.
I am getting below error while running the emulator in web container.

Error:
Jwks remote fetch is failed.
realm="http://localhost:8080/android.emulation.control.EmulatorController/getStatus", error="invalid_token"
Low level gRPC error: {"message":"Http response at 400 or 500 level, http status code: 401","stack":"Error: Http response at 400 or 500 level, http status code: 401\n at new k (http://localhost:8081/static/js/main.9d8095e4.js:2:742097)\n%5Cn) at Gt (http://localhost:8081/static/js/main.9d8095e4.js:2:765119)\n%5Cn) at Ct. (http://localhost:8081/static/js/main.9d8095e4.js:2:764803)\n%5Cn) at ze (http://localhost:8081/static/js/main.9d8095e4.js:2:751021)\n%5Cn) at Ve (http://localhost:8081/static/js/main.9d8095e4.js:2:750827)\n%5Cn) at xt (http://localhost:8081/static/js/main.9d8095e4.js:2:758352)\n%5Cn) at Pt (http://localhost:8081/static/js/main.9d8095e4.js:2:759133)\n%5Cn) at r.W (http://localhost:8081/static/js/main.9d8095e4.js:2:760075)\n%5Cn) at r.R (http://localhost:8081/static/js/main.9d8095e4.js:2:760054)","code":16,"metadata":{}}%22,%22code%22:16,%22metadata%22:%7B%7D%7D)

Please find the below more information.
We are able to list the services using below command.
grpcurl -plaintext localhost:8554 list

We are using the below scripts to run the emulator over container.
https://github.com/google/android-emulator-container-scripts

We are fallowing below steps.

git clone https://github.com/google/android-emulator-container-scripts.git
cd android-emulator-container-script
source ./configure.sh
emu-docker licenses
emu-docker create /path/to/emulator.zip /path/to/system-image.zip
/create_web_container.sh
docker-compose -f js/docker/docker-compose-build.yaml -f js/docker/development.yaml up
Expected Result:
8.Emulator should run without any issue over web browser.
Point your browser to localhost.

Actual Result:
8. Not able to view the emulator on the web browser.

Error Facing:
We are able to print the token also.

Below is the trace logs.
POST http://localhost:8080/android.emulation.control.EmulatorController/sendMouse 401 (Unauthorized)
Ot @ index.js:42
Yt @ index.js:63
(anonymous) @ index.js:57
Kt.X @ index.js:57
(anonymous) @ emulator_web_client.js:68
i.android.emulation.control.EmulatorControllerClient.sendMouse @ emulator_controller_grpc_web_pb.js:742
value @ jsep_protocol_driver.js:351
(anonymous) @ event_handler.js:101
gi @ react-dom.production.min.js:131
ys @ react-dom.production.min.js:220
Pl @ react-dom.production.min.js:259
t.unstable_runWithPriority @ scheduler.production.min.js:18
Go @ react-dom.production.min.js:122
xl @ react-dom.production.min.js:252
vl @ react-dom.production.min.js:243
(anonymous) @ react-dom.production.min.js:123
t.unstable_runWithPriority @ scheduler.production.min.js:18
Go @ react-dom.production.min.js:122
qo @ react-dom.production.min.js:123
Yo @ react-dom.production.min.js:122
ke @ react-dom.production.min.js:292
(anonymous) @ react-dom.production.min.js:50
Nr @ react-dom.production.min.js:105
Jt @ react-dom.production.min.js:75
Xt @ react-dom.production.min.js:74
t.unstable_runWithPriority @ scheduler.production.min.js:18
$t @ react-dom.production.min.js:73
emulator_web_client.js:94 low level gRPC error: {"message":"Http response at 400 or 500 level, http status code: 401","stack":"Error: Http response at 400 or 500 level, http status code: 401\n at new k (http://localhost/static/js/main.9d8095e4.js:2:742097)\n%5Cn) at Gt (http://localhost/static/js/main.9d8095e4.js:2:765119)\n%5Cn) at Ct. (http://localhost/static/js/main.9d8095e4.js:2:764803)\n%5Cn) at ze (http://localhost/static/js/main.9d8095e4.js:2:751021)\n%5Cn) at Ve (http://localhost/static/js/main.9d8095e4.js:2:750827)\n%5Cn) at xt (http://localhost/static/js/main.9d8095e4.js:2:758352)\n%5Cn) at Pt (http://localhost/static/js/main.9d8095e4.js:2:759133)\n%5Cn) at r.W (http://localhost/static/js/main.9d8095e4.js:2:760075)\n%5Cn) at r.R (http://localhost/static/js/main.9d8095e4.js:2:760054)","code":16,"metadata":{}}%22,%22code%22:16,%22metadata%22:%7B%7D%7D)

We have tried opening http://localhost:8080/android.emulation.control.EmulatorController/sendMouse over the web browser.
Getting below error:
Jwt is missing

Below is the response header:
Access-Control-Allow-Origin : http://localhost/
Access-Control-Expose-Headers : custom-header-1,grpc-status,grpc-message
Connection : close
Content-Length : 0
Content-Type : application/grpc-web-text+proto
Date : Wed, 24 Jul 2024 13:49:36 GMT
Grpc-Message : Jwks remote fetch is failed
Grpc-Status : 16
Server : envoy
Www-Authenticate : Bearer realm="http://localhost:8080/android.emulation.control.EmulatorController/getStatus", error="invalid_token"

Below is the request header:
Accept : application/grpc-web-text
Accept-Encoding : gzip, deflate, br, zstd
Accept-Language : en-US,en;q=0.9
Authorization : Bearer "TOKEN KEY"
Connection : keep-alive
Content-Length : 8
Content-Type : application/grpc-web-text
Dnt : 1
Host : localhost:8080
Origin : http://localhost/
Referer : http://localhost/
Sec-Ch-Ua : "Not/A)Brand";v="8", "Chromium";v="126", "Microsoft Edge";v="126"
Sec-Ch-Ua-Mobile : ?0
Sec-Ch-Ua-Platform : "Linux"
Sec-Fetch-Dest : empty
Sec-Fetch-Mode : cors
Sec-Fetch-Site : same-site
User-Agent : Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36 Edg/126.0.0.0
X-Grpc-Web : 1
X-User-Agent : grpc-web-javascript/0.1

General Information:
Request URL : http://localhost:8080/android.emulation.control.EmulatorController/getStatus
Request Method : POST
Status Code : 401 Unauthorized
Remote Address : [::1]:8080
Referrer Policy : strict-origin-when-cross-origin

We are able to print the token below:
if (isSignedIn) {
firebase.auth().currentUser.getIdToken().then(function (token) {
auth.setToken(Bearer ${token});
console.log("Token in authHeader:", token);
});
}

/**

Called by the EmulatorWebClient to obtain the authentication
headers
@memberof TokenAuthService
@returns The authentication header for the web call
https://github.com/see EmulatorWebClient
*/
authHeader = () => {
console.log("Token in authHeader:", this.token );
return { Authorization: this.token };
};
}

Please let me know if you need some more information.
Thank for the support, much appreciated.