Merge pull request #16 from verdigado/feature/restrict-login-to-oidc

Prelaunch Fixes

apps/web/src/app/[locale]/(auth)/login/login-form.tsx

@@ -7,7 +7,7 @@ import { AlertTriangleIcon, UserIcon } from "lucide-react";
 import Image from "next/image";
 import { useRouter, useSearchParams } from "next/navigation";
 import { getProviders, signIn, useSession } from "next-auth/react";
-import React from "react";
+import React, { useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
@@ -40,6 +40,7 @@ export function LoginForm() {
   const [email, setEmail] = React.useState<string>();
   const router = useRouter();
   const callbackUrl = searchParams?.get("callbackUrl") ?? "/";
+  const autoOidcRedirect = searchParams?.get("autoOidcRedirect") ?? '0';
 
   const error = searchParams?.get("error");
 
@@ -106,6 +107,12 @@ export function LoginForm() {
     return res;
   }, [callbackUrl, posthog, providers, router, t]);
 
+  useEffect(() => {
+    if (alternativeLoginMethods.length === 1 && autoOidcRedirect === '1' && !error) {
+      alternativeLoginMethods[0].login();
+    }
+  }, [alternativeLoginMethods, autoOidcRedirect, error]);
+
   if (!providers) {
     return (
       <div className="flex h-72 items-center justify-center">
@@ -145,59 +152,9 @@ export function LoginForm() {
     );
   }
 
-  return (
-    <form
-      onSubmit={handleSubmit(async ({ email }) => {
-        const res = await sendVerificationEmail(email);
-
-        if (res?.error) {
-          setError("email", {
-            message: t("userNotFound"),
-          });
-        } else {
-          setEmail(email);
-        }
-      })}
-    >
-      <div className="mb-1 text-2xl font-bold">{t("login")}</div>
-      <p className="mb-4 text-gray-500">
-        {t("stepSummary", {
-          current: 1,
-          total: 2,
-        })}
-      </p>
-      <fieldset className="mb-2.5">
-        <label htmlFor="email" className="mb-1 text-gray-500">
-          {t("email")}
-        </label>
-        <Input
-          className="w-full"
-          id="email"
-          size="lg"
-          error={!!formState.errors.email}
-          autoFocus={true}
-          disabled={formState.isSubmitting}
-          placeholder={t("emailPlaceholder")}
-          {...register("email", { validate: validEmail })}
-        />
-        {formState.errors.email?.message ? (
-          <div className="mt-2 text-sm text-rose-500">
-            {formState.errors.email.message}
-          </div>
-        ) : null}
-      </fieldset>
-      <div className="flex flex-col gap-2">
-        <Button
-          loading={formState.isSubmitting}
-          type="submit"
-          size="lg"
-          variant="primary"
-          className=""
-        >
-          {t("loginWith", {
-            provider: t("email"),
-          })}
-        </Button>
+  if (error) {
+    return (
+      <>
         {error === "OAuthAccountNotLinked" ? (
           <Alert icon={AlertTriangleIcon} variant="destructive">
             <AlertTitle>
@@ -213,26 +170,34 @@ export function LoginForm() {
               })}
             </AlertDescription>
           </Alert>
-        ) : null}
-        {alternativeLoginMethods.length > 0 ? (
-          <>
-            <div className="relative my-4">
-              <hr className="border-grey-500 absolute top-1/2 w-full border-t" />
-              <span className="absolute left-1/2 -translate-x-1/2 -translate-y-1/2 transform bg-white px-2 text-center text-xs uppercase text-gray-400">
-                {t("or", { defaultValue: "Or" })}
-              </span>
-            </div>
-            <div className="grid gap-2.5">
-              {alternativeLoginMethods.map((method, i) => (
-                <Button size="lg" key={i} onClick={method.login}>
-                  {method.icon}
-                  {method.name}
-                </Button>
-              ))}
-            </div>
-          </>
-        ) : null}
-      </div>
-    </form>
+        ) : (
+          <Alert icon={AlertTriangleIcon} variant="destructive">
+            <AlertTitle>Fehler</AlertTitle>
+            <AlertDescription>{error}</AlertDescription>
+          </Alert>
+        )}
+      </>
+    );
+  }
+
+  if (autoOidcRedirect === '1') {
+    return null;
+  }
+
+  return (
+    <>
+      {alternativeLoginMethods.length > 0 ? (
+        <>
+          <div className="grid gap-2.5">
+            {alternativeLoginMethods.map((method, i) => (
+              <Button size="lg" key={i} onClick={method.login}>
+                {method.icon}
+                {method.name}
+              </Button>
+            ))}
+          </div>
+        </>
+      ) : null}
+    </>
   );
 }

apps/web/src/app/[locale]/(auth)/login/page.tsx

@@ -13,16 +13,6 @@ export default async function LoginPage({ params }: { params: Params }) {
       <AuthCard>
         <LoginForm />
       </AuthCard>
-      <div className="mt-4 pt-4 text-center text-gray-500 sm:text-base">
-        <Trans
-          t={t}
-          i18nKey="notRegistered"
-          defaults="Don't have an account? <a>Register</a>"
-          components={{
-            a: <Link href="/register" className="text-link" />,
-          }}
-        />
-      </div>
     </div>
   );
 }