Vue Firebase Verify ID Token CORS issue

Question

I am trying to verify an ID Token using the Firebase Admin SDK as per instructions. My current auth code looks like this (in Vue):

// Auth.vue, inside the firebaseui config callback
signInSuccessWithAuthResult: function(authResult, redirectUrl) {
      authResult.user
        .getIdToken(/* forceRefresh */ true)
        .then(function(idToken) {
          // Send token to your backend via HTTPS
          // ...
          console.log(idToken);
        })
        .catch(function(error) {
          // Handle error
          console.log(error);
        });

The login works fine and I can get authResult perfectly. However, it seems the function getIdToken is the problem, as I get the following error on my console:

Cross-Origin Request Blocked: 
The Same Origin Policy disallows reading the remote resource at 
https://securetoken.googleapis.com/v1/token?key=AIzaSyApp5yu051vMJlNLoQ1ngVSd-f2k7Pdavc. 
(Reason: CORS request did not succeed).

In my request list, the one hanging is an OPTIONS method, with the following headers:

OPTIONS /v1/token?key=AIzaSyApp5yu051vMJlNLoQ1ngVSd-f2k7Pdavc HTTP/1.1
Host: securetoken.googleapis.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:62.0) Gecko/20100101 Firefox/62.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.8,pt-BR;q=0.5,de;q=0.3
Accept-Encoding: gzip, deflate, br
Access-Control-Request-Method: POST
Access-Control-Request-Headers: x-client-version
Origin: http://localhost:8080
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache

I am not even sure where the problem lies. Is it coming from the Vue side? I am running it in a dev server (by simple yarn serve, vue cli 3). Would the solution be when I run Vue on a production server where I can actually configure cors?

Any light on the matter is extremely welcome... Thanks!!

I know that I could use a proxy for that in case I had control over the request (as in using Axios), but this case isn't possible, as it is a firebase function performing the request... I know I could use cors with express and build and serve vue using express... but this woulkd mean I'd have to build everytime I want to test... is this the only solution here?? — Daniel da Rocha, Sep 22 '18 at 19:15

score 0 · Answer 1 · answered Sep 22 '18 at 19:45

Figured it out. I was calling it in the wrong place. What helped was this thread, which pointed me out to Preflighted Requests which is what the OPTIONS request is:

"preflighted" requests first send an HTTP request by the OPTIONS method to the resource on the other domain, in order to determine whether the actual request is safe to send. Cross-site requests are preflighted like this since they may have implications to user data.

So I realized I should not be sending this request within my Post request where I got the authorization in the first place. Moving it to another method made it work.

Vue Firebase Verify ID Token CORS issue

1 Answers1