Revert "Only request token endpoint initially, then use a cookie to d… (#1868)

* Revert "Only request token endpoint initially, then use a cookie to determine if there is an authenticated user (#1740)"

This reverts commit 0759959.

* Restore js-cookie

Author: theodesp

.changeset/brave-cougars-lie.md

@@ -18,9 +18,9 @@
     "@types/is-number": "^7.0.1",
     "@types/isomorphic-fetch": "^0.0.35",
     "@types/jest": "^27.0.2",
-    "@types/js-cookie": "^3.0.6",
     "@types/lodash": "^4.14.176",
     "@types/node": "^17.0.17",
+    "@types/js-cookie": "^3.0.6",
     "@types/testing-library__react": "10.2.0",
     "concurrently": "^7.6.0",
     "fetch-mock": "9.11.0",
@@ -39,9 +39,9 @@
     "deepmerge": "^4.2.2",
     "fast-xml-parser": "^4.2.5",
     "isomorphic-fetch": "^3.0.0",
-    "js-cookie": "^3.0.5",
     "js-sha256": "^0.9.0",
-    "lodash": "^4.17.21"
+    "lodash": "^4.17.21",
+    "js-cookie": "^3.0.5"
   },
   "scripts": {
     "dev": "concurrently \"npm:watch-*\" --prefix-colors \"auto\"",

package-lock.json

@@ -1,16 +1,14 @@
 import { gql, useQuery } from '@apollo/client';
-import cookies from 'js-cookie';
 import React, { useEffect, useMemo, useState } from 'react';
 import { getApolloAuthClient } from '../../client.js';
 import { useAuth } from '../../hooks/useAuth.js';
-import { getWpUrl } from '../../lib/getWpUrl.js';
 import { SeedNode } from '../../queries/seedQuery.js';
 import { hooks } from '../../wpHooks/index.js';
-import { ToolbarNode } from './ToolbarNode.js';
 import { Edit } from './nodes/Edit.js';
 import { GraphiQL } from './nodes/GraphiQL.js';
 import { MyAccount } from './nodes/MyAccount.js';
 import { SiteName } from './nodes/SiteName.js';
+import { ToolbarNode } from './ToolbarNode.js';
 
 /**
  * The available menu locations that nodes can be added to.
@@ -217,16 +215,7 @@ export function ToolbarAwaitUser({ seedNode }: ToolbarProps) {
  * Renders a Toolbar that is based on WordPress' own toolbar.
  */
 export function Toolbar({ seedNode }: ToolbarProps) {
-  const hasAuthenticatedUser = cookies.get(`${getWpUrl()}-has-rt`);
-
-  const { isAuthenticated } = useAuth({
-    strategy: 'redirect',
-    /**
-     * If the hasAuthenticatedUser cookie exists and it's "0", skip
-     * running the useAuth hook.
-     */
-    skip: hasAuthenticatedUser === '0',
-  });
+  const { isAuthenticated } = useAuth();
 
   if (isAuthenticated !== true) {
     return null;

packages/faustwp-core/package.json

@@ -9,38 +9,6 @@ export interface CookieOptions {
   isJson?: boolean;
 }
 
-/**
- * Merge cookies from current Set-Cookie header with a new cookie string.
- *
- * @param setCookieHeader Current Set-Cookie header if exists.
- * @param newCookie The new cookie string to be applied.
- * @returns A cookie string or array of cookie strings.
- */
-export function mergeCookies(
-  setCookieHeader: string | string[] | number | undefined,
-  newCookie: string,
-) {
-  // If there is no setCookieHeader, return the newCookie early.
-  if (!setCookieHeader) {
-    return newCookie;
-  }
-
-  /**
-   * If there is already a Set-Cookie header, create an array and merge
-   * the existing ones with the new cookie.
-   */
-  let newCookies: string[] = [];
-  if (Array.isArray(setCookieHeader)) {
-    newCookies = [...setCookieHeader];
-  } else {
-    newCookies = [setCookieHeader as string];
-  }
-
-  newCookies = [...newCookies, newCookie];
-
-  return newCookies;
-}
-
 export class Cookies {
   private request: IncomingMessage;
 
@@ -90,13 +58,20 @@ export class Cookies {
 
     this.cookies[key] = cookieValue;
 
-    const existingCookieHeader = this.response?.getHeader('Set-Cookie');
-
-    const newCookies = mergeCookies(
-      existingCookieHeader,
+    this.response?.setHeader(
+      'Set-Cookie',
       cookie.serialize(key, cookieValue, serializeOptions),
     );
+  }
 
-    this.response?.setHeader('Set-Cookie', newCookies);
+  public removeCookie(key: string): void {
+    delete this.cookies[key];
+
+    this.response?.setHeader(
+      'Set-Cookie',
+      cookie.serialize(key, '', {
+        expires: new Date(0),
+      }),
+    );
   }
 }

packages/faustwp-core/src/components/Toolbar/Toolbar.tsx

@@ -32,7 +32,6 @@ export async function authorizeHandler(
 
   if (!refreshToken && !code) {
     res.statusCode = 401;
-    oauth.setRefreshToken(undefined);
     res.setHeader('Content-Type', 'application/json');
     res.end(JSON.stringify({ error: 'Unauthorized' }));
 

packages/faustwp-core/src/server/auth/cookie.ts

@@ -23,53 +23,29 @@ export class OAuth {
 
   private tokenKey: string;
 
-  private hasTokenKey: string;
-
   constructor(cookies: Cookies) {
     this.cookies = cookies;
     this.tokenKey = `${getWpUrl()}-rt`;
-    this.hasTokenKey = `${getWpUrl()}-has-rt`;
   }
 
   public getRefreshToken(): string | undefined {
     return this.cookies.getCookie(this.tokenKey);
   }
 
   public setRefreshToken(token?: string, expires?: number): void {
-    let maxAge: number | undefined = 2592000;
-    let expiresIn: Date | undefined;
-
     if (!isString(token) || token.length === 0) {
-      this.cookies.setCookie(this.tokenKey, '', {
-        path: '/',
-        expires: new Date(0),
-        secure: true,
-        httpOnly: true,
-      });
-
-      this.cookies.setCookie(this.hasTokenKey, '0', {
-        path: '/',
-        encoded: false,
-        maxAge,
-        expires: expiresIn,
-      });
-
-      return;
+      this.cookies.removeCookie(this.tokenKey);
     }
 
+    let maxAge: number | undefined = 2592000;
+    let expiresIn: Date | undefined;
+
     if (isNumber(expires)) {
       expiresIn = new Date(expires * 1000);
       maxAge = undefined;
     }
 
-    this.cookies.setCookie(this.hasTokenKey, '1', {
-      path: '/',
-      encoded: false,
-      maxAge,
-      expires: expiresIn,
-    });
-
-    this.cookies.setCookie(this.tokenKey, token, {
+    this.cookies.setCookie(this.tokenKey, token as string, {
       expires: expiresIn,
       maxAge,
       path: '/',