🚧 feat: implement auth (second iteration) improvements (#28)

This PR implements some improvement to mark the second iteration of the
`auth` feature in the project. Follow-up to #8

### Changes Made

- Addressed "todo make the `parsedState` data more predictable (order by
path, redirect)" by implementing more predicatable manner of generating
the `state` string for the oauth url; this is done by individually
looking for the required `state` object `key` to fill in the
`parsedState` string in required order. Leaving the new `getAuthUrl`
helper function looking like so...

```js
function getAuthUrl(state) {
  let parsedState = "";

  if (!isObjectEmpty(state)){
    if (state.path) parsedState += `path:${state.path}`;
    const otherStates = String(Object.keys(state)
      .filter(key => key !== "path" && key !== "redirect")
      .map(key => key + ":" + state[key]).join("|"));
    if (otherStates.length > 0) parsedState += `|${otherStates}`;
  }

  const { url } = app.oauth.getWebFlowAuthorizationUrl({
    state: parsedState
  });

  return url;
}
```
- Implemented a new utility function `isObjectEmpty` to check if an
object has value or not
- Removed usage of `redirect` property in state object; its redundant
😮‍💨
- Renamed login redirect path params property name to `return_to` from
`redirect` for readability reasons
- Implemented `encodeURIComponent` in login redirect path params value
to stop its part on the url from looking like weird 😃;
- Takes the example url from looking like this...
`/login?return_to=/editor` to looking like so...
`/login?return_to=%2Feditor`

### Related Isssue

Resolves #15

Author: babblebey

src/lib/actions/do-auth.js

@@ -1,7 +1,7 @@
 import app from "../octokit/app.js";
 import { decrypt, encrypt } from "../utils/crypto.js";
-import { GET } from "../../pages/api/github/oauth/authorize.js";
-import { resolveCookieExpiryDate } from "../utils/index.js";
+import { GET as getAuthorization } from "../../pages/api/github/oauth/authorize.js";
+import { isObjectEmpty as isStateEmpty, resolveCookieExpiryDate } from "../utils/index.js";
 
 /**
  * Authentication action with GitHub OAuth
@@ -16,30 +16,39 @@ export default async function doAuth(astroGlobal) {
 
   /**
    * Generate OAuth Url to start authorization flow
-   * @todo make the `parsedState` data more predictable (order by path, redirect)
-   * @todo improvement: store `state` in cookie for later retrieval in `github/oauth/callback` handler for cleaner url
-   * @param {{ path?: string, redirect?: boolean }} state 
+   * @todo improvement: store `state` in cookie for later retrieval/comparison with auth `state` in `github/oauth/callback`
+   * @param {{ path: string }} state 
    */
   function getAuthUrl(state) {
-    const parsedState = String(Object.keys(state).map(key => key + ":" + state[key]).join("|"));
+    let parsedState = "";
+
+    if (!isStateEmpty(state)){
+      if (state.path) parsedState += `path:${state.path}`;
+      const otherStates = String(Object.keys(state)
+        .filter(key => key !== "path" && key !== "redirect")
+        .map(key => key + ":" + state[key]).join("|"));
+      if (otherStates.length > 0) parsedState += `|${otherStates}`;
+    }
+
     const { url } = app.oauth.getWebFlowAuthorizationUrl({
       state: parsedState
     });
+
     return url;
   }
 
   try {
     if (!accessToken && code) {
-      const response = await GET(astroGlobal);
-      const responseData = await response.json();
+      const response = await getAuthorization(astroGlobal);
+      const auth = await response.json();
 
-      if (responseData.accessToken && responseData.refreshToken) {
-        cookies.set("jargons.dev:token", responseData.accessToken, {
-          expires: resolveCookieExpiryDate(responseData.expiresIn),
+      if (auth.accessToken && auth.refreshToken) {
+        cookies.set("jargons.dev:token", auth.accessToken, {
+          expires: resolveCookieExpiryDate(auth.expiresIn),
           encode: value => encrypt(value)
         });
-        cookies.set("jargons.dev:refresh-token", responseData.refreshToken, {
-          expires: resolveCookieExpiryDate(responseData.refreshTokenExpiresIn),
+        cookies.set("jargons.dev:refresh-token", auth.refreshToken, {
+          expires: resolveCookieExpiryDate(auth.refreshTokenExpiresIn),
           encode: value => encrypt(value)
         });
       }

src/lib/utils/index.js

@@ -30,4 +30,13 @@ export function getRepoParts(repoFullname) {
  */
 export function normalizeAsUrl(string) {
   return string.toLowerCase().replace(/\s+/g, "-");
+}
+
+/**
+ * Checks if a given object is empty
+ * @param {object} object 
+ * @returns {boolean}
+ */
+export function isObjectEmpty(object) {
+  return JSON.stringify(object) === "{}"
 }

src/pages/api/github/oauth/callback.js

@@ -11,11 +11,9 @@ export async function GET({ url: { searchParams }, redirect }) {
   }
 
   const path = state.includes("path") && state.split("|")[0].split(":")[1];
-  const isRedirect = state.includes("redirect") ? state.split("|")[1].split(":")[1] : false;
 
-  if (!isRedirect) {
-    return redirect(`${path}?code=${code}&redirect=${true}`);
-  }
+  if (path) return redirect(`${path}?code=${code}`);
 
-  return redirect(`${path}?code=${code}`);
+  // Lifeline/Last resort for when the return `path` is NOT specified/found in state
+  return redirect(`/login?return_to=${encodeURIComponent("/")}`)
 }

src/pages/editor/index.astro

@@ -6,8 +6,9 @@ import Navbar from "../../components/navbar.astro";
 import WordEditor from "../../components/islands/word-editor.jsx";
 
 const { url: { pathname }, redirect } = Astro;
+
 const { isAuthed, authedData: userData } = await doAuth(Astro);
-if (!isAuthed) return redirect(`/login?redirect=${pathname}`);
+if (!isAuthed) return redirect(`/login?return_to=${encodeURIComponent(pathname)}`);
 // @ts-expect-error
 $userData.set(userData);
 ---

src/pages/login.astro

@@ -3,14 +3,10 @@ import BaseLayout from "../layouts/base.astro";
 import doAuth from "../lib/actions/do-auth.js";
 
 const { url: { searchParams }, redirect } = Astro;
-const { getAuthUrl, isAuthed } = await doAuth(Astro);
-
-if (isAuthed) return redirect(searchParams.get("redirect"));
 
-const authUrl = getAuthUrl({
-  path: searchParams.get("redirect"),
-  redirect: true
-});
+const { getAuthUrl, isAuthed } = await doAuth(Astro);
+if (isAuthed) return redirect(searchParams.get("return_to"));
+const authUrl = getAuthUrl({ path: searchParams.get("return_to") });
 ---
 
 <BaseLayout pageTitle="Dictionary">