move-chrome-extension-auth-to-context

app/src/api/api.ts

@@ -307,8 +307,8 @@ const Bookmark = gql`
 
 const CreateContentFromUrl = gql`
   ${BaseContentFields}
-  mutation CreateContentFromUrl($url: String!, $authProviderId: String) {
-    createContentFromUrl(url: $url, authProviderId: $authProviderId) {
+  mutation CreateContentFromUrl($url: String!) {
+    createContentFromUrl(url: $url) {
       ...BaseContentFields
     }
   }

chrome-extension-mv3-firebase/src/css/popup.css

@@ -70,6 +70,12 @@ h1 {
   font-size: 18px;
 }
 
+.btn__sign_out {
+  margin-top: 10px;
+  background-color: #f44336;
+  color: white;
+}
+
 .btn__google:hover {
   background-color: #fff;
   color: #4285f4;
@@ -92,6 +98,6 @@ h1 {
   display: none;
 }
 
-#main-content {
+/* #main-content {
   display: none;
-}
+} */

chrome-extension-mv3-firebase/src/popup/main-script.js

@@ -3,19 +3,30 @@ import {
   GoogleAuthProvider,
   onAuthStateChanged,
   signInWithCredential,
+  signOut,
 } from "firebase/auth";
 import { firebaseApp } from "./firebase_config";
 
 const auth = getAuth(firebaseApp);
 
 console.log("popup main!");
 
+const apiUrl = process.env.API_URL;
+console.log(`API URL: ${apiUrl}`);
+
+const isDevelopment =
+  apiUrl.includes("localhost") || apiUrl.includes("127.0.0.1");
+
 function handleAuthStateChange(user) {
   if (user) {
     console.log("logged in!");
     console.log("current user:", user);
     document.getElementById("likeContent").style.display = "block";
     saveCurrentLink();
+
+    if (isDevelopment) {
+      document.getElementById("signOutContainer").style.display = "block";
+    }
   } else {
     console.log("No user");
     window.location.replace("./popup.html");
@@ -42,27 +53,32 @@ function checkForExistingToken() {
   });
 }
 
-const apiUrl = process.env.API_URL;
-console.log(`API URL: ${apiUrl}`);
-
 async function saveCurrentLink() {
   const messageDiv = document.getElementById("message");
   chrome.tabs.query({ active: true, currentWindow: true }, async (tabs) => {
     const tab = tabs[0];
     const user = auth.currentUser;
-    const authProviderId = user ? user.uid : null;
+
+    if (!user) {
+      console.error("No user logged in");
+      messageDiv.textContent = "Please log in to save links.";
+      return;
+    }
 
     console.log("saving link using api url:", apiUrl);
 
     try {
+      const idToken = await user.getIdToken();
+
       const response = await fetch(`${apiUrl}/graphql`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
+          Authorization: `Bearer ${idToken}`,
         },
         body: JSON.stringify({
-          query: `mutation($url: String!, $authProviderId: String) {
-            createContentFromUrl(url: $url, authProviderId: $authProviderId) {
+          query: `mutation($url: String!) {
+            createContentFromUrl(url: $url) {
               id
               title
               websiteUrl
@@ -73,7 +89,6 @@ async function saveCurrentLink() {
           }`,
           variables: {
             url: tab.url,
-            authProviderId,
           },
         }),
       });
@@ -111,21 +126,28 @@ async function checkBookmarkStatus() {
     const tab = tabs[0];
     const url = tab.url;
     const user = auth.currentUser;
-    const authProviderId = user ? user.uid : null;
+
+    if (!user) {
+      console.error("No user logged in");
+      messageDiv.textContent = "Please log in to check bookmark status.";
+      return;
+    }
 
     try {
+      const idToken = await user.getIdToken();
+
       const response = await fetch(`${apiUrl}/graphql`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
+          Authorization: `Bearer ${idToken}`,
         },
         body: JSON.stringify({
-          query: `query($url: String!, $authProviderId: String) {
-            getIsBookmarked(url: $url, authProviderId: $authProviderId)
+          query: `query($url: String!) {
+            getIsBookmarked(url: $url)
           }`,
           variables: {
             url,
-            authProviderId,
           },
         }),
       });
@@ -169,24 +191,31 @@ async function toggleBookmark() {
     }
 
     const user = auth.currentUser;
-    const authProviderId = user ? user.uid : null;
+
+    if (!user) {
+      console.error("No user logged in");
+      messageDiv.textContent = "Please log in to toggle bookmark.";
+      return;
+    }
 
     try {
+      const idToken = await user.getIdToken();
+
       const response = await fetch(`${apiUrl}/graphql`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
+          Authorization: `Bearer ${idToken}`,
         },
         body: JSON.stringify({
-          query: `mutation($contentId: ID!, $authProviderId: String) {
-            bookmarkContent(contentId: $contentId, authProviderId: $authProviderId) {
+          query: `mutation($contentId: ID!) {
+            bookmarkContent(contentId: $contentId) {
               id
               isBookmarked
             }
           }`,
           variables: {
             contentId: contentId,
-            authProviderId,
           },
         }),
       });
@@ -217,8 +246,29 @@ async function toggleBookmark() {
   });
 }
 
+console.log("isDevelopment", isDevelopment);
+
+function signOutUser() {
+  console.log("signing out user now");
+
+  signOut(auth)
+    .then(() => {
+      console.log("User signed out successfully");
+      window.location.replace("./popup.html");
+    })
+    .catch((error) => {
+      console.error("Error signing out:", error);
+    });
+}
+
 document
   .getElementById("likeContent")
   .addEventListener("click", toggleBookmark);
 
+if (isDevelopment) {
+  document
+    .getElementById("signOutButton")
+    .addEventListener("click", signOutUser);
+}
+
 onAuthStateChanged(auth, handleAuthStateChange);

chrome-extension-mv3-firebase/src/popup/main.html

@@ -4,12 +4,15 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="./src/css/main.css" />
+    <title>Pickup Chrome Extension</title>
   </head>
 
   <body>
-    <title>Pickup Chrome Extension</title>
     <button id="likeContent" class="btn">Like Content</button>
     <p id="hint">Will appear on your profile</p>
     <div id="message"></div>
+    <div id="signOutContainer" style="display: none;">
+      <button id="signOutButton" class="btn btn__sign_out">Log Out</button>
+    </div>
   </body>
-</html>
+</html>

chrome-extension-mv3-firebase/src/popup/popup.html

@@ -11,9 +11,9 @@
     />
     <link rel="stylesheet" href="./src/css/popup.css" />
     <style>
-      .hidden {
+      /* .hidden {
         display: none;
-      }
+      } */
     </style>
   </head>
 

chrome-extension-mv3-firebase/src/popup/popup.js

@@ -17,7 +17,8 @@ function handleAuthStateChange(user) {
     window.location.replace("./main.html");
   } else {
     console.log("No user logged in");
-    checkForExistingToken();
+    // checkForExistingToken();
+    showLoginButton();
   }
 }
 
@@ -44,7 +45,7 @@ function checkForExistingToken() {
 function showLoginButton() {
   document.querySelector(".btn__google").style.display = "block";
   document.getElementById("loading").classList.add("hidden");
-  document.getElementById("main-content").classList.remove("hidden");
+  // document.getElementById("main-content").classList.remove("hidden");
 }
 
 function startGoogleSignIn() {

schema.graphql

@@ -179,7 +179,7 @@ type Mutation {
   bookmarkContent(authProviderId: String, contentId: ID!): ContentSession!
   clearQueue: String!
   createAuthor(imageUrl: String, name: String!): Author
-  createContentFromUrl(authProviderId: String, url: String!): Content!
+  createContentFromUrl(url: String!): Content!
   createUser(email: String!, name: String, password: String, referralCode: String, username: String): CreateUserResponse!
   deleteMe: String!
   followProfile(username: String!): String!
@@ -254,7 +254,7 @@ type Query {
   getFollows(username: String!): FollowersResponse!
   getFriends: [FriendProfile!]!
   getIntercomMobileToken(platform: String): String!
-  getIsBookmarked(authProviderId: String, url: String!): Boolean!
+  getIsBookmarked(url: String!): Boolean!
   getLikes(limit: Int, page: Int): [ContentSession!]!
   getMobileUpdate: GetMobileUpdateResponse!
   getNextContent(afterContentId: ID!, currentMs: Int): FeedItem

server/README.md

@@ -40,6 +40,8 @@ Run the following command from the root directory:
 docker compose -f deployments/pickup/docker-compose.yml up
 ```
 
+This will run the postgres server with pgvector extension AND the redis server.
+
 If you want to stop and remove the containers:
 
 ```console