[solved] Moralis with Firebase: CORS error

deepak.k.ghosh · December 28, 2022, 6:45pm

I was trying to follow the tutorial here: https://www.youtube.com/watch?v=2HLxYYmZp94&list=PLR8uBYXF-6hYaDufqBCTH00PNuQaGtAGS&index=10 , and I was able to get to the point of logging into MM, but it didn’t do anything after that and the console threw the following error. Can you help me get past this?

Access to fetch at 'https://us-central1-....cloudfunctions.net/ext-moralis-auth-requestMessage' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
service.ts:221          POST https://us-central1-....cloudfunctions.net/ext-moralis-auth-requestMessage net::ERR_FAILED
postJSON @ service.ts:221
callAtURL @ service.ts:295
await in callAtURL (async)
call @ service.ts:260
(anonymous) @ service.ts:185
(anonymous) @ requestMessage.ts:78
step @ issueToken.ts:21
(anonymous) @ issueToken.ts:21
(anonymous) @ issueToken.ts:21
__webpack_modules__../node_modules/@moralisweb3/client-firebase-auth-utils/lib/requestMessage.js.__awaiter @ issueToken.ts:21
requestMessage @ requestMessage.ts:73
(anonymous) @ signInWithMoralis.ts:26
step @ index.ts:1
(anonymous) @ index.ts:1
fulfilled @ index.ts:1
Promise.then (async)
step @ index.ts:1
fulfilled @ index.ts:1
Promise.then (async)
step @ index.ts:1
(anonymous) @ index.ts:1
__webpack_modules__../node_modules/@moralisweb3/client-firebase-evm-auth/lib/signInWithMoralis.js.__awaiter @ index.ts:1
signInWithMoralis @ signInWithMoralis.ts:18
login @ App.js:28
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4291
executeDispatch @ react-dom.development.js:9041
processDispatchQueueItemsInOrder @ react-dom.development.js:9073
processDispatchQueue @ react-dom.development.js:9086
dispatchEventsForPlugins @ react-dom.development.js:9097
(anonymous) @ react-dom.development.js:9288
batchedUpdates$1 @ react-dom.development.js:26140
batchedUpdates @ react-dom.development.js:3991
dispatchEventForPluginEventSystem @ react-dom.development.js:9287
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465
dispatchEvent @ react-dom.development.js:6457
dispatchDiscreteEvent @ react-dom.development.js:6430
App.js:30 Uncaught (in promise) FirebaseError: internal

YosephKS · December 27, 2022, 5:22am

Hey @deepak.k.ghosh

So to confirm you are connected to Metamask but after you get this error in the console?

deepak.k.ghosh · December 27, 2022, 5:53am

Yes, I am connected to MM, and I get this error.

johnversus · December 27, 2022, 8:08am

Was the extensions installed successfully when you tried this?

You can check the firebase functions page to check if the extension functions were created successfully or not.

deepak.k.ghosh · December 27, 2022, 4:17pm

Yes everything in console output seemed normal as expected.

deepak.k.ghosh · December 27, 2022, 5:15pm

I have reCaptcha enabled in Firebase – might that be the cause? See attached screenshot showing the functions

deepak.k.ghosh · December 27, 2022, 5:40pm

Okay so in Firebase, when visiting each function’s detailed usage stats, I see the following message in firebase console:

This function has previously failed to deploy or is in a broken state. Some input fields and advanced settings may have been restored to their default values. Please review the configuration settings and code before redeploying this function.

What might be going wrong?

deepak.k.ghosh · December 27, 2022, 8:30pm

I tried doing this fresh as a new project. I got the following error when I tried running firebase deploy --only extensions

? Do you wish to continue deploying these extensions? Yes
The following extension instances will be created:
        moralis-auth (moralis/[email protected])

i  extensions: Verifying secret params for moralis-auth
✔  extensions Successfully validated create for moralis-auth

Extensions deploy had errors:

- create moralis-auth
; RESOURCE_ERROR at /deployments/firebase-ext-moralis-auth/resources/requestMessage: {"ResourceType":"gcp-types/cloudfunctions-v1:projects.locations.functions","ResourceErrorCode":"403","ResourceErrorMessage":{"code":403,"message":"Unable to retrieve the repository metadata for projects/moralis-firebase-a5884/locations/us-west2/repositories/gcf-artifacts. Ensure that the Cloud Functions service account has 'artifactregistry.repositories.list' and 'artifactregistry.repositories.get' permissions. You can add the permissions by granting the role 'roles/artifactregistry.reader'.","status":"PERMISSION_DENIED","statusMessage":"Forbidden","requestPath":"https://cloudfunctions.googleapis.com/v1/projects/moralis-firebase-a5884/locations/us-west2/functions","httpMethod":"POST"}}; RESOURCE_ERROR at /deployments/firebase-ext-moralis-auth/resources/issueToken: {"ResourceType":"gcp-types/cloudfunctions-v1:projects.locations.functions","ResourceErrorCode":"403","ResourceErrorMessage":{"code":403,"message":"Unable to retrieve the repository metadata for projects/moralis-firebase-a5884/locations/us-west2/repositories/gcf-artifacts. Ensure that the Cloud Functions service account has 'artifactregistry.repositories.list' and 'artifactregistry.repositories.get' permissions. You can add the permissions by granting the role 'roles/artifactregistry.reader'.","status":"PERMISSION_DENIED","statusMessage":"Forbidden","requestPath":"https://cloudfunctions.googleapis.com/v1/projects/moralis-firebase-a5884/locations/us-west2/functions","httpMethod":"POST"}}


Error: An unexpected error has occurred.

Thoughts on how to get past this?

johnversus · December 28, 2022, 4:35am

Try using the same server location as defined in the extension. I think it is hardcoded in the SDK to use URL with us-central location.

and as per your installed extension, it is on an us-west2 location. Hence the request URL is not matching.

I think if you install the extension on us-central1 it should fix it.

deepak.k.ghosh · December 28, 2022, 5:32pm

I tried using central, and it shows the same error. The functions don’t show the This function has previously failed to deploy or is in a broken state... anymore. But, the browser console still shows

Access to fetch at 'https://us-central1-moralis-firebase-....cloudfunctions.net/ext-moralis-auth-requestMessage' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request. POST https://us-central1-moralis-firebase-....cloudfunctions.net/ext-moralis-auth-requestMessage net::ERR_FAILED App.js:30 Uncaught (in promise) FirebaseError: internal

Thoughts?

cryptokid · December 28, 2022, 5:34pm

you can get that CORS error when the website is not accessible too, if you look in network tab do you really get a response from that url or it is a timeout?

deepak.k.ghosh · December 28, 2022, 5:39pm

The status just shows CORS error. See screenshot

I also do see the following warnings in terminal:

WARNING in ./node_modules/@firebase/util/dist/index.esm2017.js 741:19-44

Critical dependency: the request of a dependency is an expression

WARNING in ./node_modules/@metamask/detect-provider/dist/index.js

Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):

Failed to parse source map from '/Users/abscdyh/Documents/Working/moralis-firebase/moralis-firebase/frontend/node_modules/@metamask/detect-provider/src/index.ts' file: Error: ENOENT: no such file or directory, open '/Users/abscdyh/Documents/Working/moralis-firebase/moralis-firebase/frontend/node_modules/@metamask/detect-provider/src/index.ts'

WARNING in ./node_modules/@moralisweb3/client-firebase-auth-utils/lib/getMoralisAuth.js

Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):

Failed to parse source map from '/Users/abscdyh/Documents/Working/moralis-firebase/moralis-firebase/frontend/node_modules/@moralisweb3/client-firebase-auth-utils/src/getMoralisAuth.ts' file: Error: ENOENT: no such file or directory, open '/Users/abscdyh/Documents/Working/moralis-firebase/moralis-firebase/frontend/node_modules/@moralisweb3/client-firebase-auth-utils/src/getMoralisAuth.ts'

WARNING in ./node_modules/@moralisweb3/client-firebase-auth-utils/lib/index.js

Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):

Failed to parse source map from '/Users/abscdyh/Documents/Working/moralis-firebase/moralis-firebase/frontend/node_modules/@moralisweb3/client-firebase-auth-utils/src/index.ts' file: Error: ENOENT: no such file or directory, open '/Users/abscdyh/Documents/Working/moralis-firebase/moralis-firebase/frontend/node_modules/@moralisweb3/client-firebase-auth-utils/src/index.ts'

WARNING in ./node_modules/@moralisweb3/client-firebase-auth-utils/lib/issueToken.js

Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):

Failed to parse source map from '/Users/abscdyh/Documents/Working/moralis-firebase/moralis-firebase/frontend/node_modules/@moralisweb3/client-firebase-auth-utils/src/issueToken.ts' file: Error: ENOENT: no such file or directory, open '/Users/abscdyh/Documents/Working/moralis-firebase/moralis-firebase/frontend/node_modules/@moralisweb3/client-firebase-auth-utils/src/issueToken.ts'

WARNING in ./node_modules/@moralisweb3/client-firebase-auth-utils/lib/requestMessage.js

Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):

Failed to parse source map from '/Users/abscdyh/Documents/Working/moralis-firebase/moralis-firebase/frontend/node_modules/@moralisweb3/client-firebase-auth-utils/src/requestMessage.ts' file: Error: ENOENT: no such file or directory, open '/Users/abscdyh/Documents/Working/moralis-firebase/moralis-firebase/frontend/node_modules/@moralisweb3/client-firebase-auth-utils/src/requestMessage.ts'

WARNING in ./node_modules/@moralisweb3/client-firebase-evm-auth/lib/index.js

Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):

Failed to parse source map from '/Users/abscdyh/Documents/Working/moralis-firebase/moralis-firebase/frontend/node_modules/@moralisweb3/client-firebase-evm-auth/src/index.ts' file: Error: ENOENT: no such file or directory, open '/Users/abscdyh/Documents/Working/moralis-firebase/moralis-firebase/frontend/node_modules/@moralisweb3/client-firebase-evm-auth/src/index.ts'

WARNING in ./node_modules/@moralisweb3/client-firebase-evm-auth/lib/signInWithMoralis.js

Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):

Failed to parse source map from '/Users/abscdyh/Documents/Working/moralis-firebase/moralis-firebase/frontend/node_modules/@moralisweb3/client-firebase-evm-auth/src/signInWithMoralis.ts' file: Error: ENOENT: no such file or directory, open '/Users/abscdyh/Documents/Working/moralis-firebase/moralis-firebase/frontend/node_modules/@moralisweb3/client-firebase-evm-auth/src/signInWithMoralis.ts'

cryptokid · December 28, 2022, 5:47pm

can you access that url directly? the one that gets that CORS error there

deepak.k.ghosh · December 28, 2022, 6:12pm

I actually started the whole process again. I created a new firebase project, and I was sure to select central1, but now I’m getting the following error when I try to run firebase deploy --only extensions :

Extensions deploy had errors:

- create moralis-auth
; RESOURCE_ERROR at /deployments/firebase-ext-moralis-auth/resources/issueToken: {"ResourceType":"gcp-types/cloudfunctions-v1:projects.locations.functions","ResourceErrorCode":"403","ResourceErrorMessage":{"code":403,"message":"Unable to retrieve the repository metadata for projects/moralis-firebase-17397/locations/us-central1/repositories/gcf-artifacts. Ensure that the Cloud Functions service account has 'artifactregistry.repositories.list' and 'artifactregistry.repositories.get' permissions. You can add the permissions by granting the role 'roles/artifactregistry.reader'.","status":"PERMISSION_DENIED","statusMessage":"Forbidden","requestPath":"https://cloudfunctions.googleapis.com/v1/projects/moralis-firebase-17397/locations/us-central1/functions","httpMethod":"POST"}}; RESOURCE_ERROR at /deployments/firebase-ext-moralis-auth/resources/requestMessage: {"ResourceType":"gcp-types/cloudfunctions-v1:projects.locations.functions","ResourceErrorCode":"403","ResourceErrorMessage":{"code":403,"message":"Unable to retrieve the repository metadata for projects/moralis-firebase-17397/locations/us-central1/repositories/gcf-artifacts. Ensure that the Cloud Functions service account has 'artifactregistry.repositories.list' and 'artifactregistry.repositories.get' permissions. You can add the permissions by granting the role 'roles/artifactregistry.reader'.","status":"PERMISSION_DENIED","statusMessage":"Forbidden","requestPath":"https://cloudfunctions.googleapis.com/v1/projects/moralis-firebase-17397/locations/us-central1/functions","httpMethod":"POST"}}


Error: Extensions deployment failed.

Thoughts?

deepak.k.ghosh · December 28, 2022, 6:14pm

I was able to access it – it prompted me to use a google account to sign in to get access. I dropped it and started fresh.

deepak.k.ghosh · December 28, 2022, 6:35pm

After the error I posted above on running firebase deploy --only extensions, I ran the command again, and this time it worked. I was able to get through the tutorial successfully this time. Thanks so much for your help!

YosephKS · December 29, 2022, 12:32am