Skip to main content

​
Whop SDK

The whop sdk is available for use in the react native app out of the box. Using this you can fetch data within the scope of the current user.
We recommend using the useQuery hook from @tanstack/react-query to fetch data.
import { whopSdk } from "@whop/react-native";
import { useQuery } from "@tanstack/react-query";

export function MyComponent() {
  const { data: user } = useQuery({
    queryKey: ["user"],
    queryFn: () => whopSdk.users.getCurrentUser(),
  });

  return <Text>{user?.name}</Text>;
}
Some operations are only available on the server, so make sure you call those from your api. Check out the SDK reference to see which ones have the “server only” flag.

​
Making authenticated requests

You can make authenticated requests to your API by using the same proxy infrastructure used for existing web apps.
  1. Set your API origin as the Base URL in the developer dashboard
Base URL
  1. Create your API endpoint
app/api/user/route.ts
import { whopSdk } from "@/lib/whop";

export async function GET(request: Request) {
  const { userId } = await whopSdk.verifyUserToken(request.headers);

  const user = await whopSdk.users.getUser({ userId });

  return Response.json(user, { status: 200 });
}
See the Set up the API client page for how to configure the SDK.
  1. Make a fetch request to your API endpoint from your react native app using the returned apiOrigin from __internal_execSync("getAppApiOrigin", {})
It’s important to use the apiOrigin to make authenticated requests to your API endpoints.
import { useQuery } from "@tanstack/react-query";
import { __internal_execSync } from "@whop/react-native";
import { Text } from "react-native";

const { apiOrigin } = __internal_execSync("getAppApiOrigin", {});

export function User() {
  const { data: user, isPending } = useQuery({
    queryKey: ["user"],
    queryFn: () => fetch(`${apiOrigin}/api/user`).then((res) => res.json()),
  });

  if (isPending) {
    return <Text>Loading...</Text>;
  }

  return <Text>{user?.name}</Text>;
}

​
Examples

​
Check for access to an experience

import { useQuery } from "@tanstack/react-query";
import { __internal_execSync } from "@whop/react-native";
import { Text } from "react-native";

const { apiOrigin } = __internal_execSync("getAppApiOrigin", {});

export function ProtectedComponent({ experienceId }: { experienceId: string }) {
  const { data: access, isPending } = useQuery({
    queryKey: ["access", experienceId],
    queryFn: () =>
      fetch(
        `${apiOrigin}/api/access/experience?experienceId=${experienceId}`,
      ).then((res) => res.json()),
  });

  if (isPending) {
    return <Text>Loading...</Text>;
  }

  if (!access?.hasAccess) {
    return <Text>Forbidden</Text>;
  }

  return <Text>{JSON.stringify(access)}</Text>;
}

​
Check for access to a company

import { useQuery } from "@tanstack/react-query";
import { __internal_execSync } from "@whop/react-native";
import { Text } from "react-native";

const { apiOrigin } = __internal_execSync("getAppApiOrigin", {});

export function ProtectedComponent({ companyId }: { companyId: string }) {
  const { data: access, isPending } = useQuery({
    queryKey: ["access", companyId],
    queryFn: () =>
      fetch(`${apiOrigin}/api/access/company?companyId=${companyId}`).then(
        (res) => res.json(),
      ),
  });

  if (isPending) {
    return <Text>Loading...</Text>;
  }

  if (access?.accessLevel !== "admin") {
    return <Text>Forbidden</Text>;
  }

  return <Text>{JSON.stringify(access)}</Text>;
}
⌘I