From 11dd93451a535603e872fa31ddef1405032ac2e7 Mon Sep 17 00:00:00 2001
From: Surya Pratap Singh <77022877+suryapts007@users.noreply.github.com>
Date: Thu, 25 Jan 2024 05:52:19 +0530
Subject: [PATCH] feat: sign up with Google (#862)

This PR links to this issue: #791
Now users can see a new option to sign up with Google on the signup
page.
---
 .../src/app/(unauthenticated)/signup/page.tsx |  4 +-
 apps/web/src/components/forms/signup.tsx      | 43 ++++++++++++++++++-
 2 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/app/(unauthenticated)/signup/page.tsx b/apps/web/src/app/(unauthenticated)/signup/page.tsx
index 353716d9b..05b9caf21 100644
--- a/apps/web/src/app/(unauthenticated)/signup/page.tsx
+++ b/apps/web/src/app/(unauthenticated)/signup/page.tsx
@@ -1,6 +1,8 @@
 import Link from 'next/link';
 import { redirect } from 'next/navigation';
 
+import { IS_GOOGLE_SSO_ENABLED } from '@documenso/lib/constants/auth';
+
 import { SignUpForm } from '~/components/forms/signup';
 
 export default function SignUpPage() {
@@ -17,7 +19,7 @@ export default function SignUpPage() {
         signing is within your grasp.
       </p>
 
-      <SignUpForm className="mt-4" />
+      <SignUpForm className="mt-4" isGoogleSSOEnabled={IS_GOOGLE_SSO_ENABLED} />
 
       <p className="text-muted-foreground mt-6 text-center text-sm">
         Already have an account?{' '}
diff --git a/apps/web/src/components/forms/signup.tsx b/apps/web/src/components/forms/signup.tsx
index b91b4a9fd..3f2723ec8 100644
--- a/apps/web/src/components/forms/signup.tsx
+++ b/apps/web/src/components/forms/signup.tsx
@@ -3,6 +3,7 @@
 import { zodResolver } from '@hookform/resolvers/zod';
 import { signIn } from 'next-auth/react';
 import { useForm } from 'react-hook-form';
+import { FcGoogle } from 'react-icons/fc';
 import { z } from 'zod';
 
 import { useAnalytics } from '@documenso/lib/client-only/hooks/use-analytics';
@@ -23,6 +24,8 @@ import { PasswordInput } from '@documenso/ui/primitives/password-input';
 import { SignaturePad } from '@documenso/ui/primitives/signature-pad';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
+const SIGN_UP_REDIRECT_PATH = '/documents';
+
 export const ZSignUpFormSchema = z.object({
   name: z.string().trim().min(1, { message: 'Please enter a valid name.' }),
   email: z.string().email().min(1),
@@ -37,9 +40,10 @@ export type TSignUpFormSchema = z.infer<typeof ZSignUpFormSchema>;
 
 export type SignUpFormProps = {
   className?: string;
+  isGoogleSSOEnabled?: boolean;
 };
 
-export const SignUpForm = ({ className }: SignUpFormProps) => {
+export const SignUpForm = ({ className, isGoogleSSOEnabled }: SignUpFormProps) => {
   const { toast } = useToast();
   const analytics = useAnalytics();
 
@@ -64,7 +68,7 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
       await signIn('credentials', {
         email,
         password,
-        callbackUrl: '/',
+        callbackUrl: SIGN_UP_REDIRECT_PATH,
       });
 
       analytics.capture('App: User Sign Up', {
@@ -89,6 +93,19 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
     }
   };
 
+  const onSignUpWithGoogleClick = async () => {
+    try {
+      await signIn('google', { callbackUrl: SIGN_UP_REDIRECT_PATH });
+    } catch (err) {
+      toast({
+        title: 'An unknown error occurred',
+        description:
+          'We encountered an unknown error while attempting to sign you Up. Please try again later.',
+        variant: 'destructive',
+      });
+    }
+  };
+
   return (
     <Form {...form}>
       <form
@@ -166,6 +183,28 @@ export const SignUpForm = ({ className }: SignUpFormProps) => {
         >
           {isSubmitting ? 'Signing up...' : 'Sign Up'}
         </Button>
+
+        {isGoogleSSOEnabled && (
+          <>
+            <div className="relative flex items-center justify-center gap-x-4 py-2 text-xs uppercase">
+              <div className="bg-border h-px flex-1" />
+              <span className="text-muted-foreground bg-transparent">Or</span>
+              <div className="bg-border h-px flex-1" />
+            </div>
+
+            <Button
+              type="button"
+              size="lg"
+              variant={'outline'}
+              className="bg-background text-muted-foreground border"
+              disabled={isSubmitting}
+              onClick={onSignUpWithGoogleClick}
+            >
+              <FcGoogle className="mr-2 h-5 w-5" />
+              Sign Up with Google
+            </Button>
+          </>
+        )}
       </form>
     </Form>
   );