Unable to resolve "@convex-dev/auth/providers/Email"

[DaveVaval]

I want to setup OTP Authetication is an Expo app. I am following the documentation, and for some reason Metro is unable to resolve "@convex-dev/auth/providers/Email" from "convex/ResendOTP.ts".

In the code everything looks fine, no typescript import errors.

Has anyone been successful at implementing convex auth in Expo?

import { Email } from "@convex-dev/auth/providers/Email";
import { Resend as ResendAPI } from "resend";
import { RandomReader, generateRandomString } from "@oslojs/crypto/random";
 
export const ResendOTP = Email({
  id: "resend-otp",
  apiKey: process.env.AUTH_RESEND_KEY,
  maxAge: 60 * 15, // 15 minutes
  async generateVerificationToken() {
    const random: RandomReader = {
      read(bytes) {
        crypto.getRandomValues(bytes);
      },
    };
 
    const alphabet = "0123456789";
    const length = 8;
    return generateRandomString(random, alphabet, length);
  },
  async sendVerificationRequest({ identifier: email, provider, token }) {
    const resend = new ResendAPI(provider.apiKey);
    const { error } = await resend.emails.send({
      from: "My App <onboarding@resend.dev>",
      to: [email],
      subject: `Sign in to My App`,
      text: "Your code is " + token,
    });
 
    if (error) {
      throw new Error(JSON.stringify(error));
    }
  },
});

{
  "name": "vibe-check",
  "version": "1.0.0",
  "main": "expo-router/entry",
  "scripts": {
    "android": "bun expo run:android",
    "ios": "expo run:ios",
    "start": "expo start",
    "start:tunnel": "expo start --tunnel",
    "prebuild": "expo prebuild",
    "lint": "eslint \"**/*.{js,jsx,ts,tsx}\" && prettier -c \"**/*.{js,jsx,ts,tsx,json}\"",
    "format": "eslint \"**/*.{js,jsx,ts,tsx}\" --fix && prettier \"**/*.{js,jsx,ts,tsx,json}\" --write",
    "web": "expo start --web",
    "eas:dev:android": "eas build --platform android --profile development"
  },
  "dependencies": {
    "@auth/core": "0.37.0",
    "@convex-dev/auth": "^0.0.90",
    "@expo/vector-icons": "^15.0.2",
    "@gorhom/bottom-sheet": "^5",
    "@maplibre/maplibre-react-native": "^10.4.0",
    "@oslojs/crypto": "^1.0.1",
    "@react-navigation/native": "^7.1.6",
    "@rn-primitives/portal": "^1.3.0",
    "@rn-primitives/slot": "^1.2.0",
    "@vis.gl/react-maplibre": "^8.1.0",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "convex": "^1.29.2",
    "expo": "^54.0.0",
    "expo-constants": "~18.0.9",
    "expo-dev-client": "~6.0.18",
    "expo-linking": "~8.0.8",
    "expo-router": "~6.0.10",
    "expo-secure-store": "~15.0.7",
    "expo-status-bar": "~3.0.8",
    "expo-system-ui": "~6.0.7",
    "expo-web-browser": "~15.0.7",
    "nativewind": "latest",
    "react": "19.1.0",
    "react-dom": "19.1.0",
    "react-native": "0.81.5",
    "react-native-gesture-handler": "~2.28.0",
    "react-native-reanimated": "~4.1.1",
    "react-native-safe-area-context": "~5.6.0",
    "react-native-screens": "~4.16.0",
    "react-native-web": "^0.21.0",
    "react-native-worklets": "0.5.1",
    "resend": "^6.5.2",
    "tailwind-merge": "^3.4.0",
    "tailwindcss-animate": "^1.0.7",
    "zustand": "^4.5.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~19.1.10",
    "eslint": "^9.25.1",
    "eslint-config-expo": "~10.0.0",
    "eslint-config-prettier": "^10.1.2",
    "prettier": "^3.2.5",
    "tailwindcss": "^3.4.0",
    "prettier-plugin-tailwindcss": "^0.5.11",
    "typescript": "~5.9.2"
  },
  "private": true
}

[marlonschlosshauer]

I had a similar issue, pinning Resend to ^4.0.0 solved it for me.