From 01ee16b99bf66684f8fa110f5060502ff21026cf Mon Sep 17 00:00:00 2001
From: Kang Ming <kang.ming1996@gmail.com>
Date: Mon, 6 Dec 2021 21:01:58 +0800
Subject: [PATCH] fix: use gotrue on client if enabled

---
 studio/components/interfaces/Home/Landing.tsx | 33 ++++++++++++++++---
 .../layouts/AccountLayout/AccountLayout.tsx   | 32 ++++++++++++++----
 2 files changed, 54 insertions(+), 11 deletions(-)

diff --git a/studio/components/interfaces/Home/Landing.tsx b/studio/components/interfaces/Home/Landing.tsx
index cc6142e7b76..d22ee1371c7 100644
--- a/studio/components/interfaces/Home/Landing.tsx
+++ b/studio/components/interfaces/Home/Landing.tsx
@@ -2,15 +2,32 @@ import Image from 'next/image'
 import Link from 'next/link'
 import Head from 'next/head'
 import { observer } from 'mobx-react-lite'
-import { Button, Typography } from '@supabase/ui'
+import { Button, IconGitHub, Typography } from '@supabase/ui'
 
 import { API_URL } from 'lib/constants'
 import { useStore } from 'hooks'
+import { auth, GOTRUE_ENABLED } from 'lib/gotrue'
 
 const Landing = () => {
   const { ui } = useStore()
   const { theme } = ui
 
+  async function handleGithubSignIn() {
+    try {
+      const { user, session, error } = await auth.signIn(
+        { 
+          provider: 'github',
+        },
+        {
+          redirectTo: process.env.NEXT_PUBLIC_SITE_URL,
+        }
+      )
+      if (error) throw error
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
   return (
     <div className="z-10 relative h-screen flex flex-col">
       <Head>
@@ -38,7 +55,10 @@ const Landing = () => {
               type="success"
               className="ml-8 font-medium hover:text-gray-300 focus:outline-none focus:text-gray-300 transition duration-150 ease-in-out"
             >
-              <Link href={`${API_URL}/login`}>Sign In</Link>
+              {GOTRUE_ENABLED ? 
+                <Button onClick= {handleGithubSignIn} icon={<IconGitHub />}>Sign In With Github</Button>
+                : <Link href={`${API_URL}/login`}>Sign In</Link>
+              }
             </Typography.Text>
           </div>
         </nav>
@@ -55,9 +75,12 @@ const Landing = () => {
             </p>
           </Typography.Text>
           <div className="mt-5 sm:mt-8 sm:flex sm:justify-center space-x-3">
-            <Link href={`${API_URL}/login`}>
-              <Button size="large">Sign In</Button>
-            </Link>
+            {GOTRUE_ENABLED ? 
+              <Button onClick= {handleGithubSignIn} size="large" icon={<IconGitHub />}>Sign In With Github</Button>
+              : <Link href={`${API_URL}/login`}>
+                  <Button size="large">Sign In</Button>
+                </Link>
+            }
             <Link href="https://supabase.com/docs">
               <Button size="large" type="default">
                 Docs
diff --git a/studio/components/layouts/AccountLayout/AccountLayout.tsx b/studio/components/layouts/AccountLayout/AccountLayout.tsx
index e6cd2c1d28d..0db1a72688a 100644
--- a/studio/components/layouts/AccountLayout/AccountLayout.tsx
+++ b/studio/components/layouts/AccountLayout/AccountLayout.tsx
@@ -5,6 +5,7 @@ import { observer } from 'mobx-react-lite'
 import { API_URL, IS_PLATFORM } from 'lib/constants'
 import { useStore } from 'hooks'
 import WithSidebar from './WithSidebar'
+import { auth, GOTRUE_ENABLED } from 'lib/gotrue'
 
 /**
  * layout for dashboard homepage, account and org settings
@@ -19,6 +20,30 @@ const AccountLayout = ({ children, title, breadcrumbs }: any) => {
 
   const { app, ui } = useStore()
 
+  const onClickLogout = async () => {
+    await auth.signOut()
+    router.reload()
+  }
+
+  let logoutLink =
+    GOTRUE_ENABLED
+      ? {
+          icon: '/icons/feather/power.svg',
+          label: 'Logout',
+          href:
+            GOTRUE_ENABLED
+              ? ''
+              : `${API_URL}/logout`,
+          key: `${API_URL}/logout`,
+          onClick: onClickLogout,
+        }
+      : {
+          icon: '/icons/feather/power.svg',
+          label: 'Logout',
+          href: `${API_URL}/logout`,
+          key: `${API_URL}/logout`,
+        }
+
   const organizationsLinks = app.organizations
     .list()
     .map((x: any) => ({
@@ -61,12 +86,7 @@ const AccountLayout = ({ children, title, breadcrumbs }: any) => {
                 href: `/account/me`,
                 key: `/account/me`,
               },
-              {
-                icon: '/img/power.svg',
-                label: 'Logout',
-                href: `${API_URL}/logout`,
-                key: `${API_URL}/logout`,
-              },
+              logoutLink,
             ],
           },
         ]