Skip to content

Commit ce6ebd6

Browse files
BrendonovichBrendonovich
committed
hide google/workos login if envs not provided
1 parent 4e8eefb commit ce6ebd6

File tree

5 files changed

+135
-102
lines changed

5 files changed

+135
-102
lines changed

‎apps/web/app/(org)/login/form.tsx‎

Lines changed: 54 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { Suspense, useEffect, useState } from "react";
1919
import { toast } from "sonner";
2020
import { getOrganizationSSOData } from "@/actions/organization/get-organization-sso-data";
2121
import { trackEvent } from "@/app/utils/analytics";
22+
import { usePublicEnv } from "@/utils/public-env";
2223

2324
const MotionInput = motion(Input);
2425
const MotionLogoBadge = motion(LogoBadge);
@@ -404,6 +405,8 @@ const NormalLogin = ({
404405
oauthError: boolean;
405406
handleGoogleSignIn: () => void;
406407
}) => {
408+
const publicEnv = usePublicEnv();
409+
407410
return (
408411
<motion.div>
409412
<motion.div layout className="flex flex-col space-y-3">
@@ -452,52 +455,59 @@ const NormalLogin = ({
452455
Sign up here
453456
</Link>
454457
</motion.p>
455-
<div className="flex gap-4 items-center mt-4 mb-4">
456-
<span className="flex-1 h-px bg-gray-5" />
457-
<p className="text-sm text-center text-gray-10">OR</p>
458-
<span className="flex-1 h-px bg-gray-5" />
459-
</div>
460-
<motion.div
461-
layout
462-
className="flex flex-col gap-3 justify-center items-center"
463-
>
464-
{!oauthError && (
465-
<MotionButton
466-
variant="gray"
467-
type="button"
468-
className="flex gap-2 justify-center items-center w-full text-sm"
469-
onClick={handleGoogleSignIn}
470-
disabled={loading || emailSent}
471-
>
472-
<Image src="/google.svg" alt="Google" width={16} height={16} />
473-
Login with Google
474-
</MotionButton>
475-
)}
476458

477-
{oauthError && (
478-
<div className="flex gap-3 items-center p-3 bg-red-400 rounded-xl border border-red-600">
479-
<FontAwesomeIcon
480-
className="text-gray-50 size-8"
481-
icon={faExclamationCircle}
482-
/>
483-
<p className="text-xs leading-5 text-gray-50">
484-
It looks like you've previously used this email to sign up via
485-
email login. Please enter your email.
486-
</p>
459+
{(publicEnv.googleAuthAvailable || publicEnv.workosAuthAvailable) && (
460+
<>
461+
<div className="flex gap-4 items-center mt-4 mb-4">
462+
<span className="flex-1 h-px bg-gray-5" />
463+
<p className="text-sm text-center text-gray-10">OR</p>
464+
<span className="flex-1 h-px bg-gray-5" />
487465
</div>
488-
)}
489-
<MotionButton
490-
variant="gray"
491-
type="button"
492-
className="w-full"
493-
layout
494-
onClick={() => setShowOrgInput(true)}
495-
disabled={loading || emailSent}
496-
>
497-
<LucideArrowUpRight size={20} />
498-
Login with SAML SSO
499-
</MotionButton>
500-
</motion.div>
466+
<motion.div
467+
layout
468+
className="flex flex-col gap-3 justify-center items-center"
469+
>
470+
{publicEnv.googleAuthAvailable && !oauthError && (
471+
<MotionButton
472+
variant="gray"
473+
type="button"
474+
className="flex gap-2 justify-center items-center w-full text-sm"
475+
onClick={handleGoogleSignIn}
476+
disabled={loading || emailSent}
477+
>
478+
<Image src="/google.svg" alt="Google" width={16} height={16} />
479+
Login with Google
480+
</MotionButton>
481+
)}
482+
483+
{oauthError && (
484+
<div className="flex gap-3 items-center p-3 bg-red-400 rounded-xl border border-red-600">
485+
<FontAwesomeIcon
486+
className="text-gray-50 size-8"
487+
icon={faExclamationCircle}
488+
/>
489+
<p className="text-xs leading-5 text-gray-50">
490+
It looks like you've previously used this email to sign up via
491+
email login. Please enter your email.
492+
</p>
493+
</div>
494+
)}
495+
{publicEnv.workosAuthAvailable && (
496+
<MotionButton
497+
variant="gray"
498+
type="button"
499+
className="w-full"
500+
layout
501+
onClick={() => setShowOrgInput(true)}
502+
disabled={loading || emailSent}
503+
>
504+
<LucideArrowUpRight size={20} />
505+
Login with SAML SSO
506+
</MotionButton>
507+
)}
508+
</motion.div>
509+
</>
510+
)}
501511
</motion.div>
502512
);
503513
};

‎apps/web/app/(org)/signup/form.tsx‎

Lines changed: 55 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { Suspense, useEffect, useState } from "react";
1919
import { toast } from "sonner";
2020
import { getOrganizationSSOData } from "@/actions/organization/get-organization-sso-data";
2121
import { trackEvent } from "@/app/utils/analytics";
22+
import { usePublicEnv } from "@/utils/public-env";
2223

2324
const MotionInput = motion(Input);
2425
const MotionLogoBadge = motion(LogoBadge);
@@ -418,6 +419,8 @@ const NormalSignup = ({
418419
oauthError: boolean;
419420
handleGoogleSignIn: () => void;
420421
}) => {
422+
const publicEnv = usePublicEnv();
423+
421424
return (
422425
<motion.div>
423426
<motion.div layout className="flex flex-col space-y-3">
@@ -444,54 +447,64 @@ const NormalSignup = ({
444447
Sign up with email
445448
</MotionButton>
446449
</motion.div>
447-
<div className="flex gap-4 items-center my-4">
448-
<span className="flex-1 h-px bg-gray-5" />
449-
<p className="text-sm text-center text-gray-10">OR</p>
450-
<span className="flex-1 h-px bg-gray-5" />
451-
</div>
452-
<motion.div
453-
layout
454-
className="flex flex-col gap-3 justify-center items-center"
455-
>
456-
{!oauthError && (
457-
<>
450+
{(publicEnv.googleAuthAvailable || publicEnv.workosAuthAvailable) && (
451+
<>
452+
<div className="flex gap-4 items-center my-4">
453+
<span className="flex-1 h-px bg-gray-5" />
454+
<p className="text-sm text-center text-gray-10">OR</p>
455+
<span className="flex-1 h-px bg-gray-5" />
456+
</div>
457+
<motion.div
458+
layout
459+
className="flex flex-col gap-3 justify-center items-center"
460+
>
461+
{!oauthError && (
462+
<>
463+
<MotionButton
464+
variant="gray"
465+
type="button"
466+
className="flex gap-2 justify-center items-center w-full text-sm"
467+
onClick={handleGoogleSignIn}
468+
disabled={loading}
469+
>
470+
<Image
471+
src="/google.svg"
472+
alt="Google"
473+
width={16}
474+
height={16}
475+
/>
476+
Sign up with Google
477+
</MotionButton>
478+
</>
479+
)}
480+
481+
{oauthError && (
482+
<div className="flex gap-3 items-center p-3 bg-red-400 rounded-xl border border-red-600">
483+
<FontAwesomeIcon
484+
className="text-gray-50 size-8"
485+
icon={faExclamationCircle}
486+
/>
487+
<p className="text-xs leading-5 text-gray-50">
488+
It looks like you've previously used this email to sign up via
489+
email. Please enter your email below to receive a sign up
490+
link.
491+
</p>
492+
</div>
493+
)}
458494
<MotionButton
459495
variant="gray"
460496
type="button"
461-
className="flex gap-2 justify-center items-center w-full text-sm"
462-
onClick={handleGoogleSignIn}
497+
className="w-full"
498+
layout
499+
onClick={() => setShowOrgInput(true)}
463500
disabled={loading}
464501
>
465-
<Image src="/google.svg" alt="Google" width={16} height={16} />
466-
Sign up with Google
502+
<LucideArrowUpRight size={20} />
503+
Sign up with SAML SSO
467504
</MotionButton>
468-
</>
469-
)}
470-
471-
{oauthError && (
472-
<div className="flex gap-3 items-center p-3 bg-red-400 rounded-xl border border-red-600">
473-
<FontAwesomeIcon
474-
className="text-gray-50 size-8"
475-
icon={faExclamationCircle}
476-
/>
477-
<p className="text-xs leading-5 text-gray-50">
478-
It looks like you've previously used this email to sign up via
479-
email. Please enter your email below to receive a sign up link.
480-
</p>
481-
</div>
482-
)}
483-
<MotionButton
484-
variant="gray"
485-
type="button"
486-
className="w-full"
487-
layout
488-
onClick={() => setShowOrgInput(true)}
489-
disabled={loading}
490-
>
491-
<LucideArrowUpRight size={20} />
492-
Sign up with SAML SSO
493-
</MotionButton>
494-
</motion.div>
505+
</motion.div>
506+
</>
507+
)}
495508
</motion.div>
496509
);
497510
};

‎apps/web/app/layout.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,8 @@ export default ({ children }: PropsWithChildren) =>
129129
<PublicEnvContext
130130
value={{
131131
webUrl: buildEnv.NEXT_PUBLIC_WEB_URL,
132+
workosAuthAvailable: !!serverEnv().WORKOS_CLIENT_ID,
133+
googleAuthAvailable: !!serverEnv().GOOGLE_CLIENT_ID,
132134
}}
133135
>
134136
<ReactQueryProvider>

‎apps/web/app/s/[videoId]/_components/AuthOverlay.tsx‎

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { useId, useState } from "react";
1111
import { toast } from "sonner";
1212
import { trackEvent } from "@/app/utils/analytics";
1313
import OtpForm from "./OtpForm";
14+
import { usePublicEnv } from "@/utils/public-env";
1415

1516
interface AuthOverlayProps {
1617
isOpen: boolean;
@@ -64,7 +65,6 @@ export const AuthOverlay: React.FC<AuthOverlayProps> = ({
6465
</div>
6566

6667
<div className="flex flex-col">
67-
<AnimatePresence> </AnimatePresence>
6868
{step === 1 ? (
6969
<StepOne
7070
email={email}
@@ -145,6 +145,8 @@ const StepOne = ({
145145
callbackUrl: `${window.location.origin}/s/${videoId}`,
146146
});
147147
};
148+
const publicEnv = usePublicEnv();
149+
148150
return (
149151
<form
150152
onSubmit={async (e) => {
@@ -204,21 +206,25 @@ const StepOne = ({
204206
: "Email sent to your inbox"
205207
: "Continue with Email"}
206208
</Button>
207-
<div className="flex gap-4 items-center">
208-
<span className="flex-1 h-px bg-gray-5" />
209-
<p className="text-sm text-center text-gray-10">OR</p>
210-
<span className="flex-1 h-px bg-gray-5" />
211-
</div>
212-
<Button
213-
variant="gray"
214-
type="button"
215-
className="flex gap-2 justify-center items-center my-1 w-full text-sm"
216-
onClick={handleGoogleSignIn}
217-
disabled={loading}
218-
>
219-
<Image src="/google.svg" alt="Google" width={16} height={16} />
220-
Login with Google
221-
</Button>
209+
{publicEnv.googleAuthAvailable && (
210+
<>
211+
<div className="flex gap-4 items-center">
212+
<span className="flex-1 h-px bg-gray-5" />
213+
<p className="text-sm text-center text-gray-10">OR</p>
214+
<span className="flex-1 h-px bg-gray-5" />
215+
</div>
216+
<Button
217+
variant="gray"
218+
type="button"
219+
className="flex gap-2 justify-center items-center my-1 w-full text-sm"
220+
onClick={handleGoogleSignIn}
221+
disabled={loading}
222+
>
223+
<Image src="/google.svg" alt="Google" width={16} height={16} />
224+
Login with Google
225+
</Button>
226+
</>
227+
)}
222228
</form>
223229
);
224230
};

‎apps/web/utils/public-env.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import { createContext, type PropsWithChildren, useContext } from "react";
44

55
type PublicEnvContext = {
66
webUrl: string;
7+
googleAuthAvailable: boolean;
8+
workosAuthAvailable: boolean;
79
};
810

911
const Context = createContext<PublicEnvContext | null>(null);

0 commit comments

Comments
 (0)