Merge pull request #1554 from pietervdvn/feature/env-variables

Allow use of environment variables for OAuth

.gitignore

@@ -23,6 +23,7 @@ index_*.ts
 .~lock.*
 *.doctest.ts
 service-worker.js
+.env
 
 .vscode/*
 !.vscode/settings.json

.nvmrc

@@ -1 +1 @@
-nodejs 16.9.1
+16.9.1

package.json

@@ -13,7 +13,8 @@
       "`oauth_credentials` are the OAuth-2 credentials for the production-OSM server and the test-server.",
       "Are you deploying your own instance? Register your application too.",
       "See https://wiki.openstreetmap.org/wiki/OAuth#Registering_your_application_as_OAuth_2.0_consumer for instructions",
-      "Use `https://<your domain name>/<path to mapcomplete>/land.html` as redirect URIs. You can add `http://127.0.0.1:1234/land.html` too for local development."
+      "Use `https://<your domain name>/<path to mapcomplete>/land.html` as redirect URIs. You can add `http://127.0.0.1:1234/land.html` too for local development.",
+      "Alternatively, you can override the `osm` credentials using the environment variables `VITE_OSM_OAUTH_CLIENT_ID` and `VITE_OSM_OAUTH_SECRET`"
     ],
     "oauth_credentials": {
       "osm_pietervdvn": {

src/Logic/Osm/OsmConnection.ts

@@ -3,7 +3,7 @@ import {osmAuth} from "osm-auth"
 import { Store, Stores, UIEventSource } from "../UIEventSource"
 import { OsmPreferences } from "./OsmPreferences"
 import { Utils } from "../../Utils"
-import {LocalStorageSource} from "../Web/LocalStorageSource";
+import { LocalStorageSource } from "../Web/LocalStorageSource"
 import * as config from "../../../package.json"
 export default class UserDetails {
     public loggedIn = false
@@ -34,7 +34,8 @@ export interface AuthConfig {
 export type OsmServiceState = "online" | "readonly" | "offline" | "unknown" | "unreachable"
 
 export class OsmConnection {
-    public static readonly oauth_configs: Record<string, AuthConfig>  = config.config.oauth_credentials
+    public static readonly oauth_configs: Record<string, AuthConfig> =
+        config.config.oauth_credentials
     public auth
     public userDetails: UIEventSource<UserDetails>
     public isLoggedIn: Store<boolean>
@@ -75,6 +76,19 @@ export class OsmConnection {
         console.debug("Using backend", this._oauth_config.url)
         this._iframeMode = Utils.runningFromConsole ? false : window !== window.top
 
+        // Check if there are settings available in environment variables, and if so, use those
+        if (
+            import.meta.env.VITE_OSM_OAUTH_CLIENT_ID !== undefined &&
+            import.meta.env.VITE_OSM_OAUTH_SECRET !== undefined
+        ) {
+            console.debug("Using environment variables for oauth config")
+            this._oauth_config = {
+                oauth_client_id: import.meta.env.VITE_OSM_OAUTH_CLIENT_ID,
+                oauth_secret: import.meta.env.VITE_OSM_OAUTH_SECRET,
+                url: "https://www.openstreetmap.org",
+            }
+        }
+
         this.userDetails = new UIEventSource<UserDetails>(
             new UserDetails(this._oauth_config.url),
             "userDetails"
@@ -182,7 +196,9 @@ export class OsmConnection {
         const self = this
         console.log("Trying to log in...")
         this.updateAuthObject()
-        LocalStorageSource.Get("location_before_login").setData(Utils.runningFromConsole ? undefined : window.location.href)
+        LocalStorageSource.Get("location_before_login").setData(
+            Utils.runningFromConsole ? undefined : window.location.href
+        )
         this.auth.xhr(
             {
                 method: "GET",
@@ -195,7 +211,7 @@ export class OsmConnection {
                     if (err.status == 401) {
                         console.log("Clearing tokens...")
                         // Not authorized - our token probably got revoked
-                        self.auth.logout();
+                        self.auth.logout()
                         self.LogOut()
                     }
                     return
@@ -478,7 +494,9 @@ export class OsmConnection {
             client_id: this._oauth_config.oauth_client_id,
             url: this._oauth_config.url,
             scope: "read_prefs write_prefs write_api write_gpx write_notes",
-            redirect_uri: Utils.runningFromConsole ? "https://mapcomplete.org/land.html" :  window.location.protocol + "//" + window.location.host + "/land.html",
+            redirect_uri: Utils.runningFromConsole
+                ? "https://mapcomplete.org/land.html"
+                : window.location.protocol + "//" + window.location.host + "/land.html",
             singlepage: !standalone,
             auto: true,
         })
@@ -487,13 +505,13 @@ export class OsmConnection {
     /**
      * To be called by land.html
      */
-    public finishLogin(callback: ((previousURL: string) => void)) {
+    public finishLogin(callback: (previousURL: string) => void) {
         this.auth.authenticate(function () {
             // Fully authed at this point
             console.log("Authentication successful!")
             const previousLocation = LocalStorageSource.Get("location_before_login")
             callback(previousLocation.data)
-        });
+        })
     }
 
     private CheckForMessagesContinuously() {

tsconfig.json

@@ -9,7 +9,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "esModuleInterop": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "types": ["vite/client"]
   },
   "ts-node": {
     "esm": true,