feat(auth): add Google sign-in support for cloud environment

This commit is contained in:
Mauricio Siu
2025-03-01 21:30:30 -06:00
parent 0ad9233087
commit a3362e0b15
4 changed files with 77 additions and 14 deletions

View File

@@ -29,7 +29,6 @@ export async function getServerSideProps(
const { req, res } = ctx;
const { user, session } = await validateRequest(req);
console.log("user", user, session);
if (!user || user.role === "member") {
return {
redirect: {

View File

@@ -63,7 +63,7 @@ export default function Home({ IS_CLOUD }: Props) {
const [isBackupCodeModalOpen, setIsBackupCodeModalOpen] = useState(false);
const [backupCode, setBackupCode] = useState("");
const [isGithubLoading, setIsGithubLoading] = useState(false);
const [isGoogleLoading, setIsGoogleLoading] = useState(false);
const loginForm = useForm<LoginForm>({
resolver: zodResolver(LoginSchema),
defaultValues: {
@@ -181,6 +181,25 @@ export default function Home({ IS_CLOUD }: Props) {
}
};
const handleGoogleSignIn = async () => {
setIsGoogleLoading(true);
try {
const { error } = await authClient.signIn.social({
provider: "google",
});
if (error) {
toast.error(error.message);
return;
}
} catch (error) {
toast.error("An error occurred while signing in with Google", {
description: error instanceof Error ? error.message : "Unknown error",
});
} finally {
setIsGoogleLoading(false);
}
};
return (
<>
<div className="flex flex-col space-y-2 text-center">
@@ -219,6 +238,35 @@ export default function Home({ IS_CLOUD }: Props) {
Sign in with GitHub
</Button>
)}
{IS_CLOUD && (
<Button
variant="outline"
type="button"
className="w-full mb-4"
onClick={handleGoogleSignIn}
isLoading={isGoogleLoading}
>
<svg viewBox="0 0 24 24" className="mr-2 size-4">
<path
fill="currentColor"
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
/>
<path
fill="currentColor"
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
/>
<path
fill="currentColor"
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
/>
<path
fill="currentColor"
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
/>
</svg>
Sign in with Google
</Button>
)}
<Form {...loginForm}>
<form
onSubmit={loginForm.handleSubmit(onSubmit)}

View File

@@ -310,6 +310,15 @@ export async function getServerSideProps(ctx: GetServerSidePropsContext) {
const token = query.token;
// if (IS_CLOUD) {
// return {
// redirect: {
// permanent: true,
// destination: "/",
// },
// };
// }
if (typeof token !== "string") {
return {
redirect: {

View File

@@ -33,7 +33,9 @@ const { handler, api } = betterAuth({
await sendEmail({
email: user.email,
subject: "Verify your email",
text: `Click the link to verify your email: ${url}`,
text: `
<p>Click the link to verify your email: <a href="${url}">Verify Email</a></p>
`,
});
},
},
@@ -53,7 +55,9 @@ const { handler, api } = betterAuth({
await sendEmail({
email: user.email,
subject: "Reset your password",
text: `Click the link to reset your password: ${url}`,
text: `
<p>Click the link to reset your password: <a href="${url}">Reset Password</a></p>
`,
});
},
},
@@ -132,16 +136,19 @@ const { handler, api } = betterAuth({
twoFactor(),
organization({
async sendInvitationEmail(data, _request) {
const inviteLink = `https://example.com/accept-invitation/${data.id}`;
// https://example.com/accept-invitation/8jlBi9Tb9isDb8mc8Sb85u1BaJYklKB2
// sendOrganizationInvitation({
// email: data.email,
// invitedByUsername: data.inviter.user.name,
// invitedByEmail: data.inviter.user.email,
// teamName: data.organization.name,
// inviteLink
// })
console.log("Invitation link", inviteLink);
if (IS_CLOUD) {
const inviteLink = `http://localhost:3000/invitation?token=${data.id}`;
console.log("Invitation link", inviteLink);
await sendEmail({
email: data.email,
subject: "Invitation to join organization",
text: `
<p>You are invited to join ${data.organization.name} on Dokploy. Click the link to accept the invitation: <a href="${inviteLink}">Accept Invitation</a></p>
`,
});
}
},
}),
],