CORS issue with newly deployed website to firebase hosting

Help
1

I deployed my website to firebase hosting, but authentication no longer works. I get the following error:
“error: invalid origin: https://websiteurl.firebaseapp.com”

I have added this url to my auth0 allowed origins and allowed web origins under the applications tab in my profile. Below is the code for my login:

  login = (callback) => {
     var that = this;
     that.callback = callback;
     this.auth0.popup.authorize({
        redirectUri: 'https://www.mysite.firebaseapp.com',
        owp: true
     }, function(err, authResult) {
        if (authResult && authResult.accessToken && authResult.idToken) {
          that.setSession(authResult);
        typeof callback === 'function' && callback();
        } else if (err) {
          console.log(err);
          alert(`Error: ${err.error}. Check the console for further details.`);
        }
  });
}

any help would be much appreciated. Thanks!

*Edit - I changed the callback url to the firebase hosted site

3

When you say that the code shared is the one used for login can you confirm if it’s indeed the exact code used in the deployed application? The reason I ask is that the presence of a redirectUri pointing to localhost would likely be troublesome in a deployed application and also a strong candidate for the root cause of what you observe.

4

Good question! Actually, that isn’t the exact code. I have the url for my firebase site in that location. As a side note, the site does not actually redirect on successful login. The login prompt comes up in a popup, and then disappears after successful login, passes the token back to the site without ever redirecting or reloading the original site.

This all works just fine with localhost, but not on the hosted site.

5

Sorry to nitpick, but given the error is about an invalid origin I think this may be relevant. Although in the updated sample code the redirect URI is no longer pointing to localhost it is still pointing to a web origin different than the one listed in the error.

In particular, for popup mode the response will need to be communicated from the popup window to the main window and if I recall correctly by default there’s the requirement that the window to which the message will be posted needs to be in the same web origin as the specified redirect URI.

From the information provided the above requirement does not seem to be met given that https://websiteurl.firebaseapp.com is different from https://www.mysite.firebaseapp.com.

6

It’s just a placeholder url since I don’t want the actual site to be public yet. The url in the actual code and the firebase url are the same. And thats the same url that I have given permission to on my application page for allowed web origins.

7

Given that you don’t want the actual site to be mentioned publicly and the ideal way to troubleshoot this situation would be to have an HTTP trace of the issue that shows all the requests happening then my suggestion would be for you to reproduce the issue with the minimal possible code from your application and then deploy only that sample in a public way or capture the trace using the sample.

1 Like
8

Great advice! I’ll work on it this weekend and hopefully I’ll have something you can take a look at soon