Add OTP sign-in option + Account Linking (#276)

* feat(accounts): allow linking email password
* feat(auth): add OTP sign-in
* refactor(accounts): remove 'sonner' dependency and update toast imports
* feat(supabase): enable analytics and configure database seeding
* feat(auth): update email templates and add OTP template
* feat(auth): add last sign in method hints
* feat(config): add devIndicators position to bottom-right
* feat(auth): implement comprehensive last authentication method tracking tests

packages/ui/package.json

@@ -9,7 +9,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@hookform/resolvers": "^5.1.0",
+    "@hookform/resolvers": "^5.1.1",
     "@radix-ui/react-accordion": "1.2.11",
     "@radix-ui/react-alert-dialog": "^1.1.14",
     "@radix-ui/react-avatar": "^1.1.10",
@@ -33,19 +33,19 @@
     "clsx": "^2.1.1",
     "cmdk": "1.1.1",
     "input-otp": "1.4.2",
-    "lucide-react": "^0.513.0",
+    "lucide-react": "^0.514.0",
     "react-top-loading-bar": "3.0.2",
     "recharts": "2.15.3",
-    "tailwind-merge": "^3.3.0"
+    "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {
     "@kit/eslint-config": "workspace:*",
     "@kit/prettier-config": "workspace:*",
     "@kit/tsconfig": "workspace:*",
     "@radix-ui/react-icons": "^1.3.2",
-    "@tanstack/react-query": "5.80.6",
+    "@tanstack/react-query": "5.80.7",
     "@tanstack/react-table": "^8.21.3",
-    "@types/react": "19.1.6",
+    "@types/react": "19.1.8",
     "@types/react-dom": "19.1.6",
     "class-variance-authority": "^0.7.1",
     "date-fns": "^4.1.0",
@@ -55,12 +55,12 @@
     "prettier": "^3.5.3",
     "react-day-picker": "^9.7.0",
     "react-hook-form": "^7.57.0",
-    "react-i18next": "^15.5.2",
+    "react-i18next": "^15.5.3",
     "sonner": "^2.0.5",
-    "tailwindcss": "4.1.8",
+    "tailwindcss": "4.1.10",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.8.3",
-    "zod": "^3.25.56"
+    "zod": "^3.25.63"
   },
   "prettier": "@kit/prettier-config",
   "imports": {
@@ -129,7 +129,8 @@
     "./multi-step-form": "./src/makerkit/multi-step-form.tsx",
     "./app-breadcrumbs": "./src/makerkit/app-breadcrumbs.tsx",
     "./empty-state": "./src/makerkit/empty-state.tsx",
-    "./marketing": "./src/makerkit/marketing/index.tsx"
+    "./marketing": "./src/makerkit/marketing/index.tsx",
+    "./oauth-provider-logo-image": "./src/makerkit/oauth-provider-logo-image.tsx"
   },
   "typesVersions": {
     "*": {

packages/ui/src/makerkit/oauth-provider-logo-image.tsx

@@ -0,0 +1,63 @@
+import Image from 'next/image';
+
+import { AtSign, Phone } from 'lucide-react';
+
+const DEFAULT_IMAGE_SIZE = 18;
+
+export function OauthProviderLogoImage({
+  providerId,
+  width,
+  height,
+}: {
+  providerId: string;
+  width?: number;
+  height?: number;
+}) {
+  const image = getOAuthProviderLogos()[providerId];
+
+  if (typeof image === `string`) {
+    return (
+      <Image
+        decoding={'async'}
+        loading={'lazy'}
+        src={image}
+        alt={`${providerId} logo`}
+        width={width ?? DEFAULT_IMAGE_SIZE}
+        height={height ?? DEFAULT_IMAGE_SIZE}
+      />
+    );
+  }
+
+  return <>{image}</>;
+}
+
+function getOAuthProviderLogos(): Record<string, string | React.ReactNode> {
+  return {
+    email: <AtSign className={'size-[18px]'} />,
+    phone: <Phone className={'size-[18x]'} />,
+    google: '/images/oauth/google.webp',
+    facebook: '/images/oauth/facebook.webp',
+    github: '/images/oauth/github.webp',
+    microsoft: '/images/oauth/microsoft.webp',
+    apple: '/images/oauth/apple.webp',
+    twitter: <XLogo />,
+    // add more logos here if needed
+  };
+}
+
+function XLogo() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 300 300"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        className={'fill-secondary-foreground'}
+        d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66"
+      />
+    </svg>
+  );
+}

packages/ui/src/makerkit/page.tsx

@@ -46,11 +46,7 @@ function PageWithSidebar(props: PageProps) {
       >
         {MobileNavigation}
 
-        <div
-          className={
-            'bg-background flex flex-1 flex-col px-4 lg:px-0'
-          }
-        >
+        <div className={'bg-background flex flex-1 flex-col px-4 lg:px-0'}>
           {Children}
         </div>
       </div>