Implement authentication with SIWE (#99)

* Create web3 modal provider with SIWE

* Add auth router to handle SIWE authentication

* Use axios instance to make request

* Add button for SIWE authentication

* Add changes to access session in web-app GQL requests

* Add auth check in GQL context and load/create user

* Use authenticated user from context

* Redirect to sign in page if unauthenticated and logout button

* Change sign-in route to login

* Get project domain from config file

* Set user ethAddress column as unique

* Use formatted user name

* Get session secret and origin url from config file

* Add unique constraint for eth address

* Get secure and samesite from origin url

* Get wallet connect id and backend url from env file

* Format user email in member tab panel

* Add backend config isProduction to set trust proxy

* Use only one server url config

* Add tool tip for displaying email

* Add trustProxy and domain in server.session config

* Add SERVER_GQL_PATH constant in frontend

---------

Co-authored-by: neeraj <neeraj.rtly@gmail.com>

packages/frontend/src/pages/Login.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const Login = () => {
+  return (
+    <div className="grid grid-cols-5 h-screen bg-light-blue-50 py-10">
+      <div className="col-span-2"></div>
+      <div className="col-span-1">
+        <w3m-button />
+      </div>
+    </div>
+  );
+};
+
+export default Login;

packages/frontend/src/pages/OrgSlug.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Outlet } from 'react-router-dom';
 
 import Sidebar from '../components/Sidebar';
+import { OctokitProvider } from '../context/OctokitContext';
 
 const OrgSlug = () => {
   return (
@@ -12,7 +13,9 @@ const OrgSlug = () => {
         </div>
         <div className="col-span-4 h-full p-3 overflow-y-hidden">
           <div className="bg-white rounded-3xl h-full overflow-y-auto">
-            <Outlet />
+            <OctokitProvider>
+              <Outlet />
+            </OctokitProvider>
           </div>
         </div>
       </>

packages/frontend/src/pages/org-slug/projects/id/Overview.tsx

@@ -10,6 +10,7 @@ import { relativeTimeMs } from '../../../../utils/time';
 import { useOctokit } from '../../../../context/OctokitContext';
 import { GitCommitWithBranch, OutletContextType } from '../../../../types';
 import { useGQLClient } from '../../../../context/GQLClientContext';
+import { formatAddress } from '../../../../utils/format';
 
 const COMMITS_PER_PAGE = 4;
 
@@ -122,9 +123,9 @@ const OverviewTabPanel = () => {
               color="green"
             />
           ) : (
-            <div className="flex justify-between items-center w-full m-2">
+            <div className="flex items-center">
               <Chip
-                className="normal-case inline font-normal"
+                className="normal-case inline font-normal mx-2"
                 size="sm"
                 value="Not connected"
                 icon="^"
@@ -157,7 +158,7 @@ const OverviewTabPanel = () => {
               <p>^ Created</p>
               <p>
                 {relativeTimeMs(project.deployments[0].createdAt)} by ^{' '}
-                {project.deployments[0].createdBy.name}
+                {formatAddress(project.deployments[0].createdBy.name ?? '')}
               </p>
             </div>
           </>