franpcode/create-better-t-stack
1
0
Fork 0
mirror of https://github.com/FranP-code/create-better-t-stack.git synced 2025-10-12 23:52:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Aman Varshney
2025-08-29 00:21:08 +05:30
committed by GitHub
parent 8d48ae0359
commit 54bcdf1cbc
153 changed files with 1954 additions and 771 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>
);

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

@@ -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}>

1
apps/cli/templates/frontend/native/nativewind/package.json.hbs
View File

@@ -22,6 +22,7 @@
{{/if}}
"expo": "^53.0.4",
"expo-constants": "~17.1.4",
"expo-crypto": "~14.1.5",
"expo-linking": "~7.1.4",
"expo-navigation-bar": "~4.2.3",
"expo-router": "~5.0.3",

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

@@ -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>
);

35
apps/cli/templates/frontend/native/unistyles/app/_layout.tsx.hbs
View File

@@ -9,6 +9,11 @@ import { queryClient } from "@/utils/orpc";
{{/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";
@@ -34,6 +39,35 @@ 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}>
<GestureHandlerRootView style=\{{ flex: 1 }}>
<Stack
screenOptions=\{{
headerStyle: {
backgroundColor: theme.colors.background,
},
headerTitleStyle: {
color: theme.colors.foreground,
},
headerTintColor: theme.colors.foreground,
}}
>
<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>
</ConvexProviderWithClerk>
</ClerkProvider>
{{else}}
<ConvexProvider client={convex}>
<GestureHandlerRootView style=\{{ flex: 1 }}>
<Stack
@@ -55,6 +89,7 @@ export default function RootLayout() {
</Stack>
</GestureHandlerRootView>
</ConvexProvider>
{{/if}}
{{else}}
{{#unless (eq api "none")}}
<QueryClientProvider client={queryClient}>

1
apps/cli/templates/frontend/native/unistyles/package.json.hbs
View File

@@ -21,6 +21,7 @@
"babel-plugin-react-compiler": "^19.1.0-rc.2",
"expo": "^53.0.17",
"expo-constants": "~17.1.7",
"expo-crypto": "~14.1.5",
"expo-linking": "~7.1.7",
"expo-router": "~5.1.3",
"expo-secure-store": "~14.2.3",

6
apps/cli/templates/frontend/nuxt/app/components/Header.vue.hbs
View File

@@ -1,12 +1,12 @@
<script setup lang="ts">
import ModeToggle from './ModeToggle.vue'
{{#if auth}}
{{#if (eq auth "better-auth")}}
import UserMenu from './UserMenu.vue'
{{/if}}
const links = [
{ to: "/", label: "Home" },
{{#if auth}}
{{#if (or (eq auth "better-auth") (eq auth "clerk"))}}
{ to: "/dashboard", label: "Dashboard" },
{{/if}}
{{#if (includes examples "todo")}}
@@ -34,7 +34,7 @@ const links = [
</nav>
<div class="flex items-center gap-2">
<ModeToggle />
{{#if auth}}
{{#if (eq auth "better-auth")}}
<UserMenu />
{{/if}}
</div>

38
apps/cli/templates/frontend/react/next/src/app/layout.tsx.hbs
View File

@@ -1,7 +1,8 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "../index.css";
import Providers from "@/components/providers";
{{#if (eq auth "clerk")}}{{#if (eq backend "convex")}}import { ClerkProvider } from "@clerk/nextjs";
{{/if}}{{/if}}import Providers from "@/components/providers";
import Header from "@/components/header";
const geistSans = Geist({
@@ -24,18 +25,25 @@ export default function RootLayout({
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en" suppressHydrationWarning>
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
<Providers>
<div className="grid grid-rows-[auto_1fr] h-svh">
<Header />
{children}
</div>
</Providers>
</body>
</html>
);
return (
<html lang="en" suppressHydrationWarning>
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{{#if (and (eq auth "clerk") (eq backend "convex"))}}<ClerkProvider>
<Providers>
<div className="grid grid-rows-[auto_1fr] h-svh">
<Header />
{children}
</div>
</Providers>
</ClerkProvider>{{else}}<Providers>
<div className="grid grid-rows-[auto_1fr] h-svh">
<Header />
{children}
</div>
</Providers>{{/if}}
</body>
</html>
);
}

12
apps/cli/templates/frontend/react/next/src/components/providers.tsx.hbs
View File

@@ -1,7 +1,13 @@
"use client";
{{#if (eq backend "convex")}}
{{#if (eq auth "clerk")}}
import { useAuth } from "@clerk/nextjs";
import { ConvexReactClient } from "convex/react";
import { ConvexProviderWithClerk } from "convex/react-clerk";
{{else}}
import { ConvexProvider, ConvexReactClient } from "convex/react";
{{/if}}
{{else}}
{{#unless (eq api "none")}}
import { QueryClientProvider } from "@tanstack/react-query";
@@ -34,7 +40,13 @@ export default function Providers({
disableTransitionOnChange
>
{{#if (eq backend "convex")}}
{{#if (eq auth "clerk")}}
<ConvexProviderWithClerk client={convex} useAuth={useAuth}>
{children}
</ConvexProviderWithClerk>
{{else}}
<ConvexProvider client={convex}>{children}</ConvexProvider>
{{/if}}
{{else}}
{{#unless (eq api "none")}}
<QueryClientProvider client={queryClient}>

29
apps/cli/templates/frontend/react/react-router/src/root.tsx.hbs
View File

@@ -13,7 +13,13 @@ import { ThemeProvider } from "./components/theme-provider";
import { Toaster } from "./components/ui/sonner";
{{#if (eq backend "convex")}}
import { ConvexProvider, ConvexReactClient } from "convex/react";
import { ConvexReactClient } from "convex/react";
{{#if (eq auth "clerk")}}
import { ClerkProvider, useAuth } from "@clerk/clerk-react";
import { ConvexProviderWithClerk } from "convex/react-clerk";
{{else}}
import { ConvexProvider } from "convex/react";
{{/if}}
{{else}}
{{#unless (eq api "none")}}
import { QueryClientProvider } from "@tanstack/react-query";
@@ -60,6 +66,26 @@ export default function App() {
const convex = new ConvexReactClient(
import.meta.env.VITE_CONVEX_URL as string,
);
{{#if (eq auth "clerk")}}
return (
<ClerkProvider publishableKey={import.meta.env.VITE_CLERK_PUBLISHABLE_KEY}>
<ConvexProviderWithClerk client={convex} useAuth={useAuth}>
<ThemeProvider
attribute="class"
defaultTheme="dark"
disableTransitionOnChange
storageKey="vite-ui-theme"
>
<div className="grid grid-rows-[auto_1fr] h-svh">
<Header />
<Outlet />
</div>
<Toaster richColors />
</ThemeProvider>
</ConvexProviderWithClerk>
</ClerkProvider>
);
{{else}}
return (
<ConvexProvider client={convex}>
<ThemeProvider
@@ -76,6 +102,7 @@ export default function App() {
</ThemeProvider>
</ConvexProvider>
);
{{/if}}
}
{{else if (eq api "orpc")}}
export default function App() {

20
apps/cli/templates/frontend/react/tanstack-router/src/main.tsx.hbs
View File

@@ -12,7 +12,13 @@ import { routeTree } from "./routeTree.gen";
import { queryClient, trpc } from "./utils/trpc";
{{/if}}
{{#if (eq backend "convex")}}
import { ConvexProvider, ConvexReactClient } from "convex/react";
import { ConvexReactClient } from "convex/react";
{{#if (eq auth "clerk")}}
import { ClerkProvider, useAuth } from "@clerk/clerk-react";
import { ConvexProviderWithClerk } from "convex/react-clerk";
{{else}}
import { ConvexProvider } from "convex/react";
{{/if}}
const convex = new ConvexReactClient(import.meta.env.VITE_CONVEX_URL as string);
{{/if}}
@@ -41,7 +47,19 @@ const router = createRouter({
{{else if (eq backend "convex")}}
context: {},
Wrap: function WrapComponent({ children }: { children: React.ReactNode }) {
{{#if (eq auth "clerk")}}
return (
<ClerkProvider
publishableKey={import.meta.env.VITE_CLERK_PUBLISHABLE_KEY}
>
<ConvexProviderWithClerk client={convex} useAuth={useAuth}>
{children}
</ConvexProviderWithClerk>
</ClerkProvider>
);
{{else}}
return <ConvexProvider client={convex}>{children}</ConvexProvider>;
{{/if}}
},
{{else}}
context: {},

12
apps/cli/templates/frontend/react/tanstack-start/src/router.tsx.hbs
View File

@@ -3,7 +3,7 @@ import { createRouter as createTanStackRouter } from "@tanstack/react-router";
import { QueryClient } from "@tanstack/react-query";
import { routerWithQueryClient } from "@tanstack/react-router-with-query";
import { ConvexQueryClient } from "@convex-dev/react-query";
import { ConvexProvider } from "convex/react";
import { ConvexProvider, ConvexReactClient } from "convex/react";
import { routeTree } from "./routeTree.gen";
import Loader from "./components/loader";
import "./index.css";
@@ -31,7 +31,11 @@ export function createRouter() {
if (!CONVEX_URL) {
console.error("missing envar VITE_CONVEX_URL");
}
const convexQueryClient = new ConvexQueryClient(CONVEX_URL);
const convex = new ConvexReactClient(CONVEX_URL, {
unsavedChangesWarning: false,
});
const convexQueryClient = new ConvexQueryClient(convex);
const queryClient: QueryClient = new QueryClient({
defaultOptions: {
@@ -49,7 +53,7 @@ export function createRouter() {
defaultPreload: "intent",
defaultPendingComponent: () => <Loader />,
defaultNotFoundComponent: () => <div>Not Found</div>,
context: { queryClient },
context: { queryClient, convexClient: convex, convexQueryClient },
Wrap: ({ children }) => (
<ConvexProvider client={convexQueryClient.convexClient}>
{children}
@@ -82,7 +86,7 @@ const trpcClient = createTRPCClient<AppRouter>({
links: [
httpBatchLink({
url: `${import.meta.env.VITE_SERVER_URL}/trpc`,
{{#if auth}}
{{#if (eq auth "better-auth")}}
fetch(url, options) {
return fetch(url, {
...options,

57
apps/cli/templates/frontend/react/tanstack-start/src/routes/__root.tsx.hbs
View File

@@ -8,22 +8,37 @@ import {
Scripts,
createRootRouteWithContext,
useRouterState,
useRouteContext,
} from "@tanstack/react-router";
import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
import Header from "../components/header";
import appCss from "../index.css?url";
{{#if (eq backend "convex")}}
import type { QueryClient } from "@tanstack/react-query";
{{else}}
{{#unless (eq api "none")}}
import type { QueryClient } from "@tanstack/react-query";
{{/unless}}
import type { ConvexQueryClient } from "@convex-dev/react-query";
import type { ConvexReactClient } from "convex/react";
{{/if}}
import Loader from "@/components/loader";
{{#if (and (eq backend "convex") (eq auth "clerk"))}}
import { ClerkProvider, useAuth } from "@clerk/tanstack-react-start";
import { getAuth } from "@clerk/tanstack-react-start/server";
import { createServerFn } from "@tanstack/react-start";
import { getWebRequest } from "@tanstack/react-start/server";
import { ConvexProviderWithClerk } from "convex/react-clerk";
const fetchClerkAuth = createServerFn({ method: "GET" }).handler(async () => {
const auth = await getAuth(getWebRequest());
const token = await auth.getToken({ template: "convex" });
return { userId: auth.userId, token };
});
{{/if}}
{{#if (eq backend "convex")}}
export interface RouterAppContext {
queryClient: QueryClient;
convexClient: ConvexReactClient;
convexQueryClient: ConvexQueryClient;
}
{{else}}
{{#if (eq api "trpc")}}
@@ -68,11 +83,42 @@ export const Route = createRootRouteWithContext<RouterAppContext>()({
}),
component: RootDocument,
{{#if (and (eq backend "convex") (eq auth "clerk"))}}
beforeLoad: async (ctx) => {
const { userId, token } = await fetchClerkAuth();
if (token) {
ctx.context.convexQueryClient.serverHttpClient?.setAuth(token);
}
return { userId, token };
},
{{/if}}
});
function RootDocument() {
const isFetching = useRouterState({ select: (s) => s.isLoading });
{{#if (and (eq backend "convex") (eq auth "clerk"))}}
const context = useRouteContext({ from: Route.id });
return (
<ClerkProvider>
<ConvexProviderWithClerk client={context.convexClient} useAuth={useAuth}>
<html lang="en" className="dark">
<head>
<HeadContent />
</head>
<body>
<div className="grid h-svh grid-rows-[auto_1fr]">
<Header />
{isFetching ? <Loader /> : <Outlet />}
</div>
<Toaster richColors />
<TanStackRouterDevtools position="bottom-left" />
<Scripts />
</body>
</html>
</ConvexProviderWithClerk>
</ClerkProvider>
);
{{else}}
return (
<html lang="en" className="dark">
<head>
@@ -94,4 +140,5 @@ function RootDocument() {
</body>
</html>
);
{{/if}}
}

6
apps/cli/templates/frontend/react/web-base/src/components/header.tsx.hbs
View File

@@ -9,14 +9,14 @@ import { Link } from "@tanstack/react-router";
{{#unless (includes frontend "tanstack-start")}}
import { ModeToggle } from "./mode-toggle";
{{/unless}}
{{#if auth}}
{{#if (eq auth "better-auth")}}
import UserMenu from "./user-menu";
{{/if}}
export default function Header() {
const links = [
{ to: "/", label: "Home" },
{{#if auth}}
{{#if (or (eq auth "better-auth") (eq auth "clerk"))}}
{ to: "/dashboard", label: "Dashboard" },
{{/if}}
{{#if (includes examples "todo")}}
@@ -67,7 +67,7 @@ export default function Header() {
{{#unless (includes frontend "tanstack-start")}}
<ModeToggle />
{{/unless}}
{{#if auth}}
{{#if (eq auth "better-auth")}}
<UserMenu />
{{/if}}
</div>

6
apps/cli/templates/frontend/solid/src/components/header.tsx.hbs
View File

@@ -1,5 +1,5 @@
import { Link } from "@tanstack/solid-router";
{{#if auth}}
{{#if (eq auth "better-auth")}}
import UserMenu from "./user-menu";
{{/if}}
import { For } from "solid-js";
@@ -7,7 +7,7 @@ import { For } from "solid-js";
export default function Header() {
const links = [
{ to: "/", label: "Home" },
{{#if auth}}
{{#if (eq auth "better-auth")}}
{ to: "/dashboard", label: "Dashboard" },
{{/if}}
{{#if (includes examples "todo")}}
@@ -27,7 +27,7 @@ export default function Header() {
</For>
</nav>
<div class="flex items-center gap-2">
{{#if auth}}
{{#if (eq auth "better-auth")}}
<UserMenu />
{{/if}}
</div>

6
apps/cli/templates/frontend/svelte/src/components/Header.svelte.hbs
View File

@@ -1,11 +1,11 @@
<script lang="ts">
{{#if auth}}
{{#if (eq auth "better-auth")}}
import UserMenu from './UserMenu.svelte';
{{/if}}
const links = [
{ to: "/", label: "Home" },
{{#if auth}}
{{#if (eq auth "better-auth")}}
{ to: "/dashboard", label: "Dashboard" },
{{/if}}
{{#if (includes examples "todo")}}
@@ -31,7 +31,7 @@
{/each}
</nav>
<div class="flex items-center gap-2">
{{#if auth}}
{{#if (eq auth "better-auth")}}
<UserMenu />
{{/if}}
</div>