Merge pull request #6 from clerkinc/post-clean-up

Post clean up

Author: perkinsjr

apps/expo/src/_app.tsx

@@ -1,25 +1,26 @@
 import { StatusBar } from "expo-status-bar";
 import React from "react";
 import { SafeAreaProvider } from "react-native-safe-area-context";
-import { TRPCAuthContext } from "./utils/trpc";
+import { TRPCProvider } from "./utils/trpc";
 
 import { HomeScreen } from "./screens/home";
 import { SignInScreen } from "./screens/signin";
 import { ClerkProvider, SignedIn, SignedOut } from "@clerk/clerk-expo";
 import { tokenCache } from "./utils/cache";
 
-const clerk_frontend_api = "clerk.open.sawfly-58.lcl.dev";
+// Find this in your Dashboard.
+const clerk_frontend_api = "YOUR_CLERK_FRONTEND_API";
 
 export const App = () => {
   return (
     <ClerkProvider frontendApi={clerk_frontend_api} tokenCache={tokenCache}>
       <SignedIn>
-        <TRPCAuthContext>
+        <TRPCProvider>
           <SafeAreaProvider>
             <HomeScreen />
             <StatusBar />
           </SafeAreaProvider>
-        </TRPCAuthContext>
+        </TRPCProvider>
       </SignedIn>
       <SignedOut>
         <SignInScreen />

apps/expo/src/utils/trpc.tsx

@@ -9,12 +9,11 @@ import Constants from "expo-constants";
  * A wrapper for your app that provides the TRPC context.
  * Use only in _app.tsx
  */
-import React, { useEffect } from "react";
+import React from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { httpBatchLink } from "@trpc/client";
 import { transformer } from "@acme/api/transformer";
 import { useAuth } from "@clerk/clerk-expo";
-import { Text } from "react-native";
 
 /**
  * A set of typesafe hooks for consuming your API.
@@ -35,17 +34,18 @@ const getBaseUrl = () => {
 
 export const TRPCProvider: React.FC<{
   children: React.ReactNode;
-  authToken: string | null;
-}> = ({ children, authToken }) => {
+}> = ({ children }) => {
+  const { getToken } = useAuth();
   const [queryClient] = React.useState(() => new QueryClient());
   const [trpcClient] = React.useState(() =>
     trpc.createClient({
       transformer,
       links: [
         httpBatchLink({
-          headers() {
+          async headers() {
+            const authToken = await getToken();
             return {
-              Authorization: authToken || "",
+              Authorization: authToken,
             };
           },
           url: `${getBaseUrl()}/api/trpc`,
@@ -60,19 +60,3 @@ export const TRPCProvider: React.FC<{
     </trpc.Provider>
   );
 };
-
-export const TRPCAuthContext: React.FC<{ children: React.ReactNode }> = ({
-  children,
-}) => {
-  const { getToken } = useAuth();
-  const [authToken, setAuthToken] = React.useState<string | null>(null);
-  useEffect(() => {
-    getToken().then((token) => {
-      setAuthToken(token);
-    });
-  }, []);
-
-  if (!authToken) return <Text>Loading</Text>;
-
-  return <TRPCProvider authToken={authToken}>{children}</TRPCProvider>;
-};

packages/api/src/router/post.ts

@@ -1,4 +1,4 @@
-import { router, publicProcedure } from "../trpc";
+import { router, publicProcedure, protectedProcedure } from "../trpc";
 import { z } from "zod";
 
 export const postRouter = router({
@@ -8,7 +8,7 @@ export const postRouter = router({
   byId: publicProcedure.input(z.string()).query(({ ctx, input }) => {
     return ctx.prisma.post.findFirst({ where: { id: input } });
   }),
-  create: publicProcedure
+  create: protectedProcedure
     .input(z.object({ title: z.string(), content: z.string() }))
     .mutation(({ ctx, input }) => {
       return ctx.prisma.post.create({ data: input });