authverse 1.0.6 → 1.0.7-canary.2

package/dist/template/TanstackState/components/ForgetComponent.tsx

@@ -0,0 +1,128 @@
+import { useForm } from "@tanstack/react-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 { useState } from "react";
+import { Link } from "@tanstack/react-router";
+import { authClient } from "@/lib/auth-client";
+
+const formSchema = z.object({
+  email: z.string().email(),
+});
+
+const ForgetComponent = () => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const form = useForm({
+    defaultValues: {
+      email: "",
+    },
+    validators: {
+      onSubmit: formSchema,
+    },
+    onSubmit: async ({ value }) => {
+      setIsLoading(true);
+      await authClient.requestPasswordReset(
+        {
+          email: value.email,
+          redirectTo: "/auth/reset-password",
+        },
+        {
+          onSuccess: () => {
+            toast.success(
+              "Password reset email sent. Please check your inbox."
+            );
+          },
+          onError: (error: any) => {
+            setIsLoading(false);
+            toast.error(error.error.message);
+          },
+        }
+      );
+    },
+  });
+
+  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={(e) => {
+            e.preventDefault();
+            form.handleSubmit();
+          }}
+        >
+          <FieldGroup>
+            <form.Field
+              name="email"
+              children={(field) => {
+                const isInvalid =
+                  field.state.meta.isTouched && !field.state.meta.isValid;
+                return (
+                  <Field data-invalid={isInvalid}>
+                    <FieldLabel htmlFor={field.name}>Email</FieldLabel>
+                    <Input
+                      id={field.name}
+                      name={field.name}
+                      value={field.state.value}
+                      onBlur={field.handleBlur}
+                      onChange={(e) => field.handleChange(e.target.value)}
+                      aria-invalid={isInvalid}
+                      placeholder="example@example.com"
+                      autoComplete="off"
+                      disabled={isLoading}
+                    />
+                    {isInvalid && (
+                      <FieldError errors={field.state.meta.errors} />
+                    )}
+                  </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 to="/auth/login" className="underline">
+              Login
+            </Link>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  );
+};
+
+export default ForgetComponent;

package/dist/template/TanstackState/components/GithubProviders.tsx

@@ -0,0 +1,34 @@
+import { authClient } from "@/lib/auth-client";
+import { Button } from "../ui/button";
+
+const GithubProviders = () => {
+  const signIn = async () => {
+    await authClient.signIn.social({
+      provider: "github",
+    });
+  };
+
+  return (
+    <Button
+      className="w-full text-base flex items-center gap-2"
+      variant="outline"
+      onClick={signIn}
+    >
+      {/* GitHub SVG Icon */}
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        xmlns="http://www.w3.org/2000/svg"
+        className="text-black dark:text-white"
+      >
+        <path d="M12 .5C5.73.5.5 5.74.5 12.03c0 5.13 3.29 9.47 7.86 11 .58.1.79-.25.79-.56v-2.1c-3.2.7-3.88-1.54-3.88-1.54-.52-1.33-1.27-1.69-1.27-1.69-1.04-.72.08-.7.08-.7 1.15.08 1.75 1.19 1.75 1.19 1.02 1.75 2.68 1.24 3.34.95.1-.74.4-1.24.73-1.53-2.55-.29-5.23-1.28-5.23-5.7 0-1.26.45-2.3 1.19-3.11-.12-.29-.52-1.45.11-3.02 0 0 .97-.31 3.18 1.19.92-.26 1.9-.39 2.88-.39.98 0 1.96.13 2.88.39 2.2-1.5 3.17-1.19 3.17-1.19.63 1.57.23 2.73.11 3.02.74.81 1.19 1.85 1.19 3.11 0 4.43-2.69 5.4-5.25 5.68.41.35.77 1.04.77 2.1v3.11c0 .31.21.67.8.56 4.57-1.53 7.85-5.87 7.85-11C23.5 5.74 18.27.5 12 .5z" />
+      </svg>
+
+      <span>Sign in with GitHub</span>
+    </Button>
+  );
+};
+
+export default GithubProviders;

package/dist/template/TanstackState/components/GoogleProviders.tsx

@@ -0,0 +1,46 @@
+import { authClient } from "@/lib/auth-client";
+import { Button } from "../ui/button";
+
+const GoogleProviders = () => {
+  const signIn = async () => {
+    await authClient.signIn.social({
+      provider: "google",
+    });
+  };
+
+  return (
+    <Button
+      className="w-full text-base flex items-center gap-2"
+      variant="outline"
+      onClick={signIn}
+    >
+      <svg
+        width="20"
+        height="20"
+        viewBox="0 0 48 48"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fill="#EA4335"
+          d="M24 9.5c3.54 0 6.7 1.23 9.2 3.64l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.2C12.43 13.02 17.74 9.5 24 9.5z"
+        />
+        <path
+          fill="#4285F4"
+          d="M46.98 24.55c0-1.64-.15-3.22-.43-4.76H24v9.02h12.95c-.56 3.01-2.24 5.56-4.78 7.28l7.73 5.99c4.51-4.18 7.08-10.35 7.08-17.53z"
+        />
+        <path
+          fill="#FBBC05"
+          d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.2C.92 16.46 0 20.12 0 24s.92 7.54 2.56 10.79l7.97-6.2z"
+        />
+        <path
+          fill="#34A853"
+          d="M24 48c6.48 0 11.93-2.13 15.9-5.81l-7.73-5.99c-2.15 1.45-4.9 2.3-8.17 2.3-6.26 0-11.57-3.52-13.46-8.59l-7.97 6.2C6.51 42.62 14.62 48 24 48z"
+        />
+      </svg>
+
+      <span>Sign in with Google</span>
+    </Button>
+  );
+};
+
+export default GoogleProviders;

package/dist/template/TanstackState/components/LoginComponent.tsx

@@ -0,0 +1,159 @@
+import { useForm } from "@tanstack/react-form";
+// import { Controller } from "@tanstack/react-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 { useState } from "react";
+import { Link } from "@tanstack/react-router";
+import { authClient } from "@/lib/auth-client";
+
+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 form = useForm({
+    defaultValues: {
+      email: "",
+      password: "",
+    },
+    validators: {
+      onSubmit: formSchema,
+    },
+    onSubmit: async ({ value }) => {
+      setIsLoading(true);
+      await authClient.signIn.email(
+        {
+          email: value.email,
+          password: value.password,
+          callbackURL: "/",
+        },
+        {
+          onSuccess: () => {
+            toast.success("Login successful!");
+          },
+          onError: (error: any) => {
+            setIsLoading(false);
+            toast.error(error.error.message);
+          },
+        }
+      );
+    },
+  });
+
+  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={(e) => {
+            e.preventDefault();
+            form.handleSubmit();
+          }}
+        >
+          <FieldGroup>
+            <form.Field
+              name="email"
+              children={(field) => {
+                const isInvalid =
+                  field.state.meta.isTouched && !field.state.meta.isValid;
+                return (
+                  <Field data-invalid={isInvalid}>
+                    <FieldLabel htmlFor={field.name}>Email</FieldLabel>
+                    <Input
+                      id={field.name}
+                      name={field.name}
+                      value={field.state.value}
+                      onBlur={field.handleBlur}
+                      onChange={(e) => field.handleChange(e.target.value)}
+                      aria-invalid={isInvalid}
+                      placeholder="example@example.com"
+                      autoComplete="off"
+                      disabled={isLoading}
+                    />
+                    {isInvalid && (
+                      <FieldError errors={field.state.meta.errors} />
+                    )}
+                  </Field>
+                );
+              }}
+            />
+            <form.Field
+              name="password"
+              children={(field) => {
+                const isInvalid =
+                  field.state.meta.isTouched && !field.state.meta.isValid;
+                return (
+                  <Field data-invalid={isInvalid}>
+                    <FieldLabel htmlFor={field.name}>Password</FieldLabel>
+                    <Input
+                      id={field.name}
+                      name={field.name}
+                      value={field.state.value}
+                      onBlur={field.handleBlur}
+                      onChange={(e) => field.handleChange(e.target.value)}
+                      aria-invalid={isInvalid}
+                      placeholder="********"
+                      type="password"
+                      autoComplete="off"
+                      disabled={isLoading}
+                    />
+                    {isInvalid && (
+                      <FieldError errors={field.state.meta.errors} />
+                    )}
+                  </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 to="/auth/signup" className="underline">
+              Sing up
+            </Link>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  );
+};
+
+export default LoginComponent;

package/dist/template/TanstackState/components/ResetComponent.tsx

@@ -0,0 +1,163 @@
+import { useForm } from "@tanstack/react-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 { useState } from "react";
+import { authClient } from "@/lib/auth-client";
+import { redirect, useSearch } from "@tanstack/react-router";
+
+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 { token } = useSearch({ from: "/auth/reset-password" });
+
+  const form = useForm({
+    defaultValues: {
+      password: "",
+      confirmPassword: "",
+    },
+    validators: {
+      onSubmit: formSchema,
+    },
+    onSubmit: async ({ value }) => {
+      setIsLoading(true);
+      await authClient.resetPassword(
+        {
+          newPassword: value.password,
+          token,
+        },
+        {
+          onSuccess: () => {
+            toast.success(
+              "Password has been reset successfully. You can now log in with your new password."
+            );
+            redirect({ to: "/" });
+          },
+          onError: (error: any) => {
+            setIsLoading(false);
+            toast.error(error.error.message);
+          },
+        }
+      );
+    },
+  });
+
+  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={(e) => {
+            e.preventDefault();
+            form.handleSubmit();
+          }}
+        >
+          <FieldGroup>
+            <form.Field
+              name="password"
+              children={(field) => {
+                const isInvalid =
+                  field.state.meta.isTouched && !field.state.meta.isValid;
+                return (
+                  <Field data-invalid={isInvalid}>
+                    <FieldLabel htmlFor={field.name}>Password</FieldLabel>
+                    <Input
+                      id={field.name}
+                      name={field.name}
+                      value={field.state.value}
+                      onBlur={field.handleBlur}
+                      onChange={(e) => field.handleChange(e.target.value)}
+                      aria-invalid={isInvalid}
+                      placeholder="New Password"
+                      type="password"
+                      autoComplete="off"
+                      disabled={isLoading}
+                    />
+                    {isInvalid && (
+                      <FieldError errors={field.state.meta.errors} />
+                    )}
+                  </Field>
+                );
+              }}
+            />
+            <form.Field
+              name="confirmPassword"
+              children={(field) => {
+                const isInvalid =
+                  field.state.meta.isTouched && !field.state.meta.isValid;
+                return (
+                  <Field data-invalid={isInvalid}>
+                    <FieldLabel htmlFor={field.name}>
+                      Confirm Password
+                    </FieldLabel>
+                    <Input
+                      id={field.name}
+                      name={field.name}
+                      value={field.state.value}
+                      onBlur={field.handleBlur}
+                      onChange={(e) => field.handleChange(e.target.value)}
+                      aria-invalid={isInvalid}
+                      placeholder="Confirm Password"
+                      type="password"
+                      autoComplete="off"
+                      disabled={isLoading}
+                    />
+                    {isInvalid && (
+                      <FieldError errors={field.state.meta.errors} />
+                    )}
+                  </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;