fix: add conditional rendering of OAuth providers (#736)

Now google OAuth provider is not rendered if client id is not provided
This commit is contained in:
Anurag Sharma
2024-01-23 11:38:48 +05:30
committed by GitHub
parent e63122a718
commit 6aed075c56
3 changed files with 30 additions and 18 deletions

View File

@ -1,5 +1,7 @@
import Link from 'next/link'; import Link from 'next/link';
import { IS_GOOGLE_SSO_ENABLED } from '@documenso/lib/constants/auth';
import { SignInForm } from '~/components/forms/signin'; import { SignInForm } from '~/components/forms/signin';
export default function SignInPage() { export default function SignInPage() {
@ -11,7 +13,7 @@ export default function SignInPage() {
Welcome back, we are lucky to have you. Welcome back, we are lucky to have you.
</p> </p>
<SignInForm className="mt-4" /> <SignInForm className="mt-4" isGoogleSSOEnabled={IS_GOOGLE_SSO_ENABLED} />
{process.env.NEXT_PUBLIC_DISABLE_SIGNUP !== 'true' && ( {process.env.NEXT_PUBLIC_DISABLE_SIGNUP !== 'true' && (
<p className="text-muted-foreground mt-6 text-center text-sm"> <p className="text-muted-foreground mt-6 text-center text-sm">

View File

@ -48,9 +48,10 @@ export type TSignInFormSchema = z.infer<typeof ZSignInFormSchema>;
export type SignInFormProps = { export type SignInFormProps = {
className?: string; className?: string;
isGoogleSSOEnabled?: boolean;
}; };
export const SignInForm = ({ className }: SignInFormProps) => { export const SignInForm = ({ className, isGoogleSSOEnabled }: SignInFormProps) => {
const { toast } = useToast(); const { toast } = useToast();
const [isTwoFactorAuthenticationDialogOpen, setIsTwoFactorAuthenticationDialogOpen] = const [isTwoFactorAuthenticationDialogOpen, setIsTwoFactorAuthenticationDialogOpen] =
useState(false); useState(false);
@ -203,6 +204,8 @@ export const SignInForm = ({ className }: SignInFormProps) => {
{isSubmitting ? 'Signing in...' : 'Sign In'} {isSubmitting ? 'Signing in...' : 'Sign In'}
</Button> </Button>
{isGoogleSSOEnabled && (
<>
<div className="relative flex items-center justify-center gap-x-4 py-2 text-xs uppercase"> <div className="relative flex items-center justify-center gap-x-4 py-2 text-xs uppercase">
<div className="bg-border h-px flex-1" /> <div className="bg-border h-px flex-1" />
<span className="text-muted-foreground bg-transparent">Or continue with</span> <span className="text-muted-foreground bg-transparent">Or continue with</span>
@ -212,7 +215,7 @@ export const SignInForm = ({ className }: SignInFormProps) => {
<Button <Button
type="button" type="button"
size="lg" size="lg"
variant={'outline'} variant="outline"
className="bg-background text-muted-foreground border" className="bg-background text-muted-foreground border"
disabled={isSubmitting} disabled={isSubmitting}
onClick={onSignInWithGoogleClick} onClick={onSignInWithGoogleClick}
@ -220,7 +223,10 @@ export const SignInForm = ({ className }: SignInFormProps) => {
<FcGoogle className="mr-2 h-5 w-5" /> <FcGoogle className="mr-2 h-5 w-5" />
Google Google
</Button> </Button>
</>
)}
</form> </form>
<Dialog <Dialog
open={isTwoFactorAuthenticationDialogOpen} open={isTwoFactorAuthenticationDialogOpen}
onOpenChange={onCloseTwoFactorAuthenticationDialog} onOpenChange={onCloseTwoFactorAuthenticationDialog}

View File

@ -1 +1,5 @@
export const SALT_ROUNDS = 12; export const SALT_ROUNDS = 12;
export const IS_GOOGLE_SSO_ENABLED = Boolean(
process.env.NEXT_PRIVATE_GOOGLE_CLIENT_ID && process.env.NEXT_PRIVATE_GOOGLE_CLIENT_SECRET,
);