feature: Added support for custom OIDC providers to set up authentication. Fixes #92 (#307)

* https://github.com/hoarder-app/hoarder/issues/92
Added support for custom OIDC providers to set up authentication

* Added support for custom OIDC providers to set up authentication #92
Showing OAuth errors in the signin page

* Added support for custom OIDC providers to set up authentication #92
Added the possibility to log in using an API key in case OAuth is used

* Added support for custom OIDC providers to set up authentication #92
improved the code to also promote the first user to admin if OAuth is used

* revert extension changes

* Simplify admin checks

---------

Co-authored-by: MohamedBassem <me@mbassem.com>

1 files changed, 13 insertions, 6 deletions

diff --git a/apps/web/components/signin/CredentialsForm.tsx b/apps/web/components/signin/CredentialsForm.tsx
index 07e08fae..65fec6a8 100644
--- a/apps/web/components/signin/CredentialsForm.tsx
+++ b/apps/web/components/signin/CredentialsForm.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import { ActionButton } from "@/components/ui/action-button";
 import {
   Form,
@@ -28,9 +28,18 @@ const signInSchema = z.object({
   password: z.string(),
 });
 
+const SIGNIN_FAILED = "Incorrect username or password";
+const OAUTH_FAILED = "OAuth login failed: ";
+
 function SignIn() {
-  const [signinError, setSigninError] = useState(false);
+  const [signinError, setSigninError] = useState("");
   const router = useRouter();
+  const searchParams = useSearchParams();
+  const oAuthError = searchParams.get("error");
+  if (oAuthError && !signinError) {
+    setSigninError(`${OAUTH_FAILED} ${oAuthError}`);
+  }
+
   const form = useForm<z.infer<typeof signInSchema>>({
     resolver: zodResolver(signInSchema),
   });
@@ -45,7 +54,7 @@ function SignIn() {
             password: value.password,
           });
           if (!resp || !resp?.ok) {
-            setSigninError(true);
+            setSigninError(SIGNIN_FAILED);
             return;
           }
           router.replace("/");
@@ -53,9 +62,7 @@ function SignIn() {
       >
         <div className="flex w-full flex-col space-y-2">
           {signinError && (
-            <p className="w-full text-center text-destructive">
-              Incorrect username or password
-            </p>
+            <p className="w-full text-center text-destructive">{signinError}</p>
           )}
           <FormField
             control={form.control}