feat: new authentication (#1078)

New authentication system

WT-173 #done

packages/eslint-rules/lib/rules/no-custom-color.js

@@ -9,6 +9,7 @@ const alwaysValidClasses = [
   'text-xl',
   'text-ellipsis',
   'bg-none',
+  'bg-gradient-to-r',
 ];
 const findTargetClassNames = (classNames) => {
   if (!classNames) {

packages/extension/.env

@@ -1,9 +1,7 @@
-NEXT_PUBLIC_API_URL=http://localhost:4000
+NEXT_PUBLIC_API_URL=http://api.apps.local.app.garden
 #NEXT_PUBLIC_API_URL=https://api.daily.dev
-NEXT_PUBLIC_SUBS_URL=ws://localhost:5000/graphql
-NEXT_PUBLIC_DOMAIN=localhost
-NEXT_PUBLIC_GA=UA-109059578-2
-NEXT_PUBLIC_AMPLITUDE=46a18c8e538f37fbb74150e458b5c574
-NEXT_PUBLIC_FLAGSMITH=LZp89Rk56sytKH9AeHyCtF
+NEXT_PUBLIC_SUBS_URL=ws://api.apps.local.app.garden/graphql
+NEXT_PUBLIC_DOMAIN=apps.local.app.garden
 
-NEXT_PUBLIC_WEBAPP_URL=http://localhost:5002/
+NEXT_PUBLIC_AUTH_URL=http://sso.apps.local.app.garden
+NEXT_PUBLIC_WEBAPP_URL=http://apps.local.app.garden/

packages/extension/.env.production

@@ -6,3 +6,4 @@ NEXT_PUBLIC_AMPLITUDE=ee64cef405fb51cba273308cfcef7228
 NEXT_PUBLIC_FLAGSMITH=8gucquFbJSKT7kYDKpqZzp
 
 NEXT_PUBLIC_WEBAPP_URL=https://app.daily.dev/
+NEXT_PUBLIC_AUTH_URL=https://sso.daily.dev

packages/extension/src/background/index.ts

@@ -13,6 +13,7 @@ import { getOrGenerateDeviceId } from '@dailydotdev/shared/src/hooks/analytics/u
 import { getContentScriptPermissionAndRegister } from '../companion/useExtensionPermission';
 
 const excludedCompanionOrigins = [
+  'http://127.0.0.1:5002',
   'http://localhost',
   'http://app.daily.dev',
   'https://twitter.com',

packages/extension/src/companion/App.tsx

@@ -9,8 +9,9 @@ import { useRefreshToken } from '@dailydotdev/shared/src/hooks/useRefreshToken';
 import { AlertContextProvider } from '@dailydotdev/shared/src/contexts/AlertContext';
 import { AnalyticsContextProvider } from '@dailydotdev/shared/src/contexts/AnalyticsContext';
 import Toast from '@dailydotdev/shared/src/components/notifications/Toast';
-import { apiUrl } from '@dailydotdev/shared/src/lib/config';
 import { RouterContext } from 'next/dist/shared/lib/router-context';
+import useWindowEvents from '@dailydotdev/shared/src/hooks/useWindowEvents';
+import { AuthEvent } from '@dailydotdev/shared/src/lib/kratos';
 import Companion from './Companion';
 import CustomRouter from '../lib/CustomRouter';
 import { companionFetch } from './companionFetch';
@@ -54,17 +55,21 @@ export default function App({
   }
 
   const memoizedFlags = useMemo(() => flags, [flags]);
-  const refetchData = () =>
-    companionFetch(`${apiUrl}/boot`, {
-      headers: { requestKey: refreshTokenKey },
-    });
+  const refetchData = async () =>
+    browser.runtime.sendMessage({ type: 'CONTENT_LOADED' });
 
   useRefreshToken(token, refetchData);
   useBackgroundRequest(refreshTokenKey, {
     queryClient,
     callback: ({ res }) => setToken(res.accessToken),
   });
 
+  useWindowEvents('message', AuthEvent.Login, async (e) => {
+    if (e.data?.eventKey === AuthEvent.Login) {
+      await refetchData();
+    }
+  });
+
   return (
     <div>
       <style>

packages/extension/src/companion/Companion.tsx

@@ -1,7 +1,6 @@
 import React, {
   ReactElement,
   ReactNode,
-  useContext,
   useEffect,
   useRef,
   useState,
@@ -14,13 +13,10 @@ import { isTesting } from '@dailydotdev/shared/src/lib/constants';
 import { REQUEST_PROTOCOL_KEY } from '@dailydotdev/shared/src/graphql/common';
 import '@dailydotdev/shared/src/styles/globals.css';
 import { PostBootData } from '@dailydotdev/shared/src/lib/boot';
-import LoginModal from '@dailydotdev/shared/src/components/modals/LoginModal';
-import AuthContext from '@dailydotdev/shared/src/contexts/AuthContext';
 import useTrackPageView from '@dailydotdev/shared/src/hooks/analytics/useTrackPageView';
 import useDebounce from '@dailydotdev/shared/src/hooks/useDebounce';
 import CompanionMenu from './CompanionMenu';
 import CompanionContent from './CompanionContent';
-import { getCompanionWrapper } from './common';
 import { companionRequest } from './companionRequest';
 import { companionFetch } from './companionFetch';
 
@@ -74,8 +70,6 @@ export default function Companion({
   const [post, setPost] = useState<PostBootData>(postData);
   const [companionState, setCompanionState] =
     useState<boolean>(companionExpanded);
-  const { user, closeLogin, loadingUser, shouldShowLogin, loginState } =
-    useContext(AuthContext);
   useQuery(REQUEST_PROTOCOL_KEY, () => ({
     requestMethod: companionRequest,
     fetchMethod: companionFetch,
@@ -113,16 +107,6 @@ export default function Companion({
       companionExpanded={companionState}
       shouldLoad={assetsLoaded}
     >
-      {!user && !loadingUser && shouldShowLogin && (
-        <LoginModal
-          parentSelector={getCompanionWrapper}
-          isOpen
-          onRequestClose={closeLogin}
-          contentLabel="Login Modal"
-          {...loginState}
-        />
-      )}
-
       <CompanionMenu
         post={post}
         companionHelper={companionHelper}

packages/extension/src/companion/CompanionMenu.tsx

@@ -56,7 +56,7 @@ export default function CompanionMenu({
   onOpenComments,
 }: CompanionMenuProps): ReactElement {
   const { trackEvent } = useContext(AnalyticsContext);
-  const { user, showLogin } = useContext(AuthContext);
+  const { user } = useContext(AuthContext);
   const { additionalInteractionButtonFeature } = useContext(FeaturesContext);
   const [showCompanionHelper, setShowCompanionHelper] = usePersistentContext(
     'companion_helper',
@@ -136,9 +136,12 @@ export default function CompanionMenu({
       } else {
         await removeUpvote({ id: post.id });
       }
+    } else {
+      window.open(
+        `${process.env.NEXT_PUBLIC_WEBAPP_URL}signup?close=true`,
+        '_blank',
+      );
     }
-
-    showLogin('companion');
   };
 
   const toggleBookmark = async () => {
@@ -148,8 +151,12 @@ export default function CompanionMenu({
       } else {
         await removeBookmark({ id: post.id });
       }
+    } else {
+      window.open(
+        `${process.env.NEXT_PUBLIC_WEBAPP_URL}signup?close=true`,
+        '_blank',
+      );
     }
-    showLogin('companion');
   };
 
   const { show: showCompanionOptionsMenu } = useContextMenu({

packages/extension/src/manifest.json

@@ -16,7 +16,7 @@
     "https://dailynow.co/",
     "https://*.dailynow.co/"
   ],
-  "__dev__permissions": ["storage", "http://localhost/"],
+  "__dev__permissions": ["storage", "http://localhost/", "http://*.app.garden/"],
   "optional_permissions": ["topSites", "*://*/*"],
   "content_security_policy": "script-src 'self' https://www.google-analytics.com; object-src 'self'",
   "__firefox__content_security_policy": "object-src 'self'",

packages/extension/src/newtab/App.tsx

@@ -34,10 +34,10 @@ const AnalyticsConsentModal = dynamic(() => import('./AnalyticsConsentModal'));
 
 const router = new CustomRouter();
 const queryClient = new QueryClient();
-const LoginModal = dynamic(
+const AuthModal = dynamic(
   () =>
     import(
-      /* webpackChunkName: "loginModal" */ '@dailydotdev/shared/src/components/modals/LoginModal'
+      /* webpackChunkName: "authModal" */ '@dailydotdev/shared/src/components/auth/AuthModal'
     ),
 );
 
@@ -53,14 +53,7 @@ function InternalApp({
 }: {
   pageRef: MutableRefObject<string>;
 }): ReactElement {
-  const {
-    user,
-    tokenRefreshed,
-    closeLogin,
-    loadingUser,
-    shouldShowLogin,
-    loginState,
-  } = useContext(AuthContext);
+  const { closeLogin, shouldShowLogin, loginState } = useContext(AuthContext);
   const { contentScriptGranted } = useExtensionPermission({
     origin: 'on extension load',
   });
@@ -71,16 +64,6 @@ function InternalApp({
   );
   const routeChangedCallbackRef = useTrackPageView();
 
-  useEffect(() => {
-    if (tokenRefreshed && user && !user.infoConfirmed) {
-      window.location.replace(
-        `${process.env.NEXT_PUBLIC_WEBAPP_URL}register?redirect_uri=${encodeURI(
-          browser.runtime.getURL('index.html'),
-        )}`,
-      );
-    }
-  }, [user, loadingUser, tokenRefreshed]);
-
   useEffect(() => {
     if (routeChangedCallbackRef.current) {
       routeChangedCallbackRef.current();
@@ -105,8 +88,8 @@ function InternalApp({
   return (
     <DndContextProvider>
       <MainFeedPage onPageChanged={onPageChanged} />
-      {!user && !loadingUser && shouldShowLogin && (
-        <LoginModal
+      {shouldShowLogin && (
+        <AuthModal
           isOpen={shouldShowLogin}
           onRequestClose={closeLogin}
           contentLabel="Login Modal"

packages/extension/src/newtab/DndModal.tsx

@@ -76,7 +76,7 @@ export default function DndModal({
         {dndTime !== 'CUSTOM' ? null : (
           <div className="grid grid-cols-2 gap-4 mt-4">
             <TextField
-              className="w-40"
+              className={{ container: 'w-40' }}
               inputId="defaultURL"
               label="Number"
               type="number"

packages/extension/webpack.config.js

@@ -12,6 +12,7 @@ const WextManifestWebpackPlugin = require('wext-manifest-webpack-plugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const Dotenv = require('dotenv-webpack');
+const { version } = require('./package.json');
 
 const viewsPath = path.join(__dirname, 'views');
 const sourcePath = path.join(__dirname, 'src');
@@ -68,6 +69,7 @@ module.exports = {
   },
 
   output: {
+    publicPath: '',
     path: path.join(destPath, targetBrowser),
     filename: 'js/[name].bundle.js',
   },
@@ -160,6 +162,9 @@ module.exports = {
       path:
         process.env.NODE_ENV === 'production' ? './.env.production' : './.env',
     }),
+    new webpack.DefinePlugin({
+      'process.env.CURRENT_VERSION': `'${version}'`,
+    }),
     // delete previous build files
     new CleanWebpackPlugin({
       cleanOnceBeforeBuildPatterns: [