Forward proxy and rewrite path, add oauth to frontend, increase jwt expiry time to 12 hours

2023-01-18 11:47:30 -07:00 · 2023-01-18 11:47:30 -07:00 · 7b043678c1
commit 7b043678c1
parent e33c52f97b
14 changed files with 338 additions and 100 deletions
--- a/.env.example
+++ b/.env.example
@ -1,5 +1,10 @@
 NODE_ID=aUniqueString

+REACT_APP_GITHUB_OAUTH=https://github.com/login/oauth/authorize?client_id=CLIENT_ID_HERE&redirect_uri=http://localhost:8080/oauth/redirect
+CLIENT_REDIRECT_AFTER_OAUTH=http://localhost:3000/auth-successful
+
 GITHUB_CLIENT_ID=
 GITHUB_CLIENT_SECRET=
 GITHUB_USER_AGENT=
+
+JWT_SECRET=aVerySecretJwtSigningSecret
--- a/config/runtime.exs
+++ b/config/runtime.exs
@ -3,7 +3,12 @@ import Config
 config :chessh, Web,
  github_client_id: System.get_env("GITHUB_CLIENT_ID"),
  github_client_secret: System.get_env("GITHUB_CLIENT_SECRET"),
-  github_user_agent: System.get_env("GITHUB_USER_AGENT")
+  github_user_agent: System.get_env("GITHUB_USER_AGENT"),
+  client_redirect_after_successful_sign_in:
+    System.get_env("CLIENT_REDIRECT_AFTER_OAUTH", "http://localhost:3000")
+
+config :joken,
+  default_signer: System.get_env("JWT_SECRET")

 if config_env() == :prod do
  database_url =
--- a/front/src/context/auth_context.js
+++ b/front/src/context/auth_context.js
@ -0,0 +1,104 @@
+import React, { useContext, useState, createContext, useEffect } from "react";
+
+export const DEFAULT_EXPIRY_TIME_MS = 12 * 60 * 60 * 1000;
+
+const AuthContext = createContext({
+  signedIn: false,
+  setSignedIn: () => null,
+  sessionOver: new Date(),
+  setSessionOver: () => null,
+  userId: null,
+  setUserId: () => null,
+  username: "",
+  setUsername: () => null,
+});
+
+export const useAuthContext = () => useContext(AuthContext);
+
+export const AuthProvider = ({ children }) => {
+  const [signedIn, setSignedIn] = useState(false);
+  const [sessionOver, setSessionOver] = useState(new Date());
+  const [userId, setUserId] = useState(null);
+  const [username, setUsername] = useState(null);
+
+  useEffect(() => {
+    if (!signedIn) {
+      setUsername(null);
+      setUserId(null);
+    }
+  }, [signedIn]);
+
+  useEffect(() => {
+    if (userId) {
+      localStorage.setItem("userId", userId.toString());
+    }
+  }, [userId]);
+
+  useEffect(() => {
+    if (username) {
+      localStorage.setItem("username", username);
+    }
+  }, [username]);
+
+  useEffect(() => {
+    let expiry = localStorage.getItem("expiry");
+    if (expiry) {
+      expiry = new Date(expiry);
+      if (Date.now() < expiry.getTime()) {
+        setSignedIn(true);
+        setSessionOver(expiry);
+        // We don't have access to the JWT token as it is an HTTP only cookie -
+        // so we store user info in local storage
+        ((username) => {
+          if (username) {
+            setUsername(username);
+          }
+        })(localStorage.getItem("username"));
+
+        ((id) => {
+          if (id) {
+            setUserId(parseInt(id, 10));
+          }
+        })(localStorage.getItem("userId"));
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    localStorage.setItem("expiry", sessionOver.toISOString());
+    setTimeout(() => {
+      setSessionOver((sessionOver) => {
+        if (Date.now() >= sessionOver.getTime()) {
+          setSignedIn((signedIn) => {
+            if (signedIn) {
+              alert(
+                "Session expired. Any further privileged requests will fail until signed in again."
+              );
+              ["userId", "userName"].map((x) => localStorage.removeItem(x));
+              return false;
+            }
+            return signedIn;
+          });
+        }
+        return sessionOver;
+      });
+    }, sessionOver.getTime() - Date.now());
+  }, [sessionOver]);
+
+  return (
+    <AuthContext.Provider
+      value={{
+        signedIn,
+        setSignedIn,
+        sessionOver,
+        setSessionOver,
+        userId,
+        setUserId,
+        username,
+        setUsername,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+};
--- a/front/src/index.js
+++ b/front/src/index.js
@ -2,9 +2,11 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";

+import { AuthProvider } from "./context/auth_context";
 import { Root } from "./root";
 import { Demo } from "./routes/demo";
 import { Home } from "./routes/home";
+import { AuthSuccessful } from "./routes/auth_successful";

 import "./index.css";

@ -23,6 +25,10 @@ const router = createBrowserRouter([
        path: "user",
        element: <Home />,
      },
+      {
+        path: "auth-successful",
+        element: <AuthSuccessful />,
+      },
      {
        path: "keys",
        element: <Home />,
@ -32,4 +38,8 @@ const router = createBrowserRouter([
 ]);

 const root = ReactDOM.createRoot(document.getElementById("root"));
-root.render(<RouterProvider router={router} />);
+root.render(
+  <AuthProvider>
+    <RouterProvider router={router} />
+  </AuthProvider>
+);
--- a/front/src/root.jsx
+++ b/front/src/root.jsx
@ -2,27 +2,57 @@ import { Link, Outlet } from "react-router-dom";

 import logo from "./assets/chessh_sm.svg";

-export const Root = () => (
-  <>
-    <div className="container">
-      <div className="navbar">
-        <div>
-          <Link to="/home">
-            <img src={logo} className="logo" />
-          </Link>
+import { useAuthContext, DEFAULT_EXPIRY_TIME_MS } from "./context/auth_context";
+
+export const Root = () => {
+  const { signedIn, setSignedIn, setSessionOver } = useAuthContext();
+  return (
+    <>
+      <div className="container">
+        <div className="navbar">
+          <div>
+            <Link to="/home">
+              <img src={logo} className="logo" alt="CheSSH Logo" />
+            </Link>
+          </div>
+          <div className="nav">
+            {signedIn ? (
+              <>
+                <Link className="link" to="/user">
+                  User
+                </Link>
+                <Link className="link" to="/keys">
+                  Keys
+                </Link>
+                <Link
+                  className="link"
+                  onClick={() => setSignedIn(false)}
+                  to="/"
+                >
+                  Sign Out
+                </Link>
+              </>
+            ) : (
+              <>
+                <a
+                  onClick={() =>
+                    setSessionOver(
+                      new Date(Date.now() + DEFAULT_EXPIRY_TIME_MS)
+                    )
+                  }
+                  href={process.env.REACT_APP_GITHUB_OAUTH}
+                  className="link"
+                >
+                  Login w/ GitHub
+                </a>
+              </>
+            )}
+          </div>
        </div>
-        <div className="nav">
-          <Link className="link" to="/user">
-            User
-          </Link>
-          <Link className="link" to="/keys">
-            Keys
-          </Link>
+        <div className="content">
+          <Outlet />
        </div>
      </div>
-      <div className="content">
-        <Outlet />
-      </div>
-    </div>
-  </>
-);
+    </>
+  );
+};
--- a/front/src/routes/auth_successful.jsx
+++ b/front/src/routes/auth_successful.jsx
@ -0,0 +1,38 @@
+import { useEffect, useCallback } from "react";
+import { useAuthContext } from "../context/auth_context";
+
+export const AuthSuccessful = () => {
+  const {
+    username,
+    signedIn,
+    setSignedIn,
+    setSessionOver,
+    setUserId,
+    setUsername,
+  } = useAuthContext();
+
+  const fetchMyself = useCallback(
+    () =>
+      fetch("/api/player/me", {
+        credentials: "same-origin",
+      })
+        .then((r) => r.json())
+        .then((player) => {
+          setSignedIn(!!player);
+          setUserId(player.id);
+          setUsername(player.username);
+        }),
+    [setSessionOver, setSignedIn, setUserId, setUsername]
+  );
+
+  useEffect(() => {
+    fetchMyself();
+  }, [fetchMyself]);
+
+  return (
+    <>
+      <h1>Successful Auth</h1>
+      {signedIn ? <p>Hello there, {username || ""}</p> : <p>Loading...</p>}
+    </>
+  );
+};
--- a/front/src/routes/demo.jsx
+++ b/front/src/routes/demo.jsx
@ -26,14 +26,14 @@ export const Demo = () => {
      );
      setRenderedPlayer(true);
    }
-  }, [player]);
+  }, [renderedPlayer, player]);

  return (
-    <div class="demo-container">
+    <div className="demo-container">
      <h1>
        Welcome to <span style={{ color: "green" }}>> CheSSH!</span>
      </h1>
-      <div class="flex-row-around">
+      <div className="flex-row-around">
        <p>
          CheSSH is a multiplayer, scalable, free, open source, and potentially
          passwordless game of Chess over the SSH protocol.
@ -42,6 +42,7 @@ export const Demo = () => {
          className="button gold"
          href="https://github.com/Simponic/chessh"
          target="_blank"
+          rel="noreferrer"
        >
          🌟 Star 🌟
        </a>
@ -49,10 +50,10 @@ export const Demo = () => {
      <hr />
      <div ref={player} id={demoCastElementId} />
      <hr />
-      <div class="flex-row-around">
+      <div className="flex-row-around">
        <h3>Would you like to play a game?</h3>
        <Link className="button" to="/home">
-          Yes, Joshua ↝
+          Yes, Joshua ⇒
        </Link>
      </div>
    </div>
--- a/front/src/routes/home.jsx
+++ b/front/src/routes/home.jsx
@ -1,7 +1,11 @@
+import { useAuthContext } from "../context/auth_context";
+
 export const Home = () => {
+  const { username } = useAuthContext();
+
  return (
    <div>
-      <h1>Welcome home!</h1>
+      <h1>Welcome home, {username || "guest"}!</h1>
    </div>
  );
 };
--- a/front/src/setupProxy.js
+++ b/front/src/setupProxy.js
@ -1,12 +1,15 @@
-const { createProxyMiddleware } = require('http-proxy-middleware');
+const { createProxyMiddleware } = require("http-proxy-middleware");

-module.exports = function(app) {
-  if (process.env.NODE_ENV != 'production') {
+module.exports = function (app) {
+  if (process.env.NODE_ENV != "production") {
    app.use(
-      '/api',
+      "/api",
      createProxyMiddleware({
-        target: 'http://localhost:8080',
+        target: "http://localhost:8080",
        changeOrigin: true,
+        pathRewrite: (path, _req) => {
+          return path.replace("/api", "");
+        },
      })
    );
  }
--- a/lib/chessh/schema/player.ex
+++ b/lib/chessh/schema/player.ex
@ -21,6 +21,15 @@ defmodule Chessh.Player do
    timestamps()
  end

+  defimpl Jason.Encoder, for: Chessh.Player do
+    def encode(value, opts) do
+      Jason.Encode.map(
+        Map.take(value, [:id, :github_id, :username, :created_at, :updated_at]),
+        opts
+      )
+    end
+  end
+
  def authentications_changeset(player, attrs) do
    player
    |> cast(attrs, [:authentications])
--- a/lib/chessh/ssh/daemon.ex
+++ b/lib/chessh/ssh/daemon.ex
@ -47,12 +47,12 @@ defmodule Chessh.SSH.Daemon do
            :disconnect
        end

-      x ->
+      authed_or_disconnect ->
        PlayerSession.update_sessions_and_player_satisfies(username, fn _player ->
-          x
+          authed_or_disconnect
        end)

-        x
+        authed_or_disconnect
    end
  end

@ -92,7 +92,7 @@ defmodule Chessh.SSH.Daemon do
  def handle_info(_, state), do: {:noreply, state}

  defp on_disconnect(_reason) do
-    Logger.debug("#{inspect(self())} disconnected")
+    Logger.info("#{inspect(self())} disconnected")

    Repo.delete_all(
      from(p in PlayerSession,
--- a/lib/chessh/web/token.ex
+++ b/lib/chessh/web/token.ex
@ -1,3 +1,5 @@
 defmodule Chessh.Web.Token do
  use Joken.Config
+
+  def token_config, do: default_claims(default_exp: 12 * 60 * 60)
 end
--- a/lib/chessh/web/web.ex
+++ b/lib/chessh/web/web.ex
@ -36,59 +36,27 @@ defmodule Chessh.Web.Endpoint do
      end

    {status, body} =
-      case resp do
-        %{"access_token" => access_token} ->
-          case :httpc.request(
-                 :get,
-                 {String.to_charlist(github_user_api_url),
-                  [
-                    {'Authorization', String.to_charlist("Bearer #{access_token}")},
-                    {'User-Agent', github_user_agent}
-                  ]},
-                 [],
-                 []
-               ) do
-            {:ok, {{_, 200, 'OK'}, _, user_details}} ->
-              %{"login" => username, "id" => github_id} =
-                Jason.decode!(String.Chars.to_string(user_details))
+      create_player_from_github_response(resp, github_user_api_url, github_user_agent)

-              %Player{id: id} =
-                Repo.insert!(%Player{github_id: github_id, username: username},
-                  on_conflict: [set: [github_id: github_id]],
-                  conflict_target: :github_id
-                )
+    case body do
+      %{jwt: token} ->
+        client_redirect_location =
+          Application.get_env(:chessh, Web)[:client_redirect_after_successful_sign_in]

-              {200,
-               %{
-                 success: true,
-                 jwt:
-                   Token.generate_and_sign!(%{
-                     "uid" => id
-                   })
-               }}
+        conn
+        |> put_resp_cookie("jwt", token)
+        |> put_resp_header("location", client_redirect_location)
+        |> send_resp(301, '')

-            _ ->
-              {400, %{errors: "Access token was incorrect. Try again."}}
-          end
-
-        _ ->
-          {400, %{errors: "Failed to retrieve token from GitHub. Try again."}}
-      end
-
-    conn
-    |> put_resp_content_type("application/json")
-    |> send_resp(status, Jason.encode!(body))
+      _ ->
+        conn
+        |> put_resp_content_type("application/json")
+        |> send_resp(status, Jason.encode!(body))
+    end
  end

  put "/player/password" do
-    jwt =
-      Enum.find_value(conn.req_headers, fn {header, value} ->
-        if header === "authorization", do: value
-      end)
-
-    {:ok, %{"uid" => uid}} = Token.verify_and_validate(jwt)
-
-    player = Repo.get(Player, uid)
+    player = get_player_from_jwt(conn)

    {status, body} =
      case conn.body_params do
@ -151,17 +119,13 @@ defmodule Chessh.Web.Endpoint do
  end

  post "/player/keys" do
-    jwt =
-      Enum.find_value(conn.req_headers, fn {header, value} ->
-        if header === "authorization", do: value
-      end)
-
-    {:ok, %{"uid" => uid}} = Token.verify_and_validate(jwt)
+    player = get_player_from_jwt(conn)

    {status, body} =
      case conn.body_params do
        %{"key" => key, "name" => name} ->
-          case Key.changeset(%Key{}, %{player_id: uid, key: key, name: name}) |> Repo.insert() do
+          case Key.changeset(%Key{}, %{player_id: player.id, key: key, name: name})
+               |> Repo.insert() do
            {:ok, _new_key} ->
              {
                200,
@ -191,6 +155,14 @@ defmodule Chessh.Web.Endpoint do
    |> send_resp(status, Jason.encode!(body))
  end

+  get "/player/me" do
+    player = get_player_from_jwt(conn)
+
+    conn
+    |> put_resp_content_type("application/json")
+    |> send_resp(200, Jason.encode!(player))
+  end
+
  get "/player/:id/keys" do
    %{"id" => player_id} = conn.path_params

@ -198,22 +170,17 @@ defmodule Chessh.Web.Endpoint do

    conn
    |> put_resp_content_type("application/json")
-    |> send_resp(200, Jason.encode!(%{keys: keys}))
+    |> send_resp(200, Jason.encode!(keys))
  end

  delete "/keys/:id" do
-    jwt =
-      Enum.find_value(conn.req_headers, fn {header, value} ->
-        if header === "authorization", do: value
-      end)
-
-    {:ok, %{"uid" => uid}} = Token.verify_and_validate(jwt)
+    player = get_player_from_jwt(conn)

    %{"id" => key_id} = conn.path_params
    key = Repo.get(Key, key_id)

    {status, body} =
-      if key && uid == key.player_id do
+      if key && player.id == key.player_id do
        case Repo.delete(key) do
          {:ok, _} ->
            {200, %{success: true}}
@ -258,4 +225,58 @@ defmodule Chessh.Web.Endpoint do
      fn key -> Application.get_env(:chessh, Web)[key] end
    )
  end
+
+  defp get_player_from_jwt(conn) do
+    auth_header =
+      Enum.find_value(conn.req_headers, fn {header, value} ->
+        if header === "authorization", do: value
+      end)
+
+    jwt = if auth_header, do: auth_header, else: Map.get(fetch_cookies(conn).cookies, "jwt")
+
+    {:ok, %{"uid" => uid}} = Token.verify_and_validate(jwt)
+
+    Repo.get(Player, uid)
+  end
+
+  defp create_player_from_github_response(resp, github_user_api_url, github_user_agent) do
+    case resp do
+      %{"access_token" => access_token} ->
+        case :httpc.request(
+               :get,
+               {String.to_charlist(github_user_api_url),
+                [
+                  {'Authorization', String.to_charlist("Bearer #{access_token}")},
+                  {'User-Agent', github_user_agent}
+                ]},
+               [],
+               []
+             ) do
+          {:ok, {{_, 200, 'OK'}, _, user_details}} ->
+            %{"login" => username, "id" => github_id} =
+              Jason.decode!(String.Chars.to_string(user_details))
+
+            %Player{id: id} =
+              Repo.insert!(%Player{github_id: github_id, username: username},
+                on_conflict: [set: [github_id: github_id]],
+                conflict_target: :github_id
+              )
+
+            {200,
+             %{
+               success: true,
+               jwt:
+                 Token.generate_and_sign!(%{
+                   "uid" => id
+                 })
+             }}
+
+          _ ->
+            {400, %{errors: "Access token was incorrect. Try again."}}
+        end
+
+      _ ->
+        {400, %{errors: "Failed to retrieve token from GitHub. Try again."}}
+    end
+  end
 end
--- a/package-lock.json
+++ b/package-lock.json
@ -0,0 +1,6 @@
+{
+  "name": "chessh",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {}
+}