Firebase hosting with reactjs cannot handle /redirect from third party authentication

0
votes

I am new to reactjs and Firebase web hosting.

I am using Sketchfab OAuth2 for my web. So, I need to provide a redirect link to Sketchfab, e.g. https://projectname.firebaseapp.com/redirect

However, I am using react-router and no matter what pages I routed to, there is a '#' in the url, e.g. https://projectname.firebaseapp.com/#/login and https://projectname.firebaseapp.com/#/redirect. This makes me cannot get the OAuth token from Sketchfab because my url and the redirect url are not match.

I have requested to use https://projectname.firebaseapp.com/#/redirect as the redirect url. However, Sketchfab does not support having '#' in the redirect url.

Possible solution to this problem:

  1. Find a way to remove the '#' from my url
  2. Make use of firebase.json to rewrite the destination of all **/redirect/** source to the https://projectname.firebaseapp.com/#/redirect

For option 2, I don't know how to do this in reactjs since I only know how to rewrite the destination to a html file, e.g. /index.html

This is the theme I am using for my web: https://startreact.com/themes/ani-theme/

1
reactjsfirebasewebfirebase-hosting

1 Answers

1
votes

It seems you might be using HashRouter instead of Browser Router. Using HashRouter controls the URI after the hash key, which can be useful if your static server that doesn't support single page apps (e.g. Github Pages). I'm pretty sure you can use Browser Router in Firebase, so in your Router component you have to import the right Router: import {BrowserRouter as Router, Route} from 'react-router-dom'.