login login basics

.env

@@ -3,3 +3,6 @@ DATABASE_URL="postgres://documenso_test_user:2bSsTDWSKqP3bLYq3tEQVsb5pR3G9l1K@dp
 
 #URL
 NEXT_PUBLIC_WEBAPP_URL='http://localhost:3000'
+
+# Auth
+NEXTAUTH_SECRET=say_lalisa_love_me_lalisa_love_me_hey

apps/web/components/login.tsx

@@ -1,9 +1,50 @@
 import { LockClosedIcon } from "@heroicons/react/20/solid";
 import Link from "next/link";
-import Logo from "./logo";
-import { signIn } from "next-auth/react";
+import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
+
+import Logo from "./logo";
+import { getCsrfToken, signIn } from "next-auth/react";
+import { ErrorCode } from "@documenso/lib/auth";
+import { useState } from "react";
+import { useRouter } from "next/router";
+
+interface LoginValues {
+  email: string;
+  password: string;
+  totpCode: string;
+  csrfToken: string;
+}
+
+export default function Login() {
+  const router = useRouter();
+  const methods = useForm<LoginValues>();
+  const { register, formState } = methods;
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  let callbackUrl =
+    typeof router.query?.callbackUrl === "string"
+      ? router.query.callbackUrl
+      : "";
+
+  // If not absolute URL, make it absolute
+  if (!/^https?:\/\//.test(callbackUrl)) {
+    callbackUrl = `http://localhost:3000/${callbackUrl}`;
+  }
+
+  const onSubmit = async (values: LoginValues) => {
+    setErrorMessage(null);
+    const res = await signIn<"credentials">("credentials", {
+      ...values,
+      callbackUrl,
+      redirect: false,
+    });
+    if (!res) setErrorMessage("error");
+    // we're logged in! let's do a hard refresh to the desired url
+    else if (!res.error) router.push(callbackUrl);
+    // fallback if error not found
+    else setErrorMessage("something_went_wrong");
+  };
 
-export default function Example() {
   return (
     <>
       <div className="flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
@@ -20,65 +61,70 @@ export default function Example() {
               </a>
             </p>
           </div>
-          <form className="mt-8 space-y-6" action="#" method="POST">
-            <input type="hidden" name="remember" defaultValue="true" />
-            <div className="-space-y-px rounded-md shadow-sm">
-              <div>
-                <label htmlFor="email-address" className="sr-only">
-                  Email
-                </label>
-                <input
-                  id="email-address"
-                  name="email"
-                  type="email"
-                  autoComplete="email"
-                  required
-                  className="relative block w-full appearance-none rounded-none rounded-t-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
-                  placeholder="Email address"
-                />
-              </div>
-              <div>
-                <label htmlFor="password" className="sr-only">
-                  Password
-                </label>
-                <input
-                  id="password"
-                  name="password"
-                  type="password"
-                  autoComplete="current-password"
-                  required
-                  className="relative block w-full appearance-none rounded-none rounded-b-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
-                  placeholder="Password"
-                />
-              </div>
-            </div>
-
-            <div className="flex items-center justify-between">
-              <div className="text-sm">
-                <a href="#" className="font-medium text-neon hover:text-neon">
-                  Forgot your password?
-                </a>
-              </div>
-            </div>
-
-            <div>
-              <button
-                onClick={(e) => {
-                  e.preventDefault();
-                  signIn(undefined, { callbackUrl: "/dashboard" });
-                }}
-                className="group relative flex w-full justify-center rounded-md border border-transparent bg-neon py-2 px-4 text-sm font-medium text-white hover:bg-neon-dark focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-              >
-                <span className="absolute inset-y-0 left-0 flex items-center pl-3">
-                  <LockClosedIcon
-                    className="h-5 w-5 text-neon-dark group-hover:text-neon"
-                    aria-hidden="true"
+          <FormProvider {...methods}>
+            <form
+              className="mt-8 space-y-6"
+              onSubmit={methods.handleSubmit(onSubmit)}
+            >
+              <input type="hidden" name="remember" defaultValue="true" />
+              <div className="-space-y-px rounded-md shadow-sm">
+                <div>
+                  <label htmlFor="email-address" className="sr-only">
+                    Email
+                  </label>
+                  <input
+                    {...register("email")}
+                    id="email-address"
+                    name="email"
+                    type="email"
+                    autoComplete="email"
+                    required
+                    className="relative block w-full appearance-none rounded-none rounded-t-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
+                    placeholder="Email address"
                   />
-                </span>
-                Sign in
-              </button>
-            </div>
-          </form>
+                </div>
+                <div>
+                  <label htmlFor="password" className="sr-only">
+                    Password
+                  </label>
+                  <input
+                    {...register("password")}
+                    id="password"
+                    name="password"
+                    type="password"
+                    autoComplete="current-password"
+                    required
+                    className="relative block w-full appearance-none rounded-none rounded-b-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
+                    placeholder="Password"
+                  />
+                </div>
+              </div>
+
+              <div className="flex items-center justify-between">
+                <div className="text-sm">
+                  <a href="#" className="font-medium text-neon hover:text-neon">
+                    Forgot your password?
+                  </a>
+                </div>
+              </div>
+
+              <div>
+                <button
+                  type="submit"
+                  disabled={formState.isSubmitting}
+                  className="group relative flex w-full justify-center rounded-md border border-transparent bg-neon py-2 px-4 text-sm font-medium text-white hover:bg-neon-dark focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                >
+                  <span className="absolute inset-y-0 left-0 flex items-center pl-3">
+                    <LockClosedIcon
+                      className="h-5 w-5 text-neon-dark group-hover:text-neon"
+                      aria-hidden="true"
+                    />
+                  </span>
+                  Sign in
+                </button>
+              </div>
+            </form>
+          </FormProvider>
         </div>
       </div>
     </>

apps/web/components/signup.tsx

@@ -0,0 +1,132 @@
+import { signIn } from "next-auth/react";
+import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
+
+import Logo from "./logo";
+
+type FormValues = {
+  username: string;
+  email: string;
+  password: string;
+  passwordcheck: string;
+  apiError: string;
+};
+
+export default function Signup() {
+  const methods = useForm<FormValues>({});
+  const {
+    register,
+    formState: { errors, isSubmitting },
+  } = methods;
+
+  const handleErrors = async (resp: Response) => {
+    if (!resp.ok) {
+      const err = await resp.json();
+      throw new Error(err.message);
+    }
+  };
+
+  const signUp: SubmitHandler<FormValues> = async (data) => {
+    await fetch("/api/auth/signup", {
+      body: JSON.stringify({
+        ...data,
+      }),
+      headers: {
+        "Content-Type": "application/json",
+      },
+      method: "POST",
+    })
+      .then(handleErrors)
+      .then(async () => {
+        await signIn<"credentials">("credentials", {
+          ...data,
+          callbackUrl: "http://localhost:3000/dashboard",
+        });
+      })
+      .catch((err) => {
+        methods.setError("apiError", { message: err.message });
+      });
+  };
+
+  return (
+    <>
+      <div className="flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
+        <div className="w-full max-w-md space-y-8">
+          <div>
+            <Logo className="mx-auto h-12 w-auto"></Logo>
+            <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
+              Create a shiny, new <br></br>Documenso Account{" "}
+              <svg
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={1.5}
+                stroke="rgb(17 24 39 / var(--tw-text-opacity))"
+                className="w-8 h-8 inline mb-1"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"
+                />
+              </svg>
+            </h2>
+            <p className="mt-2 text-center text-sm text-gray-600">
+              Create your account and start using state<br></br> of the art
+              document signing for free.
+            </p>
+          </div>
+          <FormProvider {...methods}>
+            <form
+              onSubmit={methods.handleSubmit(signUp)}
+              className="mt-8 space-y-6"
+            >
+              <input type="hidden" name="remember" defaultValue="true" />
+              <div className="-space-y-px rounded-md shadow-sm">
+                <div>
+                  <label htmlFor="email-address" className="sr-only">
+                    Email
+                  </label>
+                  <input
+                    {...register("email")}
+                    id="email-address"
+                    name="email"
+                    type="email"
+                    autoComplete="email"
+                    required
+                    className="relative block w-full appearance-none rounded-none rounded-t-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
+                    placeholder="Email"
+                  />
+                </div>
+                <div>
+                  <label htmlFor="password" className="sr-only">
+                    Password
+                  </label>
+                  <input
+                    {...register("password")}
+                    id="password"
+                    name="password"
+                    type="password"
+                    autoComplete="current-password"
+                    required
+                    className="relative block w-full appearance-none rounded-none rounded-b-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
+                    placeholder="Password"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <button
+                  type="submit"
+                  value="submit"
+                  className="group relative flex w-full justify-center rounded-md border border-transparent bg-neon py-2 px-4 text-sm font-medium text-white hover:bg-neon-dark focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                >
+                  <span className="absolute inset-y-0 left-0 flex items-center pl-3"></span>
+                  Create Account
+                </button>
+              </div>
+            </form>
+          </FormProvider>
+        </div>
+      </div>
+    </>
+  );
+}

apps/web/package.json

@@ -28,6 +28,7 @@
     "npm": "^9.1.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-hook-form": "^7.41.5",
     "typescript": "4.8.4"
   },
   "devDependencies": {

apps/web/pages/api/auth/[...nextauth].ts

@@ -6,9 +6,16 @@ import prisma from "@documenso/prisma";
 import { verifyPassword } from "@documenso/lib/auth";
 
 export default NextAuth({
+  secret: process.env.AUTH_SECRET,
+  pages: {
+    signIn: "/login",
+    signOut: "/login",
+    error: "/auth/error", // Error code passed in query string as ?error=
+    verifyRequest: "/auth/verify-request", // (used for check email message)
+  },
   providers: [
     CredentialsProvider({
-      id: "crediantials",
+      id: "credentials",
       name: "Documenso.com Login",
       type: "credentials",
       credentials: {

apps/web/pages/signup.tsx

@@ -1,3 +1,13 @@
+import Head from "next/head";
+import Signup from "../components/signup";
+
 export default function SignupPage() {
-  return <>This is the signup page.</>;
+  return (
+    <>
+      <Head>
+        <title>Login | Documenso</title>
+      </Head>
+      <Signup></Signup>
+    </>
+  );
 }

packages/lib/coloredConsole.ts

@@ -1,6 +1,6 @@
 // https://stackoverflow.com/questions/9781218/how-to-change-node-jss-console-font-color
 
-export default class coloredConsole {
+export class coloredConsole {
   public static setupColoredConsole(): void {
     let infoLog = console.info;
     let logLog = console.log;

packages/lib/getSafeRedirectUrl.ts

@@ -0,0 +1,26 @@
+import { CONSOLE_URL, WEBAPP_URL, WEBSITE_URL } from "@calcom/lib/constants";
+
+// It ensures that redirection URL safe where it is accepted through a query params or other means where user can change it.
+export const getSafeRedirectUrl = (url = "") => {
+  if (!url) {
+    return null;
+  }
+
+  //It is important that this fn is given absolute URL because urls that don't start with HTTP can still deceive browser into redirecting to another domain
+  if (url.search(/^https?:\/\//) === -1) {
+    throw new Error("Pass an absolute URL");
+  }
+
+  const urlParsed = new URL(url);
+
+  // Avoid open redirection security vulnerability
+  if (
+    ![CONSOLE_URL, WEBAPP_URL, WEBSITE_URL].some(
+      (u) => new URL(u).origin === urlParsed.origin
+    )
+  ) {
+    url = `${WEBAPP_URL}/`;
+  }
+
+  return url;
+};