403 error when setting up appCheck with a debug key in a typescript react project #5514

rickstaa · 2021-09-18T14:13:58Z

rickstaa
Sep 18, 2021

This question is related to #5472 and #5442, but I didn't want to answer a question with another question.

I am currently trying to add app check to my React Typescript application. I followed the web appCheck and appCheck debug provider documentation to set up app check for my app. When I try to work on my debug environment (localhost) I however keep receiving a 403 Forbidden error message.

System information

OS: Ubuntu 20.04
Node: v14.17.5
Firebase sdk: v9.0.2

Steps to reproduce my problem.

Register your site with reCAPTCHAv3 and add the private site key to the App Check section of the firebase project settings.
Added the code below, after the initializeApp statement, in the typescript file where you set up firebase.

import { initializeAppCheck, ReCaptchaV3Provider } from "fire

if (process.env.REACT_APP_APP_CHECK_SITE_KEY) {
  initializeAppCheck(firebaseApp, {
    provider: new ReCaptchaV3Provider(process.env.REACT_APP_APP_CHECK_SITE_KEY),
    isTokenAutoRefreshEnabled: true,
  });
}

Add your ReCAPTCHAv3 public site key as a REACT_APP_APP_CHECK_SITE_KEY environment variable.
Enable the app check debug key by adding the following code to the head of your projects index.html file:

<head>
    <script>
      if ("%NODE_ENV%" === "development") {
        self.FIREBASE_APPCHECK_DEBUG_TOKEN =
          "%REACT_APP_APP_CHECK_DEBUG_TOKEN%";
      }
    </script>
</head>

Generate a debug token using the app check section of the project settings page.
Add this debug token to the REACT_APP_APP_CHECK_DEBUG_TOKEN environment variable.

I made sure that all the env variables contain the correct tokens.

Full error message

XHRPOSThttps://securetoken.googleapis.com/v1/token?key=<BLURED_TOKEN>
[HTTP/3 403 Forbidden 116ms]

	
POST
	https://securetoken.googleapis.com/v1/token?key=<BLURED_TOKEN>
Status
403
Forbidden
VersionHTTP/3
Transferred960 B (523 B size)
Referrer Policystrict-origin-when-cross-origin

    	
    access-control-allow-origin
    	http://localhost:3000
    access-control-expose-headers
    	vary,vary,vary,content-encoding,date,server,content-length
    alt-svc
    	h3=":443"; ma=2592000,h3-29=":443"; ma=2592000,h3-T051=":443"; ma=2592000,h3-Q050=":443"; ma=2592000,h3-Q046=":443"; ma=2592000,h3-Q043=":443"; ma=2592000,quic=":443"; ma=2592000; v="46,43"
    cache-control
    	private
    content-encoding
    	gzip
    content-length
    	311
    content-type
    	application/json; charset=UTF-8
    date
    	Sat, 18 Sep 2021 14:14:23 GMT
    server
    	ESF
    vary
    	Origin
    vary
    	X-Origin
    vary
    	Referer
    x-content-type-options
    	nosniff
    x-frame-options
    	SAMEORIGIN
    x-xss-protection
    	0
    	
    Accept
    	*/*
    Accept-Encoding
    	gzip, deflate, br
    Accept-Language
    	en-GB,nl;q=0.5
    Connection
    	keep-alive
    Content-Length
    	243
    Content-Type
    	application/x-www-form-urlencoded
    DNT
    	1
    Host
    	securetoken.googleapis.com
    Origin
    	http://localhost:3000
    Referer
    	http://localhost:3000/
    Sec-Fetch-Dest
    	empty
    Sec-Fetch-Mode
    	cors
    Sec-Fetch-Site
    	cross-site
    Sec-GPC
    	1
    TE
    	trailers
    User-Agent
    	Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:92.0) Gecko/20100101 Firefox/92.0
    X-Client-Version
    	Firefox/JsCore/9.0.0/FirebaseCore-web

rickstaa · 2021-09-18T14:57:37Z

rickstaa
Sep 18, 2021
Author

I solved the 403 bug by adding the Firebase App Check API to the API restrictions field of the Browser key (auto created by Firebase) credential in the google cloud platform.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

403 error when setting up appCheck with a debug key in a typescript react project #5514

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

403 error when setting up appCheck with a debug key in a typescript react project #5514

Uh oh!

Uh oh!

rickstaa Sep 18, 2021

System information

Steps to reproduce my problem.

Full error message

Replies: 1 comment

Uh oh!

rickstaa Sep 18, 2021 Author

rickstaa
Sep 18, 2021

rickstaa
Sep 18, 2021
Author