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

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

@@ -11,9 +11,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")}}
@@ -23,7 +31,13 @@ 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 (
@@ -105,6 +119,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>
   );