feat: add clerk auth support with convex (#548)

apps/cli/templates/frontend/native/nativewind/app/(drawer)/index.tsx.hbs

@@ -9,9 +9,17 @@ import { useQuery } from "@tanstack/react-query";
 import { trpc } from "@/utils/trpc";
 {{/if}}
 {{#if (eq backend "convex")}}
+{{#if (eq auth "clerk")}}
+import { Link } from "expo-router";
+import { Authenticated, AuthLoading, Unauthenticated, useQuery } from "convex/react";
+import { api } from "@{{ projectName }}/backend/convex/_generated/api";
+import { useUser } from "@clerk/clerk-expo";
+import { SignOutButton } from "@/components/sign-out-button";
+{{else}}
 import { useQuery } from "convex/react";
 import { api } from "@{{ projectName }}/backend/convex/_generated/api";
 {{/if}}
+{{/if}}
 
 export default function Home() {
   {{#if (eq api "orpc")}}
@@ -21,21 +29,27 @@ export default function Home() {
   const healthCheck = useQuery(trpc.healthCheck.queryOptions());
   {{/if}}
   {{#if (eq backend "convex")}}
+  {{#if (eq auth "clerk")}}
+  const { user } = useUser();
   const healthCheck = useQuery(api.healthCheck.get);
+  const privateData = useQuery(api.privateData.get);
+  {{else}}
+  const healthCheck = useQuery(api.healthCheck.get);
+  {{/if}}
   {{/if}}
 
   return (
     <Container>
       <ScrollView showsVerticalScrollIndicator={false} className="flex-1">
         <Text className="font-mono text-foreground text-3xl font-bold mb-4">
-			BETTER T STACK
-		</Text>
+          BETTER T STACK
+        </Text>
         <View className="bg-card border border-border rounded-xl p-6 mb-6 shadow-sm">
           {{#if (eq backend "convex")}}
           <View className="flex-row items-center gap-3">
             <View
               className={`h-3 w-3 rounded-full ${
-                  healthCheck ? "bg-green-500" : "bg-orange-500"
+                healthCheck ? "bg-green-500" : "bg-orange-500"
               }`}
             />
             <View className="flex-1">
@@ -89,6 +103,24 @@ export default function Home() {
             {{/unless}}
           {{/if}}
         </View>
+        {{#if (and (eq backend "convex") (eq auth "clerk"))}}
+        <Authenticated>
+          <Text>Hello {user?.emailAddresses[0].emailAddress}</Text>
+          <Text>Private Data: {privateData?.message}</Text>
+          <SignOutButton />
+        </Authenticated>
+        <Unauthenticated>
+          <Link href="/(auth)/sign-in">
+            <Text>Sign in</Text>
+          </Link>
+          <Link href="/(auth)/sign-up">
+            <Text>Sign up</Text>
+          </Link>
+        </Unauthenticated>
+        <AuthLoading>
+          <Text>Loading...</Text>
+        </AuthLoading>
+        {{/if}}
       </ScrollView>
     </Container>
   );

apps/cli/templates/frontend/native/nativewind/app/_layout.tsx.hbs

@@ -3,6 +3,11 @@ import "@/polyfills";
 {{/if}}
 {{#if (eq backend "convex")}}
 import { ConvexProvider, ConvexReactClient } from "convex/react";
+{{#if (eq auth "clerk")}}
+import { ClerkProvider, useAuth } from "@clerk/clerk-expo";
+import { ConvexProviderWithClerk } from "convex/react-clerk";
+import { tokenCache } from "@clerk/clerk-expo/token-cache";
+{{/if}}
 {{else}}
 {{#unless (eq api "none")}}
 import { QueryClientProvider } from "@tanstack/react-query";
@@ -72,6 +77,28 @@ export default function RootLayout() {
   }
   return (
     {{#if (eq backend "convex")}}
+    {{#if (eq auth "clerk")}}
+    <ClerkProvider
+      tokenCache={tokenCache}
+      publishableKey={process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY}
+    >
+      <ConvexProviderWithClerk client={convex} useAuth={useAuth}>
+        <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
+          <StatusBar style={isDarkColorScheme ? "light" : "dark"} />
+          <GestureHandlerRootView style=\{{ flex: 1 }}>
+            <Stack>
+              <Stack.Screen name="(drawer)" options=\{{ headerShown: false }} />
+              <Stack.Screen name="(auth)" options=\{{ headerShown: false }} />
+              <Stack.Screen
+                name="modal"
+                options=\{{ title: "Modal", presentation: "modal" }}
+              />
+            </Stack>
+          </GestureHandlerRootView>
+        </ThemeProvider>
+      </ConvexProviderWithClerk>
+    </ClerkProvider>
+    {{else}}
     <ConvexProvider client={convex}>
       <ThemeProvider value={isDarkColorScheme ? DARK_THEME : LIGHT_THEME}>
         <StatusBar style={isDarkColorScheme ? "light" : "dark"} />
@@ -86,6 +113,7 @@ export default function RootLayout() {
         </GestureHandlerRootView>
       </ThemeProvider>
     </ConvexProvider>
+    {{/if}}
     {{else}}
     {{#unless (eq api "none")}}
     <QueryClientProvider client={queryClient}>