wip try fix auth

apps/web/src/app/layout.tsx

@@ -15,7 +15,7 @@ export const viewport = {
   userScalable: 1,
 };
 
-export default async function RootLayout({
+export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;

apps/web/src/app/providers.tsx

@@ -6,14 +6,15 @@ import { TooltipProvider } from '@/components/ui/tooltip';
 import { ModalProvider } from '@/modals';
 import type { AppStore } from '@/redux';
 import makeStore from '@/redux';
-import { ClerkProvider } from '@clerk/nextjs';
+import { ClerkProvider, useAuth } from '@clerk/nextjs';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { httpLink } from '@trpc/client';
 import { Provider as ReduxProvider } from 'react-redux';
 import { Toaster } from 'sonner';
 import superjson from 'superjson';
 
-export default function Providers({ children }: { children: React.ReactNode }) {
+function AllProviders({ children }: { children: React.ReactNode }) {
+  const { getToken } = useAuth();
   const [queryClient] = useState(
     () =>
       new QueryClient({
@@ -32,6 +33,9 @@ export default function Providers({ children }: { children: React.ReactNode }) {
       links: [
         httpLink({
           url: `${process.env.NEXT_PUBLIC_DASHBOARD_URL}/api/trpc`,
+          async headers() {
+            return { Authorization: `Bearer ${await getToken()}` };
+          },
         }),
       ],
     })
@@ -44,7 +48,6 @@ export default function Providers({ children }: { children: React.ReactNode }) {
   }
 
   return (
-    <ClerkProvider>
     <ReduxProvider store={storeRef.current}>
       <api.Provider client={trpcClient} queryClient={queryClient}>
         <QueryClientProvider client={queryClient}>
@@ -56,6 +59,13 @@ export default function Providers({ children }: { children: React.ReactNode }) {
         </QueryClientProvider>
       </api.Provider>
     </ReduxProvider>
+  );
+}
+
+export default function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <ClerkProvider>
+      <AllProviders>{children}</AllProviders>
     </ClerkProvider>
   );
 }

apps/web/src/middleware.ts

@@ -5,6 +5,7 @@ import { authMiddleware } from '@clerk/nextjs';
 // See https://clerk.com/docs/references/nextjs/auth-middleware for more information about configuring your Middleware
 export default authMiddleware({
   publicRoutes: ['/share/overview/:id', '/api/trpc(.*)'],
+  debug: true,
 });
 
 export const config = {