feat(auth): add OAuth2 login (#276)

* feat(auth): add OAuth2 login with GitHub and Google * chore(translations): add files for Japanese * fix(auth): fix link function for GitHub * feat(oauth): basic oidc implementation * feat(oauth): oauth guard * fix: disable image optimizations for logo to prevent caching issues with custom logos * fix: memory leak while downloading large files * chore(translations): update translations via Crowdin (#278) * New translations en-us.ts (Japanese) * New translations en-us.ts (Japanese) * New translations en-us.ts (Japanese) * release: 0.18.2 * doc(translations): Add Japanese README (#279) * Added Japanese README. * Added JAPANESE README link to README.md. * Updated Japanese README. * Updated Environment Variable Table. * updated zh-cn README. * feat(oauth): unlink account * refactor(oauth): make providers extensible * fix(oauth): fix discoveryUri error when toggle google-enabled * feat(oauth): add microsoft and discord as oauth provider * docs(oauth): update README.md * docs(oauth): update oauth2-guide.md * set password to null for new oauth users * New translations en-us.ts (Japanese) (#281) * chore(translations): add Polish files * fix(oauth): fix random username and password * feat(oauth): add totp * fix(oauth): fix totp throttle * fix(oauth): fix qrcode and remove comment * feat(oauth): add error page * fix(oauth): i18n of error page * feat(auth): add OAuth2 login * fix(auth): fix link function for GitHub * feat(oauth): basic oidc implementation * feat(oauth): oauth guard * feat(oauth): unlink account * refactor(oauth): make providers extensible * fix(oauth): fix discoveryUri error when toggle google-enabled * feat(oauth): add microsoft and discord as oauth provider * docs(oauth): update README.md * docs(oauth): update oauth2-guide.md * set password to null for new oauth users * fix(oauth): fix random username and password * feat(oauth): add totp * fix(oauth): fix totp throttle * fix(oauth): fix qrcode and remove comment * feat(oauth): add error page * fix(oauth): i18n of error page * refactor: return null instead of `false` in `getIdOfCurrentUser` functiom * feat: show original oauth error if available * refactor: run formatter * refactor(oauth): error message i18n * refactor(oauth): make OAuth token available someone may use it (to revoke token or get other info etc.) also improved the i18n message * chore(oauth): remove unused import * chore: add database migration * fix: missing python installation for nanoid --------- Co-authored-by: Elias Schneider <login@eliasschneider.com> Co-authored-by: ふうせん <10260662+fusengum@users.noreply.github.com>
2023-10-22 22:09:53 +08:00
parent d327bc355c
commit 02cd98fa9c
52 changed files with 1983 additions and 161 deletions
--- a/frontend/src/components/auth/TotpForm.tsx
+++ b/frontend/src/components/auth/TotpForm.tsx
@@ -0,0 +1,84 @@
+import {
+  Button,
+  Container,
+  Group,
+  Paper,
+  PinInput,
+  Title,
+} from "@mantine/core";
+import { FormattedMessage } from "react-intl";
+import * as yup from "yup";
+import useTranslate from "../../hooks/useTranslate.hook";
+import { useForm, yupResolver } from "@mantine/form";
+import { useState } from "react";
+import authService from "../../services/auth.service";
+import toast from "../../utils/toast.util";
+import { useRouter } from "next/router";
+import useUser from "../../hooks/user.hook";
+
+function TotpForm({ redirectPath }: { redirectPath: string }) {
+  const t = useTranslate();
+  const router = useRouter();
+  const { refreshUser } = useUser();
+
+  const [loading, setLoading] = useState(false);
+
+  const validationSchema = yup.object().shape({
+    code: yup
+      .string()
+      .min(6, t("common.error.too-short", { length: 6 }))
+      .required(t("common.error.field-required")),
+  });
+
+  const form = useForm({
+    initialValues: {
+      code: "",
+    },
+    validate: yupResolver(validationSchema),
+  });
+
+  const onSubmit = async () => {
+    if (loading) return;
+    setLoading(true);
+    try {
+      await authService.signInTotp(
+        form.values.code,
+        router.query.loginToken as string,
+      );
+      await refreshUser();
+      await router.replace(redirectPath);
+    } catch (e) {
+      toast.axiosError(e);
+      form.setFieldError("code", "error");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Container size={420} my={40}>
+      <Title order={2} align="center" weight={900}>
+        <FormattedMessage id="totp.title" />
+      </Title>
+      <Paper withBorder shadow="md" p={30} mt={30} radius="md">
+        <form onSubmit={form.onSubmit(onSubmit)}>
+          <Group position="center">
+            <PinInput
+              length={6}
+              oneTimeCode
+              aria-label="One time code"
+              autoFocus={true}
+              onComplete={onSubmit}
+              {...form.getInputProps("code")}
+            />
+            <Button mt="md" type="submit" loading={loading}>
+              {t("totp.button.signIn")}
+            </Button>
+          </Group>
+        </form>
+      </Paper>
+    </Container>
+  );
+}
+
+export default TotpForm;