@rpcbase/auth 0.13.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpcbase/auth",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "type": "module",
   "main": "./src/index.ts",
   "scripts": {

package/src/api/sign-up/handler.ts

@@ -0,0 +1,48 @@
+import crypto from "crypto"
+import isEmail from "validator/lib/isEmail"
+
+import {Api, loadModel, Ctx, ApiHandler} from "@rpcbase/api"
+import { hashPassword } from "@rpcbase/server"
+
+import * as SignUp from "./index"
+
+
+const signUp = async(payload: SignUp.RequestPayload, ctx: Ctx): Promise<SignUp.ResponsePayload> => {
+  const User = await loadModel("User", ctx)
+
+  const {email_or_phone, password} = SignUp.requestSchema.parse(payload)
+
+  const is_email = isEmail(email_or_phone)
+  const query = is_email ? { email: email_or_phone } : { phone: email_or_phone }
+
+  const existingUser = await User.findOne(query)
+
+  if (existingUser) {
+    console.log("user with email or phone already exists", email_or_phone)
+    // For security, we don't want to reveal if an email/phone is registered.
+    // But for this implementation, we'll make it simple.
+    return { success: false }
+  }
+
+  const salt = crypto.randomBytes(16).toString("hex")
+  const derivedKey = await hashPassword(password, salt)
+  const hashedPassword = `${salt}:${derivedKey.toString("hex")}`
+
+  const user = new User({
+    ...query,
+    password: hashedPassword,
+  })
+  await user.save()
+
+  console.log("created new user", user._id.toString())
+
+  // Note: This implementation does not automatically sign the user in.
+  // A full implementation would likely create a session for the new user,
+  // but tenant assignment logic for new users is not clear at this point.
+
+  return {success: true}
+}
+
+export default (api: Api) => {
+  api.post(SignUp.Route, signUp as ApiHandler)
+}

package/src/api/sign-up/index.ts

@@ -0,0 +1,33 @@
+import { z } from "zod"
+import { isValidNumber } from "libphonenumber-js"
+
+export const Route = "/api/rb/auth/sign-up"
+
+export const requestSchema = z
+  .object({
+    email_or_phone: z
+      .string()
+      .nonempty("Email or phone number is required")
+      .refine(
+        (value) => {
+          const isEmail = z.string().email().safeParse(value).success
+          const isPhone = isValidNumber(value)
+          return isEmail || isPhone
+        },
+        "Please enter a valid email address or phone number"
+      ),
+    password: z.string().min(8, { message: "Password must be at least 8 characters long." }),
+    password_confirmation: z.string().nonempty({ message: "Please confirm your password." }),
+  })
+  .refine((data) => data.password === data.password_confirmation, {
+    message: "Passwords do not match.",
+    path: ["password_confirmation"],
+  })
+
+export type RequestPayload = z.infer<typeof requestSchema>
+
+export const responseSchema = z.object({
+  success: z.boolean(),
+})
+
+export type ResponsePayload = z.infer<typeof responseSchema>

package/src/components/AuthLayout/index.tsx

@@ -0,0 +1,55 @@
+import * as React from "react"
+import {Link, useLocation } from "@rpcbase/router"
+
+
+const LINKS_REDIRECTION_MAP = {
+  "/auth/sign-in": {
+    "title": "Sign Up",
+    "location": "/auth/sign-up"
+  },
+  "/auth/sign-up": {
+    "title": "Sign In",
+    "location": "/auth/sign-in"
+  },
+  "/auth/forgot-password": {
+    "title": "Sign In",
+    "location": "/auth/sign-in"
+  },
+  "/auth/logout-success": {
+    "title": "Sign In",
+    "location": "/auth/sign-in"
+  }
+}
+
+type Pathname = keyof typeof LINKS_REDIRECTION_MAP
+
+export const AuthLayout = ({
+  sidePanel = null,
+  children,
+}: {
+  sidePanel: React.ReactElement | null
+  children: React.ReactNode
+}) => {
+  const location = useLocation()
+
+  const linkTitle = LINKS_REDIRECTION_MAP[location.pathname as Pathname]?.title
+  const linkLocation = LINKS_REDIRECTION_MAP[location.pathname as Pathname]?.location
+
+  return (
+    <div className="container relative hidden h-dvh flex-col items-center justify-center md:grid md:w-full lg:max-w-none lg:grid-cols-2 lg:px-0">
+      {/* Top-right redirection link */}
+      <Link
+        className="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2 absolute right-4 top-4 md:right-8 md:top-8"
+        to={linkLocation}
+      >
+        {linkTitle}
+      </Link>
+      <div className="relative hidden h-full flex-col bg-muted p-10 text-white dark:border-r lg:flex">
+        {sidePanel}
+      </div>
+      <div className="mx-auto flex w-full flex-col justify-center gap-6 /*sm:w-[350px]*/">
+        {children}
+      </div>
+    </div>
+  )
+}

package/src/components/SignUpForm/index.tsx

@@ -0,0 +1,43 @@
+import {ReactNode, useEffect} from "react"
+import { useForm, FormProvider, zodResolver } from "@rpcbase/form"
+
+import {requestSchema, RequestPayload} from "../../api/sign-up"
+
+
+export const SignUpForm = ({
+  children,
+  className
+}: {
+  children: ReactNode,
+  className?: string
+}) => {
+
+  const methods = useForm<RequestPayload>({
+    defaultValues: {
+      email_or_phone: "",
+      password: "",
+      password_confirmation: "",
+    },
+    resolver: zodResolver(requestSchema)
+  })
+
+  const onSubmit = async(data: RequestPayload, event) => {
+    console.log("SUBMIT SIGNUp", data)
+  }
+
+  useEffect(() => {
+    console.log(methods.formState.errors)
+  }, [methods.formState.errors])
+
+  useEffect(() => {
+    // console.log("FOR5M", methods.formState.values)
+  }, [methods.formState.values])
+
+  return (
+    <FormProvider {...methods}>
+      <form method="post" className={className} onSubmit={methods.handleSubmit(onSubmit)}>
+        {children}
+      </form>
+    </FormProvider>
+  )
+}

package/src/components/index.ts

@@ -1,4 +1,6 @@
+export * from "./AuthLayout"
 export * from "./AppleSignInButton"
 export * from "./EmailOrPhoneInput"
 export * from "./SignInForm"
+export * from "./SignUpForm"
 export * from "./RememberMeCheckbox"