From c05c2244e0af7712ac9c0b258177810cf787bdd0 Mon Sep 17 00:00:00 2001
From: Roman Matusevich <rymka1989@gmail.com>
Date: Tue, 14 Nov 2023 23:04:49 +0300
Subject: [PATCH] [web] - extend oauth (#628)

* [web] - add oauth providers

* [web] - oauth add more providers

* [web] - oauth add google
---
 web/package.json                              |  2 +-
 web/src/supabase.ts                           | 10 ++-
 .../pages/Signup/components/CompleteForm.tsx  | 61 ++++++++++++-------
 .../pages/Signup/components/OAuthForm.tsx     | 45 ++++++++++++--
 .../pages/Signup/components/UsernameForm.tsx  | 43 +++++++++++--
 5 files changed, 126 insertions(+), 35 deletions(-)

diff --git a/web/package.json b/web/package.json
index d3dfaf4a2..8d020b3c0 100644
--- a/web/package.json
+++ b/web/package.json
@@ -54,7 +54,7 @@
         "@mui/material": "^5.9.1",
         "@mui/utils": "^5.11.13",
         "@octokit/core": "^4.1.0",
-        "@supabase/supabase-js": "^2.31.0",
+        "@supabase/supabase-js": "^2.38.4",
         "@wysimark/react": "^2.2.15",
         "apexcharts": "^3.37.0",
         "buffer": "^6.0.3",
diff --git a/web/src/supabase.ts b/web/src/supabase.ts
index ee1e91bdf..80f3269be 100644
--- a/web/src/supabase.ts
+++ b/web/src/supabase.ts
@@ -5,7 +5,11 @@ import { GoshError } from './errors'
 export const supabase = {
     client: AppConfig.supabase,
     singinOAuth: async (provider: Provider, options?: { redirectTo?: string }) => {
-        const scopes = 'read:user read:org'
+        const scopes: { [key: string]: string } = {
+            github: 'read:user read:org',
+            google: 'https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile',
+            linkedin_oidc: '',
+        }
         const { redirectTo } = options || {}
 
         if (AppConfig.dockerclient) {
@@ -17,7 +21,7 @@ export const supabase = {
                     redirectTo:
                         redirectTo ||
                         `https://open.docker.com/dashboard/extension-tab?extensionId=teamgosh/docker-extension&nounce=${nounce}`,
-                    scopes,
+                    scopes: scopes[provider],
                     skipBrowserRedirect: true,
                 },
             })
@@ -33,7 +37,7 @@ export const supabase = {
                 provider,
                 options: {
                     redirectTo: redirectTo || document.location.href,
-                    scopes,
+                    scopes: scopes[provider],
                 },
             })
             if (error) {
diff --git a/web/src/v6.1.0/pages/Signup/components/CompleteForm.tsx b/web/src/v6.1.0/pages/Signup/components/CompleteForm.tsx
index c87d3fb35..85ec7ee45 100644
--- a/web/src/v6.1.0/pages/Signup/components/CompleteForm.tsx
+++ b/web/src/v6.1.0/pages/Signup/components/CompleteForm.tsx
@@ -1,14 +1,21 @@
 import { Form, Formik } from 'formik'
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 import { Button } from '../../../../components/Form'
+import { useOauth } from '../../../hooks/oauth.hooks'
 import { useUserSignup } from '../../../hooks/user.hooks'
-import { useNavigate } from 'react-router-dom'
-import { useState } from 'react'
 
 const CompleteForm = () => {
     const navigate = useNavigate()
+    const { oauth } = useOauth()
     const { submitCompleteStep } = useUserSignup()
     const [isAnySubmitting, setIsAnySubmitting] = useState<boolean>(false)
 
+    const is_github =
+        oauth.session?.user.identities?.find(({ id }) => {
+            return id === oauth.session?.user.user_metadata.provider_id
+        })?.provider === 'github'
+
     const onGithubSubmit = async () => {
         try {
             setIsAnySubmitting(true)
@@ -35,30 +42,38 @@ const CompleteForm = () => {
     return (
         <div className="max-w-lg mx-auto">
             <div className="w-32 mx-auto">
-                <img src="/images/github.webp" alt="Github" />
+                <img
+                    src={is_github ? '/images/github.webp' : '/images/success-green.webp'}
+                    alt="Almost there"
+                />
             </div>
             <div className="mt-7 text-3xl font-medium leading-10 text-center">
-                Do you want to upload your repository from GitHub
+                {is_github
+                    ? 'Do you want to upload your repository from GitHub'
+                    : 'Almost there'}
             </div>
-            <div className="mt-10 w-full max-w-xs mx-auto">
+            <div className="mt-10 w-full max-w-xs mx-auto flex flex-col gap-y-4">
+                {is_github && (
+                    <div>
+                        <Formik initialValues={{}} onSubmit={onGithubSubmit}>
+                            {({ isSubmitting }) => (
+                                <Form>
+                                    <Button
+                                        type="submit"
+                                        size="xl"
+                                        className="w-full"
+                                        disabled={isSubmitting || isAnySubmitting}
+                                        isLoading={isSubmitting}
+                                    >
+                                        Upload repository from GitHub
+                                    </Button>
+                                </Form>
+                            )}
+                        </Formik>
+                    </div>
+                )}
+
                 <div>
-                    <Formik initialValues={{}} onSubmit={onGithubSubmit}>
-                        {({ isSubmitting }) => (
-                            <Form>
-                                <Button
-                                    type="submit"
-                                    size="xl"
-                                    className="w-full"
-                                    disabled={isSubmitting || isAnySubmitting}
-                                    isLoading={isSubmitting}
-                                >
-                                    Upload repository from GitHub
-                                </Button>
-                            </Form>
-                        )}
-                    </Formik>
-                </div>
-                <div className="mt-4">
                     <Formik initialValues={{}} onSubmit={onSkipSubmit}>
                         {({ isSubmitting }) => (
                             <Form>
@@ -70,7 +85,7 @@ const CompleteForm = () => {
                                     disabled={isSubmitting || isAnySubmitting}
                                     isLoading={isSubmitting}
                                 >
-                                    No, thanks
+                                    {is_github ? 'No, thanks' : 'Create DAO and complete'}
                                 </Button>
                             </Form>
                         )}
diff --git a/web/src/v6.1.0/pages/Signup/components/OAuthForm.tsx b/web/src/v6.1.0/pages/Signup/components/OAuthForm.tsx
index 40dc37a62..d0933c50d 100644
--- a/web/src/v6.1.0/pages/Signup/components/OAuthForm.tsx
+++ b/web/src/v6.1.0/pages/Signup/components/OAuthForm.tsx
@@ -1,11 +1,14 @@
+import { faGithub, faGoogle } from '@fortawesome/free-brands-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { Provider } from '@supabase/supabase-js'
 import { Button } from '../../../../components/Form'
 import { useOauth } from '../../../hooks/oauth.hooks'
 
 const OAuthForm = () => {
     const { oauth, signin } = useOauth()
 
-    const onOAuthSigninClick = async () => {
-        signin('github', { redirectTo: `${document.location.origin}/a/signup` })
+    const onOAuthSigninClick = async (provider: Provider) => {
+        signin(provider, { redirectTo: `${document.location.origin}/a/signup` })
     }
 
     return (
@@ -19,17 +22,51 @@ const OAuthForm = () => {
                 <div className="border border-gray-e6edff rounded-xl p-8">
                     <h2 className="text-lg text-center mb-6">Sign in with</h2>
 
-                    <div>
+                    <div className="flex flex-col gap-y-4">
                         <Button
                             type="button"
                             size="xl"
+                            variant="outline-secondary"
                             className="w-full"
                             disabled={oauth.isLoading || !!oauth.session}
                             isLoading={oauth.isLoading || !!oauth.session}
-                            onClick={onOAuthSigninClick}
+                            onClick={() => onOAuthSigninClick('github')}
                         >
+                            <FontAwesomeIcon
+                                icon={faGithub}
+                                fixedWidth
+                                size="lg"
+                                className="mr-2"
+                            />
                             Sign in with GitHub
                         </Button>
+                        <Button
+                            type="button"
+                            size="xl"
+                            variant="outline-secondary"
+                            className="w-full"
+                            disabled={oauth.isLoading || !!oauth.session}
+                            isLoading={oauth.isLoading || !!oauth.session}
+                            onClick={() => onOAuthSigninClick('google')}
+                        >
+                            <FontAwesomeIcon
+                                icon={faGoogle}
+                                fixedWidth
+                                size="lg"
+                                className="mr-2"
+                            />
+                            Sign in with Google
+                        </Button>
+                        {/* <Button
+                            type="button"
+                            size="xl"
+                            className="w-full"
+                            disabled={oauth.isLoading || !!oauth.session}
+                            isLoading={oauth.isLoading || !!oauth.session}
+                            onClick={() => onOAuthSigninClick('linkedin_oidc')}
+                        >
+                            Sign in with LinkedIn
+                        </Button> */}
                     </div>
                 </div>
             </div>
diff --git a/web/src/v6.1.0/pages/Signup/components/UsernameForm.tsx b/web/src/v6.1.0/pages/Signup/components/UsernameForm.tsx
index 92027b182..015a55a5e 100644
--- a/web/src/v6.1.0/pages/Signup/components/UsernameForm.tsx
+++ b/web/src/v6.1.0/pages/Signup/components/UsernameForm.tsx
@@ -1,10 +1,11 @@
 import { Field, Form, Formik } from 'formik'
-import yup from '../../../yup-extended'
-import { FormikInput } from '../../../../components/Formik'
+import { useCallback, useEffect, useState } from 'react'
 import Alert from '../../../../components/Alert'
 import { Button } from '../../../../components/Form'
-import { useUserSignup } from '../../../hooks/user.hooks'
+import { FormikInput } from '../../../../components/Formik'
 import { useOauth } from '../../../hooks/oauth.hooks'
+import { useUserSignup } from '../../../hooks/user.hooks'
+import yup from '../../../yup-extended'
 
 type TFormValues = {
     email: string
@@ -12,8 +13,9 @@ type TFormValues = {
 }
 
 const UsernameForm = () => {
-    const { oauth } = useOauth()
+    const { oauth, signout } = useOauth()
     const { data, submitUsernameStep } = useUserSignup()
+    const [metadata, setMetadata] = useState<any>()
 
     const onFormSubmit = async (values: TFormValues) => {
         try {
@@ -23,11 +25,44 @@ const UsernameForm = () => {
         }
     }
 
+    const getOAuthMetadata = useCallback(() => {
+        if (!oauth.session) {
+            return
+        }
+
+        const metadata = oauth.session.user.user_metadata
+        const identity = oauth.session.user.identities?.find(({ id }) => {
+            return id === metadata.provider_id
+        })
+        setMetadata({ ...metadata, identity })
+    }, [])
+
+    useEffect(() => {
+        getOAuthMetadata()
+    }, [getOAuthMetadata])
+
     return (
         <div className="flex flex-wrap items-center justify-center gap-14">
             <div className="basis-full lg:basis-4/12 text-center lg:text-start">
                 <div className="mb-4 text-3xl font-medium">Welcome to Gosh</div>
                 <div className="text-gray-53596d">Choose a short Nickname and Email</div>
+
+                {!!metadata && (
+                    <div className="mt-6 bg-gray-fafafd border border-gray-e6edff rounded-lg p-4">
+                        <h3 className="mb-2">OAuth session</h3>
+                        <div className="text-sm">
+                            {metadata.name}{' '}
+                            <span className="text-gray-7c8db5 text-xs">
+                                via {metadata.identity.provider}
+                            </span>
+                        </div>
+                        <div className="mt-3 text-center">
+                            <Button size="sm" onClick={signout}>
+                                Sign out OAuth
+                            </Button>
+                        </div>
+                    </div>
+                )}
             </div>
 
             <div className="basis-full md:basis-8/12 lg:basis-5/12 xl:basis-4/12">