authverse 1.0.4

package/dist/template/api/route.ts

@@ -0,0 +1,4 @@
+import { auth } from "@/lib/auth";
+import { toNextJsHandler } from "better-auth/next-js";
+
+export const { POST, GET } = toNextJsHandler(auth);

package/dist/template/app-auth-uiDesign/forget/page.tsx

@@ -0,0 +1,7 @@
+import ForgetComponent from "@/components/authverse/ForgetComponent";
+
+const ForgetPage = () => {
+  return <ForgetComponent />;
+};
+
+export default ForgetPage;

package/dist/template/app-auth-uiDesign/layout.tsx

@@ -0,0 +1,9 @@
+const AuthLayout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div className="w-full h-screen flex items-center justify-center bg-slate-100 dark:bg-slate-800">
+      {children}
+    </div>
+  );
+};
+
+export default AuthLayout;

package/dist/template/app-auth-uiDesign/login/page.tsx

@@ -0,0 +1,7 @@
+import LoginComponent from "@/components/authverse/LoginComponent";
+
+const LoginPage = () => {
+  return <LoginComponent />;
+};
+
+export default LoginPage;

package/dist/template/app-auth-uiDesign/reset-password/page.tsx

@@ -0,0 +1,7 @@
+import ResetComponent from "@/components/authverse/ResetComponent";
+
+const ResetPage = () => {
+  return <ResetComponent />;
+};
+
+export default ResetPage;

package/dist/template/app-auth-uiDesign/signup/page.tsx

@@ -0,0 +1,7 @@
+import SingUpComponent from "@/components/authverse/SingUpComponent";
+
+const SingUpPage = () => {
+  return <SingUpComponent />;
+};
+
+export default SingUpPage;

package/dist/template/components/ForgetComponent.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Controller, useForm } from "react-hook-form";
+import { toast } from "sonner";
+import * as z from "zod";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { authClient } from "@/lib/auth-client";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+const formSchema = z.object({
+  email: z.string().email(),
+});
+
+const ForgetComponent = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const router = useRouter();
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      email: "",
+    },
+  });
+
+  const onSubmit = async (value: z.infer<typeof formSchema>) => {
+    setIsLoading(true);
+    try {
+      const { data, error } = await authClient.requestPasswordReset({
+        email: value.email,
+        redirectTo: "/auth/reset-password",
+      });
+
+      if (error) {
+        setIsLoading(false);
+        toast.error(error.message);
+      }
+      if (data) {
+        setIsLoading(false);
+        toast.success("Password reset email sent. Please check your inbox.");
+      }
+    } catch (error) {
+      toast.error("Something went wrong. Please try again.");
+    }
+  };
+
+  return (
+    <Card className="w-full sm:max-w-md shadow-md">
+      <CardHeader>
+        <CardTitle className="text-2xl leading-4">Forger Password</CardTitle>
+        <CardDescription>Please enter your email</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form id="form-login" onSubmit={form.handleSubmit(onSubmit)}>
+          <FieldGroup>
+            <Controller
+              name="email"
+              control={form.control}
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor="form-login-email">Email</FieldLabel>
+                  <Input
+                    {...field}
+                    id="form-login-email"
+                    aria-invalid={fieldState.invalid}
+                    placeholder="example@domain.com"
+                    autoComplete="off"
+                    disabled={isLoading}
+                  />
+                  {fieldState.invalid && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
+                </Field>
+              )}
+            />
+          </FieldGroup>
+        </form>
+      </CardContent>
+      <CardFooter>
+        <div className="w-full">
+          <Field orientation="horizontal">
+            <Button
+              type="submit"
+              form="form-login"
+              className="w-full"
+              disabled={isLoading}
+            >
+              {isLoading ? "Resetting..." : "Reset Password"}
+            </Button>
+          </Field>
+          <div className="w-full text-center pt-4 space-x-2">
+            <span>Already have an account?</span>
+            <Link href="/auth/login" className="underline">
+              Login
+            </Link>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  );
+};
+
+export default ForgetComponent;

package/dist/template/components/GithubProviders.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { authClient } from "@/lib/auth-client";
+import { Button } from "../ui/button";
+import { FaGithub } from "react-icons/fa";
+
+const GithubProviders = () => {
+  const signIn = async () => {
+    const data = await authClient.signIn.social({
+      provider: "github",
+    });
+  };
+  return (
+    <Button className="w-full text-base" variant="outline" onClick={signIn}>
+      <FaGithub />
+      Sign in with GitHub
+    </Button>
+  );
+};
+
+export default GithubProviders;

package/dist/template/components/GoogleProviders.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { authClient } from "@/lib/auth-client";
+import { Button } from "../ui/button";
+import { FaGoogle } from "react-icons/fa";
+
+const GoogleProviders = () => {
+  const signIn = async () => {
+    const data = await authClient.signIn.social({
+      provider: "google",
+    });
+  };
+  return (
+    <Button className="w-full text-base" variant="outline" onClick={signIn}>
+      <FaGoogle />
+      Sign in with Google
+    </Button>
+  );
+};
+
+export default GoogleProviders;

package/dist/template/components/LoginComponent.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import { Controller, useForm } from "react-hook-form";
+import { toast } from "sonner";
+import * as z from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import Link from "next/link";
+import { useState } from "react";
+import { signIn } from "@/server/user";
+import { useRouter } from "next/navigation";
+
+const formSchema = z.object({
+  email: z.string().email(),
+  password: z.string().min(8, {
+    message: "Password must be at least 8 characters",
+  }),
+});
+
+const LoginComponent = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const router = useRouter();
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      email: "",
+      password: "",
+    },
+  });
+
+  const onSubmit = async (data: z.infer<typeof formSchema>) => {
+    setIsLoading(true);
+    try {
+      const { success, message } = await signIn(data.email, data.password);
+
+      if (success === true) {
+        router.push("/");
+        toast.success(message);
+      } else {
+        toast.error(message);
+      }
+      setIsLoading(false);
+    } catch (error: any) {
+      toast.error(error.message);
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Card className="w-full sm:max-w-md shadow-md">
+      <CardHeader>
+        <CardTitle className="text-2xl leading-4">Welcome Back</CardTitle>
+        <CardDescription>Please sign in to your account.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form id="form-login" onSubmit={form.handleSubmit(onSubmit)}>
+          <FieldGroup>
+            <Controller
+              name="email"
+              control={form.control}
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor="form-login-email">Email</FieldLabel>
+                  <Input
+                    {...field}
+                    id="form-login-email"
+                    aria-invalid={fieldState.invalid}
+                    placeholder="example@domain.com"
+                    autoComplete="off"
+                    disabled={isLoading}
+                  />
+                  {fieldState.invalid && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
+                </Field>
+              )}
+            />
+            <Controller
+              name="password"
+              control={form.control}
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor="form-login-password">
+                    Password
+                  </FieldLabel>
+                  <Input
+                    {...field}
+                    id="form-login-password"
+                    aria-invalid={fieldState.invalid}
+                    placeholder="********"
+                    autoComplete="off"
+                    type="password"
+                    disabled={isLoading}
+                  />
+                  {fieldState.invalid && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
+                </Field>
+              )}
+            />
+          </FieldGroup>
+        </form>
+      </CardContent>
+      <CardFooter>
+        <div className="w-full">
+          <Field orientation="horizontal">
+            <Button
+              type="submit"
+              form="form-login"
+              className="w-full"
+              disabled={isLoading}
+            >
+              {isLoading ? "Logining..." : "Login"}
+            </Button>
+          </Field>
+          <div className="w-full text-center pt-4 space-x-2">
+            <span>Don&apos;t have an account?</span>
+            <Link href="/auth/signup" className="underline">
+              Sing up
+            </Link>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  );
+};
+
+export default LoginComponent;

package/dist/template/components/Logout.tsx

@@ -0,0 +1,21 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import { authClient } from "@/lib/auth-client";
+import { LogOutIcon } from "lucide-react";
+import { useRouter } from "next/navigation";
+
+const Logout = () => {
+  const router = useRouter();
+  const handleLogout = async () => {
+    await authClient.signOut();
+    router.push("/auth/login");
+  };
+  return (
+    <Button variant="outline" onClick={handleLogout}>
+      <LogOutIcon className="mr-1 h-4 w-4" />
+      Logout
+    </Button>
+  );
+};
+
+export default Logout;

package/dist/template/components/ResetComponent.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Controller, useForm } from "react-hook-form";
+import { toast } from "sonner";
+import * as z from "zod";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { authClient } from "@/lib/auth-client";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useState } from "react";
+
+const formSchema = z
+  .object({
+    password: z.string().min(8, {
+      message: "Password must be at least 8 characters",
+    }),
+    confirmPassword: z.string(),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: "Passwords do not match",
+    path: ["confirmPassword"],
+  });
+
+const ResetComponent = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const token = searchParams.get("token") as string;
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      password: "",
+      confirmPassword: "",
+    },
+  });
+
+  const onSubmit = async (value: z.infer<typeof formSchema>) => {
+    setIsLoading(true);
+    try {
+      const { data, error } = await authClient.resetPassword({
+        newPassword: value.password,
+        token,
+      });
+      if (error) {
+        toast.error(error.message);
+      }
+      if (data) {
+        toast.success("Password has been reset successfully.");
+        router.push("/auth/login");
+      }
+    } catch (error) {
+      toast.error("Something went wrong. Please try again.");
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Card className="w-full sm:max-w-md shadow-md">
+      <CardHeader>
+        <CardTitle className="text-2xl leading-4">Reset Password</CardTitle>
+        <CardDescription>Please enter your new password</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form id="form-login" onSubmit={form.handleSubmit(onSubmit)}>
+          <FieldGroup>
+            <Controller
+              name="password"
+              control={form.control}
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor="form-login-password">
+                    Password
+                  </FieldLabel>
+                  <Input
+                    {...field}
+                    id="form-login-password"
+                    aria-invalid={fieldState.invalid}
+                    placeholder="********"
+                    type="password"
+                    autoComplete="off"
+                    disabled={isLoading}
+                  />
+                  {fieldState.invalid && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
+                </Field>
+              )}
+            />
+            <Controller
+              name="confirmPassword"
+              control={form.control}
+              render={({ field, fieldState }) => (
+                <Field data-invalid={fieldState.invalid}>
+                  <FieldLabel htmlFor="form-login-confirm-password">
+                    Password
+                  </FieldLabel>
+                  <Input
+                    {...field}
+                    id="form-login-confirm-password"
+                    aria-invalid={fieldState.invalid}
+                    placeholder="********"
+                    type="password"
+                    autoComplete="off"
+                    disabled={isLoading}
+                  />
+                  {fieldState.invalid && (
+                    <FieldError errors={[fieldState.error]} />
+                  )}
+                </Field>
+              )}
+            />
+          </FieldGroup>
+        </form>
+      </CardContent>
+      <CardFooter>
+        <div className="w-full">
+          <Field orientation="horizontal">
+            <Button
+              type="submit"
+              form="form-login"
+              className="w-full"
+              disabled={isLoading}
+            >
+              {isLoading ? "Resetting..." : "Reset Password"}
+            </Button>
+          </Field>
+        </div>
+      </CardFooter>
+    </Card>
+  );
+};
+
+export default ResetComponent;