[examples/hackernews] GitHub OAuth login flow example.

The OAuth client id (resp. secret) is loaded from
`examples/hackernews/gh_oauth_client_id.txt` (resp. `examples/hackernews/gh_oauth_secret.txt`).

Author: Lucas Hosseini

examples/hackernews/compose.yml

@@ -14,6 +14,9 @@ services:
   web:
     image: reactive-hackernews/web-service
     build: ./web_service
+    secrets:
+      - gh_oauth_client_id
+      - gh_oauth_secret
     depends_on:
       db:
         condition: service_healthy
@@ -41,3 +44,9 @@ services:
 
 volumes:
   pgdata:
+
+secrets:
+  gh_oauth_client_id:
+    file: ./gh_oauth_client_id.txt
+  gh_oauth_secret:
+    file: ./gh_oauth_secret.txt

examples/hackernews/web_service/app.py

@@ -273,3 +273,76 @@ def simulate_activity():
                 time.sleep(1)
 
     return "ok", 200
+
+
+# See https://docs.docker.com/compose/how-tos/use-secrets/
+with open("/run/secrets/gh_oauth_client_id") as f:
+    GH_OAUTH_CLIENT_ID = f.read().strip()
+with open("/run/secrets/gh_oauth_secret") as f:
+    GH_OAUTH_CLIENT_SECRET = f.read().strip()
+GH_OAUTH_ACCESS_TOKEN_URI = "https://github.com/login/oauth/access_token"
+GH_OAUTH_REDIRECT_URI = "https://localhost/api/oauth"
+GH_USER_API_URI = "https://api.github.com/user"
+
+
+@app.get("/oauth")
+def oauth_callback():
+    code = request.args["code"]
+    resp = requests.post(
+        GH_OAUTH_ACCESS_TOKEN_URI,
+        headers={
+            "Accept": "application/json",
+        },
+        json={
+            "client_id": GH_OAUTH_CLIENT_ID,
+            "client_secret": GH_OAUTH_CLIENT_SECRET,
+            "code": code,
+            "redirect_uri": GH_OAUTH_REDIRECT_URI,
+        },
+    )
+
+    session["gh_access_token"] = resp.json()["access_token"]
+    resp = requests.get(
+        f"{GH_USER_API_URI}",
+        headers={
+            "Accept": "application/json",
+            "Authorization": f'Bearer {session["gh_access_token"]}',
+        },
+    )
+    gh_user = resp.json()
+
+    with get_db() as db:
+        with db.cursor() as cur:
+            cur.execute(
+                "SELECT id, name, email FROM users WHERE LOWER(email) = LOWER(%s)",
+                (gh_user["email"],),
+            )
+            if cur.rowcount < 1:
+                cur.execute(
+                    "INSERT INTO users(name, email) VALUES (%s, %s) RETURNING id",
+                    (gh_user["login"], gh_user["email"]),
+                )
+                db.commit()
+                user_session = {
+                    "user_id": cur.fetchone()[0],
+                    "name": gh_user["login"],
+                    "email": gh_user["email"],
+                }
+            else:
+                user = cur.fetchone()
+                user_session = {
+                    "user_id": user[0],
+                    "name": user[1],
+                    "email": user[2],
+                }
+
+    # Store the user_id in the Flask session to avoid a round-trip when upvoting.
+    session["user_id"] = user_session["user_id"]
+
+    # TODO: Error handling.
+    requests.patch(
+        f"{REACTIVE_SERVICE_URL}/inputs/sessions",
+        json=[[session["session_id"], [user_session]]],
+    )
+
+    return redirect("/")

examples/hackernews/www/src/App.tsx

@@ -332,6 +332,14 @@ function Login() {
       });
   }
 
+  function navigateToGitHubOAuth() {
+    const OAUTH_GH_CLIENT_ID = "Ov23ctSiS46qzKAEarWy";
+    const OAUTH_GH_REDIRECT_URI = "https://localhost/api/oauth";
+    const OAUTH_GH_SCOPE = "user:read";
+    // TODO: Anti-CSRF token passed through `state` uri param.
+    window.location.href = `https://github.com/login/oauth/authorize?client_id=${OAUTH_GH_CLIENT_ID}&redirect_uri=${OAUTH_GH_REDIRECT_URI}&scope=${OAUTH_GH_SCOPE}`;
+  }
+
   return (
     <>
       <Header session={null} />
@@ -358,6 +366,18 @@ function Login() {
         />
         <button type="submit">Login</button>
       </form>
+      <button onClick={navigateToGitHubOAuth} style={{ display: "flex" }}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="20"
+          height="20"
+          fill="currentColor"
+          viewBox="0 0 1792 1792"
+        >
+          <path d="M896 128q209 0 385.5 103t279.5 279.5 103 385.5q0 251-146.5 451.5t-378.5 277.5q-27 5-40-7t-13-30q0-3 .5-76.5t.5-134.5q0-97-52-142 57-6 102.5-18t94-39 81-66.5 53-105 20.5-150.5q0-119-79-206 37-91-8-204-28-9-81 11t-92 44l-38 24q-93-26-192-26t-192 26q-16-11-42.5-27t-83.5-38.5-85-13.5q-45 113-8 204-79 87-79 206 0 85 20.5 150t52.5 105 80.5 67 94 39 102.5 18q-39 36-49 103-21 10-45 15t-57 5-65.5-21.5-55.5-62.5q-19-32-48.5-52t-49.5-24l-20-3q-21 0-29 4.5t-5 11.5 9 14 13 12l7 5q22 10 43.5 38t31.5 51l10 23q13 38 44 61.5t67 30 69.5 7 55.5-3.5l23-4q0 38 .5 88.5t.5 54.5q0 18-13 30t-40 7q-232-77-378.5-277.5t-146.5-451.5q0-209 103-385.5t279.5-279.5 385.5-103zm-477 1103q3-7-7-12-10-3-13 2-3 7 7 12 9 6 13-2zm31 34q7-5-2-16-10-9-16-3-7 5 2 16 10 10 16 3zm30 45q9-7 0-19-8-13-17-6-9 5 0 18t17 7zm42 42q8-8-4-19-12-12-20-3-9 8 4 19 12 12 20 3zm57 25q3-11-13-16-15-4-19 7t13 15q15 6 19-6zm63 5q0-13-17-11-16 0-16 11 0 13 17 11 16 0 16-11zm58-10q-2-11-18-9-16 3-14 15t18 8 14-14z"></path>
+        </svg>
+        <div style={{ padding: "0 8px" }}>Login with GitHub</div>
+      </button>
     </>
   );
 }