remove redirect uri from login request

Author: CollinBeczak

.env

@@ -22,7 +22,6 @@ REACT_APP_DEFAULT_LOCALE='en-US'
 REACT_APP_MAP_ROULETTE_SERVER_URL='http://127.0.0.1:9000'
 REACT_APP_MAP_ROULETTE_SERVER_WEBSOCKET_URL='ws://127.0.0.1:9000/ws'
 REACT_APP_MAP_ROULETTE_SERVER_GRAPHQL_URL='http://127.0.0.1:9000/graphql'
-REACT_APP_SERVER_OAUTH_URL='http://127.0.0.1:9000/auth/authenticate?redirect=/mr3'
 
 # OSM Server
 REACT_APP_OSM_SERVER='https://www.openstreetmap.org'

DEVELOPMENT.md

@@ -36,7 +36,7 @@ Note that this will create the development build and not the 'production' build.
 
    ```
    REACT_APP_URL='http://127.0.0.1:3000'
-   REACT_APP_SERVER_OAUTH_URL='http://127.0.0.1:9000/auth/authenticate?redirect=http://127.0.0.1:3000'
+   REACT_APP_MAP_ROULETTE_SERVER_URL='http://127.0.0.1:9000'
    ```
 
 2. Build the image using `docker build --pull -t maproulette-ui .`
@@ -85,9 +85,11 @@ the container to see them reflected in the application.
 
 6. Edit your `.env.local` file in your front-end project and set:
    ```
-   REACT_APP_SERVER_OAUTH_URL='http://127.0.0.1:9000/auth/authenticate?redirect=http://127.0.0.1:3000'
+   REACT_APP_MAP_ROULETTE_SERVER_URL='http://127.0.0.1:9000'
    ```
    (assuming your back-end server is on port 9000 and front-end is on port 3000).
+   The OAuth sign-in flow is served from this back-end URL; the redirect target is
+   derived from the request's Origin header, so no separate OAuth URL is needed.
    Restart or startup your front-end server, and then navigate to the front-end
    at http://127.0.0.1:3000
 

src/components/SignInButton/SignInButton.jsx

@@ -30,10 +30,15 @@ export class SignInButton extends Component {
 
     this.setState({ clicked: true });
 
-    const frontendOrigin = window.env.REACT_APP_URL || window.location.origin;
-    const loginUrl = `${window.env.REACT_APP_SERVER_OAUTH_URL}${encodeURIComponent(
+    // We intentionally don't pass a redirect_uri: the backend derives it from
+    // this request's Origin header, which resolves correctly across deployments
+    // (maproulette.org, beta.maproulette.org, 127.0.0.1). For that to work this
+    // must stay a `fetch` (not a top-level navigation) AND target the API host
+    // rather than a same-origin relative path — browsers omit the Origin header
+    // on same-origin GET fetches, so either would drop it.
+    const loginUrl = `${window.env.REACT_APP_MAP_ROULETTE_SERVER_URL}/auth/authenticate?redirect=${encodeURIComponent(
       this.props.history?.location?.pathname + this.props.history?.location?.search,
-    )}&redirect_uri=${encodeURIComponent(frontendOrigin)}`;
+    )}`;
 
     fetch(loginUrl)
       .then(async (result) => {

src/services/User/User.js

@@ -316,8 +316,10 @@ export const fetchBasicUser = function (userId) {
  * @param authCode - the token
  */
 export const callback = async (authCode, dispatch, push) => {
-  const frontendOrigin = window.env.REACT_APP_URL || window.location.origin;
-  const resetURI = `${window.env.REACT_APP_MAP_ROULETTE_SERVER_URL}/auth/callback?code=${authCode}&redirect_uri=${encodeURIComponent(frontendOrigin)}`;
+  // No redirect_uri: the backend derives it from this fetch's Origin header,
+  // matching the value used when starting the sign-in flow. Keep this a `fetch`
+  // (not a navigation) so the Origin header is sent.
+  const resetURI = `${window.env.REACT_APP_MAP_ROULETTE_SERVER_URL}/auth/callback?code=${authCode}`;
 
   // Since we're bypassing Endpoint and manually performing an update, we
   // need to also manually reset the request cache.