@rpcbase/auth 0.0.0

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@rpcbase/auth",
+  "version": "0.0.0",
+  "type": "module",
+  "main": "./src/index.ts",
+  "scripts": {
+    "build": "tsc --watch",
+    "release": "wireit"
+  },
+  "wireit": {
+    "release": {
+      "command": "../../scripts/publish.js",
+      "dependencies": [],
+      "files": [
+        "package.json"
+      ],
+      "output": [],
+      "env": {
+        "NPM_RELEASE_CHANNEL": {
+          "external": true
+        }
+      }
+    }
+  },
+  "dependencies": {
+    "@rpcbase/ui": "0.0.0"
+  },
+  "devDependencies": {}
+}

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

@@ -0,0 +1,53 @@
+// 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 SignIn from "./index"
+
+
+const signIn = async(payload: SignIn.RequestPayload, ctx: Ctx): Promise<SignIn.ResponsePayload> => {
+  const User = await loadModel("User", ctx)
+
+  const {email_or_phone} = SignIn.requestSchema.parse(payload)
+
+  if (isEmail(email_or_phone)) {
+    console.log("is valid email")
+  } else {
+    console.log("is not valid email")
+  }
+
+  return {success: true}
+
+  // console.log("will lookup user", email)
+  // const user = await User.findOne({email})
+
+  // if (!user) {
+  //   console.log("user not found", email)
+  //   return { success: false }
+  // }
+
+  // console.log("found user", user._id.toString())
+
+  // console.time("checkPassword")
+  // const [salt, hashedPassword] = user.password.split(":")
+  // const derivedKey = await hashPassword(password, salt)
+  // const passwordMatches = crypto.timingSafeEqual(Buffer.from(hashedPassword, "hex"), derivedKey)
+  // console.timeEnd("checkPassword")
+
+  // ctx.req.session.user = {
+  //   id: user._id.toString(),
+  //   current_tenant_id: user.tenants[0],
+  //   // TODO: handle multiple tenants
+  //   signed_in_tenants: [user.tenants[0]],
+  // }
+
+  // return {
+  //   success: passwordMatches
+  // }
+}
+
+export default (api: Api) => {
+  api.post(SignIn.Route, signIn as ApiHandler)
+}

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

@@ -0,0 +1,28 @@
+import { z } from "zod"
+import { isValidNumber } from "libphonenumber-js"
+
+export const Route = "/api/rb/auth/sign-in"
+
+export const requestSchema = z.object({
+  email_or_phone: z
+    .string()
+    .nonempty("Email or phone number is required")
+    .default("")
+    .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"
+    ),
+  remember_me: z.boolean().default(true),
+})
+
+export type RequestPayload = z.infer<typeof requestSchema>
+
+export const responseSchema = z.object({
+  success: z.boolean(),
+})
+
+export type ResponsePayload = z.infer<typeof responseSchema>

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

@@ -0,0 +1,17 @@
+import { Api, Ctx, ApiHandler } from "@rpcbase/api"
+
+import * as SignOut from "./index"
+
+
+const handleSignOut = async(_: SignOut.RequestPayload, ctx: Ctx): Promise<SignOut.ResponsePayload> => {
+  // Destroy the session
+  await new Promise<void>((resolve) => ctx.req.session.destroy(() => resolve()))
+
+  return {
+    success: true
+  }
+}
+
+export default (api: Api) => {
+  api.post(SignOut.Route, handleSignOut as ApiHandler)
+}

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

@@ -0,0 +1,14 @@
+import { z } from "zod"
+
+export const Route = "/api/rb/auth/sign-out"
+
+// No request payload needed for signout
+export const requestSchema = z.object({})
+
+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/AppleSignInButton/index.tsx

@@ -0,0 +1,36 @@
+import clsx from "clsx"
+
+export const AppleSignInButton = ({
+  onPress,
+  className,
+}: {
+  onPress: () => void;
+  className?: string;
+}) => {
+
+  return (
+    <button
+      onClick={onPress}
+      className={clsx(`
+        w-full
+        bg-black text-white hover:bg-gray-800
+        flex items-center justify-center
+        px-6 py-2
+        rounded-lg
+        font-medium
+        transition duration-150 ease-in-out
+        focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black
+      `, className)}
+    >
+      <svg
+        className="w-5 h-5 mr-3"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="white"
+      >
+        <path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.539 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701" />
+      </svg>
+      Continuer avec Apple
+    </button>
+  )
+}

package/src/components/EmailOrPhoneInput/index.tsx

@@ -0,0 +1,32 @@
+import {useFormContext} from "@rpcbase/form"
+
+export const EmailOrPhoneInput = ({
+  id,
+  className,
+  placeholder,
+}: {
+  id: string
+  className?: string
+  placeholder?: string
+}) => {
+  const {register, formState} = useFormContext()
+
+  const error = formState.errors.email_or_phone
+
+  // console.log("ERRR", errors)
+
+  return (
+    <>
+      <input
+        id={id}
+        type="text"
+        required
+        autoComplete="on"
+        className={className}
+        placeholder={placeholder}
+        {...register("email_or_phone")}
+      />
+      {error && <p className="mt-1 -mb-2 text-sm/6 text-red-500">{error.message}</p>}
+    </>
+  )
+}

package/src/components/RememberMeCheckbox/index.tsx

@@ -0,0 +1,27 @@
+import {ComponentType} from "react"
+import {useFormContext} from "@rpcbase/form"
+
+export const RememberMeCheckbox = ({
+  label,
+  as: Component = "input"
+}: {
+  label: string,
+  as?: ComponentType<any> | string
+}) => {
+  const {register, formState} = useFormContext()
+
+  return (
+    <>
+      <Component
+        id="remember_me"
+        {...register("remember_me")}
+      />
+      <label
+        htmlFor={"remember_me"}
+        className="pl-3 block text-sm/6 text-gray-900"
+      >
+        {label}
+      </label>
+    </>
+  )
+}

package/src/components/SignInForm/index.tsx

@@ -0,0 +1,42 @@
+import {ReactNode, useEffect} from "react"
+import { useForm, FormProvider, zodResolver } from "@rpcbase/form"
+
+import {requestSchema, RequestPayload} from "../../api/sign-in"
+
+
+export const SignInForm = ({
+  children,
+  className
+}: {
+  children: ReactNode,
+  className?: string
+}) => {
+
+  const methods = useForm<RequestPayload>({
+    defaultValues: {
+      email_or_phone: "",
+      remember_me: true,
+    },
+    resolver: zodResolver(requestSchema)
+  })
+
+  const onSubmit = async(data: RequestPayload, event) => {
+    console.log("SUBMIT SIGNIN", 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

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

package/src/index.ts

@@ -0,0 +1 @@
+export * from "./components"