Allow Reddit OAuth2 settings to be configured from env vars (#6)

Create a LoginButton component and expose OAuth2 env vars for config

components/common/LoginButton.tsx

@@ -0,0 +1,24 @@
+import { useConfig } from '../../functions/useConfig';
+import Link from 'next/link';
+
+const LoginButton = () => {
+  const { config } = useConfig();
+  const { REDDIUM_CLIENT_ID, REDDIUM_DISABLE_LOGIN, REDDIUM_DOMAIN } = config;
+  const REDIRECT_URI = `${REDDIUM_DOMAIN}/login`;
+
+  if (REDDIUM_DISABLE_LOGIN) {
+    return null;
+  }
+
+  return (
+    <Link href={`https://www.reddit.com/api/v1/authorize.compact?client_id=${REDDIUM_CLIENT_ID}&response_type=code&state=testing&redirect_uri=${REDIRECT_URI}&duration=temporary&scope=${encodeURIComponent(
+      "read vote save identity subscribe"
+    )}`}>
+      <button className="my-4 ml-4 p-1 px-3 text-sm cursor-pointer max-w-full btn-black text-white outline-1px rounded">
+        Login
+      </button>
+    </Link>
+  );
+};
+
+export default LoginButton;

components/common/index.tsx

@@ -6,6 +6,7 @@ import { getIntFromString, getTime, limitText } from "../../functions/common";
 import { CLIENT_ID, DESC_MAX, REDIRECT_URI } from "../../functions/constants";
 import { DropdownProps, Props } from "../../interfaces";
 import { useConfig } from '../../lib/ConfigContext'; 
+import LoginButton from './LoginButton';  // Import the new LoginButton component
 
 export const MidContainer = ({ children }: Props) => (
   <div className="mid-container px-4 sm:px-0">{children}</div>
@@ -191,13 +192,7 @@ export const NavMenu = ({ token = "" }: any) => {
       {token != "" ? (
         <ProfileOptions />
       ) : (
-        <Link href={`https://www.reddit.com/api/v1/authorize.compact?client_id=${CLIENT_ID}&response_type=code&state=testing&redirect_uri=${REDIRECT_URI}&duration=temporary&scope=${encodeURIComponent(
-          "read vote save identity subscribe"
-        )}`}>
-          <button className="my-4 ml-4 p-1 px-3 text-sm cursor-pointer max-w-full btn-black text-white outline-1px rounded">
-            Login
-          </button>
-        </Link>
+        <LoginButton />
       )}
     </div>
   );

functions/constants.tsx

@@ -1,9 +1,10 @@
-export const DOMAIN = "https://reddium.vercel.app";
-export const REDIRECT_URI = "https://reddium.vercel.app/login";
-export const CLIENT_ID = "DT8MZ0k_rAtJ8w";
+import getConfig from 'next/config';
 
-// export const REDIRECT_URI = "http://localhost:3000/login";
-// export const CLIENT_ID = "RCOnAetgJAnYxQ";
+const { publicRuntimeConfig } = getConfig() || {};
+
+export const DOMAIN = publicRuntimeConfig.REDDIUM_DOMAIN || "http://localhost:3000";
+export const REDIRECT_URI = `${DOMAIN}/login`;
+export const CLIENT_ID = publicRuntimeConfig.REDDIUM_CLIENT_ID;
 
 export const CHILDREN_CONTENT = "\n\n\n\n\n\n\n\n\n<div class=\"\n  \n  \n  thing id-t1_getvcwk\n  noncollapsed \n \n  \n   \n comment  \"\n      id=\"thing_t1_getvcwk\"\n     onclick=\"click_thing(this)\"\n    \n  \n  \n      \n      data-fullname=\"t1_getvcwk\"\n      data-type=\"comment\"\n\n    data-gildings=\"0\"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n    data-subreddit=\"AskReddit\"\n    data-subreddit-prefixed=\"r/AskReddit\"\n    data-subreddit-fullname=\"t5_2qh1i\"\n    data-subreddit-type=\"public\"\n\n\n\n    data-author=\"Commentingunreddit\"\n    data-author-fullname=\"t2_4v9kxdwk\"\n\n\n    data-replies=\"0\"\n\n\n      data-permalink=\"/r/AskReddit/comments/k7pmbf/exprisoners_of_reddit_what_was_the_worst_thing/getvcwk/\"\n\n>\n  <p class=\"parent\">\n    \n  \n\n    <a name=\"getvcwk\"></a>\n\n  </p>\n  \n\n  \n  \n\n  \n  <div class=\"midcol unvoted\"\n       >\n    \n\n  <div \nclass=\"arrow up login-required access-required\"\n\n    data-event-action=\"upvote\"\n       role=\"button\"\n       aria-label=\"upvote\"\n       tabindex=\"0\"\n    >\n  </div>\n\n    \n\n  <div \nclass=\"arrow down login-required access-required\"\n\n    data-event-action=\"downvote\"\n       role=\"button\"\n       aria-label=\"downvote\"\n       tabindex=\"0\"\n    >\n  </div>\n\n  </div>\n\n\n\n  <div class=\"entry unvoted\">\n    \n\n\n<p class=\"tagline\">\n  \n  \n\n  <a href=\"javascript:void(0)\" class=\"expand\" onclick=\"return togglecomment(this)\">\n    [–]\n  </a>\n\n    \n\n\n\n\n\n\n\n    \n    \n  \n\n  \n<a \n      href=\"https://www.reddit.com/user/Commentingunreddit\"       class=\"author may-blank id-t2_4v9kxdwk\" >Commentingunreddit</a>\n\n\n      \n\n    \n<span class=\"userattrs\">\n</span>\n\n\n\n\n     \n\n\n\n    \n  \n    <span class=\"score dislikes\" title=\"19\">\n      19 points\n    </span>\n    <span class=\"score unvoted\" title=\"20\">\n      20 points\n    </span>\n    <span class=\"score likes\" title=\"21\">\n      21 points\n    </span>\n \n\n  \n  \n  \n  <time title=\"Sun Dec  6 13:55:17 2020 UTC\" datetime=\"2020-12-06T13:55:17+00:00\" class=\"live-timestamp\">\n    2 hours ago\n  </time>\n\n\n  \n\n\n    \n  <span\n    class=\"awardings-bar\"\n      data-subredditpath=\"/r/AskReddit/\"\n  >\n  </span>\n\n\n  \n\n\n\n\n   \n  <a href=\"javascript:void(0)\" class=\"numchildren\" onclick=\"return togglecomment(this)\">\n    (0 children)\n  </a>\n\n  \n\n\n\n</p>\n\n\n  \n  \n\n\n\n\n\n\n\n\n\n  <form action=\"#\" class=\"usertext warn-on-unload\"\n        onsubmit=\"return post_form(this, 'editusertext')\"\n        \n        id=\"form-t1_getvcwk6aa\">\n\n  <input type=\"hidden\" name=\"thing_id\" value=\"t1_getvcwk\"/>\n\n\n    <div class=\"usertext-body may-blank-within md-container \"\n      >\n      \n  <!-- SC_OFF --><div class=\"md\"><p>Ive never been to prison but my cousin did and He came back out all sorts of messed up, \nHe was arrested for drugs.</p>\n\n<p>according to him he spent the majority of his time in solitary confinement. For his safety.\nHe said that his first couple of months there were ok, as far as prison goes.</p>\n\n<p>But that one day, for whatever reason some guy who had been kept separate from the general population was accidentally put with the rest of the prisoners, unsupervised and that a few prisoners grabbed the guy and that they stomped on his elbows and legs to break them before they sodomized him with some shivs. </p>\n\n<p>My cousin said it that those guys did it all in a instant and that they threatened him if he snitched, my cousin was later interviewed by some of the guards before they took the guys who did this and so some thought that he had snitched.</p>\n\n<p>He says that he didn't, but that didn't matter because the guards had put him in solitary for "safety" and was eventually kept there for months longer, because he wouldn't snitch so they tried to accuse him of being an accomplice.</p>\n</div><!-- SC_ON -->\n\n    </div>\n\n\n  </form>\n\n\n\n\n<ul class=\"flat-list buttons\">\n  \n  \n    <li class=\"first\">\n      \n  \n  \n  \n\n  \n<a \n      href=\"https://www.reddit.com/r/AskReddit/comments/k7pmbf/exprisoners_of_reddit_what_was_the_worst_thing/getvcwk/\"       \ndata-event-action=\"permalink\"\n\n      class=\"bylink\"       rel=\"nofollow\" >permalink</a>\n\n\n\n    </li>\n\n      <li class=\"comment-save-button save-button login-required\">\n        <a href=\"javascript:void(0)\">save</a>\n      </li>\n\n\n\n\n    \n\n    <li class=\"report-button login-required\">\n      <a href=\"javascript:void(0)\" class=\"reportbtn access-required\"\n        data-event-action=\"report\">\n          report\n      </a>\n    </li>\n\n    \n\n    \n\n    \n    <li class=\"give-gold-button\">\n    <a href=\"/gold?goldtype=gift&months=1&thing=t1_getvcwk\"\n        title=\"give an award in appreciation of this post.\"\n        class=\"give-gold login-required access-required gold-give-gold\"\n        data-event-action=\"gild\"\n        data-community-awards-enabled=True\n        rel=\"nofollow\"\n        >give award</a>\n    </li>\n\n    \n\n    \n\n\n    \n\n\n        <li class=\"reply-button login-required\">\n          \n <a class=\"access-required\" href=\"javascript:void(0)\" \n      data-event-action=\"comment\"\n    onclick=\"return reply(this)\">reply</a>\n\n        </li>\n\n    \n\n\n\n\n\n\n  \n\n\n</ul>\n<div class=\"reportform report-t1_getvcwk\"></div>\n\n  </div>\n  \n  <div class=\"child\">\n    \n  </div>\n\n  <div class=\"clearleft\"></div>\n</div>\n<div class=\"clearleft\"></div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"
 
@@ -66,3 +67,4 @@ export const PLACEHOLDER_IMAGES = [
   "vlad-hilitanu-oKc7vCb4SS4-unsplash.jpg",
   "you-x-ventures-Oalh2MojUuk-unsplash.jpg"
 ];
+

functions/useConfig.ts

@@ -5,6 +5,9 @@ interface Config {
   REDDIUM_DISABLE_KOFI_LINK?: boolean;
   REDDIUM_DISABLE_GITHUB_LINK?: boolean;
   REDDIUM_THEME?: string;
+  REDDIUM_CLIENT_ID?: string;
+  REDDIUM_CLIENT_SECRET?: string;
+  REDDIUM_DISABLE_LOGIN?: boolean;
 }
 
 export function useConfig() {
@@ -22,6 +25,9 @@ export function useConfig() {
     REDDIUM_DISABLE_KOFI_LINK: config?.REDDIUM_DISABLE_KOFI_LINK ?? false,
     REDDIUM_DISABLE_GITHUB_LINK: config?.REDDIUM_DISABLE_GITHUB_LINK ?? false,
     REDDIUM_THEME: config?.REDDIUM_THEME ?? 'default',
+    REDDIUM_CLIENT_ID: config?.REDDIUM_CLIENT_ID ?? '',
+    REDDIUM_CLIENT_SECRET: config?.REDDIUM_CLIENT_SECRET ?? '',
+    REDDIUM_DISABLE_LOGIN: config?.REDDIUM_DISABLE_LOGIN ?? true,
   };
 
   return { config: safeConfig };

next.config.js

@@ -9,6 +9,7 @@ const nextConfig = {
     // Set defaults
     REDDIUM_DISABLE_ABOUT: true,
     REDDIUM_DISABLE_KOFI_LINK: true,
+    REDDIUM_DISABLE_LOGIN: true,
     // Overwrite with any REDDIUM_ environment variables
     ...Object.fromEntries(
       Object.entries(process.env)
@@ -21,4 +22,13 @@ const nextConfig = {
   },
 };
 
+// Check for required environment variables
+const requiredEnvVars = ['REDDIUM_CLIENT_ID', 'REDDIUM_CLIENT_SECRET'];
+const missingEnvVars = requiredEnvVars.filter(envVar => !process.env[envVar]);
+
+if (missingEnvVars.length > 0) {
+  console.error(`😢 Error: Missing required environment variables: ${missingEnvVars.join(', ')}`);
+  process.exit(1);
+}
+
 module.exports = nextConfig;

pages/login/index.tsx

@@ -1,7 +1,10 @@
 import { GetServerSideProps } from "next";
 import React from "react";
 import Cookies from "cookies";
-import { CLIENT_ID, REDIRECT_URI } from "../../functions/constants";
+import getConfig from 'next/config';
+import { REDIRECT_URI } from "../../functions/constants";
+
+const { publicRuntimeConfig, serverRuntimeConfig } = getConfig() || {};
 
 export const getServerSideProps: GetServerSideProps = async ({
   req,
@@ -15,7 +18,7 @@ export const getServerSideProps: GetServerSideProps = async ({
       headers: {
         "Content-Type": "application/x-www-form-urlencoded",
         Authorization: `Basic ${Buffer.from(
-          `${CLIENT_ID}:${process.env.CLIENT_SECRET}`
+          `${publicRuntimeConfig.REDDIUM_CLIENT_ID}:${serverRuntimeConfig.REDDIUM_CLIENT_SECRET}`
         ).toString("base64")}`,
       },
       body: new URLSearchParams({