Skip to content

Commit

Permalink
[web] - extend oauth (#628)
Browse files Browse the repository at this point in the history 
* [web] - add oauth providers

* [web] - oauth add more providers

* [web] - oauth add google
  • Loading branch information
Roman Matusevich authored Nov 14, 2023
1 parent c628829 commit c05c224
Show file tree
Hide file tree
Showing 5 changed files with 126 additions and 35 deletions.
2 changes: 1 addition & 1 deletion web/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
10 changes: 7 additions & 3 deletions web/src/supabase.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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,
},
})
Expand All @@ -33,7 +37,7 @@ export const supabase = {
provider,
options: {
redirectTo: redirectTo || document.location.href,
scopes,
scopes: scopes[provider],
},
})
if (error) {
Expand Down
61 changes: 38 additions & 23 deletions web/src/v6.1.0/pages/Signup/components/CompleteForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -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)
Expand All @@ -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>
Expand All @@ -70,7 +85,7 @@ const CompleteForm = () => {
disabled={isSubmitting || isAnySubmitting}
isLoading={isSubmitting}
>
No, thanks
{is_github ? 'No, thanks' : 'Create DAO and complete'}
</Button>
</Form>
)}
Expand Down
45 changes: 41 additions & 4 deletions web/src/v6.1.0/pages/Signup/components/OAuthForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
Expand All @@ -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>
Expand Down
43 changes: 39 additions & 4 deletions web/src/v6.1.0/pages/Signup/components/UsernameForm.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,21 @@
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
username: string
}

const UsernameForm = () => {
const { oauth } = useOauth()
const { oauth, signout } = useOauth()
const { data, submitUsernameStep } = useUserSignup()
const [metadata, setMetadata] = useState<any>()

const onFormSubmit = async (values: TFormValues) => {
try {
Expand All @@ -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">
Expand Down

0 comments on commit c05c224

Please sign in to comment.