initial setup for google signin signup integration

frontend/package-lock.json

@@ -51,6 +51,7 @@
         "infisical-node": "^1.0.37",
         "jspdf": "^2.5.1",
         "jsrp": "^0.2.4",
+        "jwt-decode": "^3.1.2",
         "markdown-it": "^13.0.1",
         "next": "^12.3.4",
         "next-i18next": "^13.0.2",
@@ -15007,6 +15008,11 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/jwt-decode": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
+      "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
+    },
     "node_modules/keygrip": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/keygrip/-/keygrip-1.1.0.tgz",
@@ -33554,6 +33560,11 @@
         "object.assign": "^4.1.3"
       }
     },
+    "jwt-decode": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
+      "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
+    },
     "keygrip": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/keygrip/-/keygrip-1.1.0.tgz",

frontend/package.json

@@ -58,6 +58,7 @@
     "infisical-node": "^1.0.37",
     "jspdf": "^2.5.1",
     "jsrp": "^0.2.4",
+    "jwt-decode": "^3.1.2",
     "markdown-it": "^13.0.1",
     "next": "^12.3.4",
     "next-i18next": "^13.0.2",

frontend/src/components/utilities/SecurityClient.ts

@@ -4,8 +4,20 @@ import {
   setMfaTempToken,
   setSignupTempToken} from '@app/reactQuery';
 
+
+export const PROVIDER_AUTH_TOKEN_KEY = 'infisical__provider-auth-token';
+
 // depreciated: go for apiRequest module in config/api
 export default class SecurityClient {
+
+  static setProviderAuthToken(tokenStr: string) {
+    localStorage.setItem(PROVIDER_AUTH_TOKEN_KEY, tokenStr)
+  }
+
+  static getProviderAuthToken() {
+    return localStorage.getItem(PROVIDER_AUTH_TOKEN_KEY);
+  }
+
   static setSignupToken(tokenStr: string) {
     setSignupTempToken(tokenStr);
   }

frontend/src/config/request.ts

@@ -1,5 +1,6 @@
 import axios from 'axios';
 
+import SecurityClient from '@app/components/utilities/SecurityClient';
 import {
   getAuthToken,
   getMfaTempToken,
@@ -16,6 +17,7 @@ apiRequest.interceptors.request.use((config) => {
   const signupTempToken = getSignupTempToken();
   const mfaTempToken = getMfaTempToken();
   const token = getAuthToken();
+  const providerAuthToken = SecurityClient.getProviderAuthToken();
   
   if (signupTempToken && config.headers) {
     // eslint-disable-next-line no-param-reassign
@@ -26,6 +28,9 @@ apiRequest.interceptors.request.use((config) => {
   } else if (token && config.headers) {
     // eslint-disable-next-line no-param-reassign
     config.headers.Authorization = `Bearer ${token}`;
+  } else if(providerAuthToken && config.headers) {
+    // eslint-disable-next-line no-param-reassign
+    config.headers.Authorization = `Bearer ${providerAuthToken}`;
   }
   return config;
 });

frontend/src/const.ts

@@ -16,7 +16,8 @@ export const publicPaths = [
   `/terms`,
   `/subprocessors`,
   `/verify-email`,
-  `/password-reset`
+  `/password-reset`,
+  `/login/provider/success`
 ];
 
 export const languageMap = {

frontend/src/hooks/useProviderAuth.ts

@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react';
+import jwt_decode from 'jwt-decode';
+
+import SecurityClient, { PROVIDER_AUTH_TOKEN_KEY } from '@app/components/utilities/SecurityClient';
+
+export const useProviderAuth = () => {
+    const [email, setEmail] = useState<string>('');
+    const [userId, setUserId] = useState<string>('');
+    const [providerAuthToken, setProviderAuthToken] = useState<string>(
+        SecurityClient.getProviderAuthToken() || ''
+    );
+
+    useEffect(() => {
+        const handleStorageChange = (event: StorageEvent) => {
+            if (event.storageArea === localStorage && event.key === PROVIDER_AUTH_TOKEN_KEY) {
+                if (event.newValue) {
+                    const token = event.newValue;
+                    const { userId: resultUserId, email: resultEmail } = jwt_decode(token) as any;
+
+                    setProviderAuthToken(token);
+                    setEmail(resultEmail);
+                    setUserId(resultUserId);
+                } else {
+                    setProviderAuthToken('');
+                    setEmail('');
+                    setUserId('');
+                }
+                setProviderAuthToken(event.newValue || '');
+            }
+        };
+
+        window.addEventListener('storage', handleStorageChange);
+
+        return () => {
+            window.removeEventListener('storage', handleStorageChange);
+        };
+    });
+
+    return {
+        email,
+        providerAuthToken,
+        userId,
+        setProviderAuthToken,
+        setEmail,
+        setUserId,
+    };
+};

frontend/src/pages/login/provider/success.tsx

@@ -0,0 +1,16 @@
+import { useEffect } from "react";
+import { useRouter } from "next/router"
+
+import SecurityClient from '@app/components/utilities/SecurityClient';
+
+export default function LoginProviderSuccess() {
+    const router = useRouter();
+
+    useEffect(() => {
+        const { token } = router.query;
+        SecurityClient.setProviderAuthToken(token as string);
+        window.close();
+    }, [])
+
+    return <div />
+}

frontend/src/pages/signup.tsx

@@ -30,9 +30,7 @@ export default function SignUp() {
   const [codeError, setCodeError] = useState(false);
   const [step, setStep] = useState(1);
   const router = useRouter();
-  const {data: serverDetails } = useFetchServerStatus()
-
-
+  const { data: serverDetails } = useFetchServerStatus();
   const { t } = useTranslation();
 
   useEffect(() => {