Auth Flow

// frontend/src/app/layout.jsx
import { ClerkProvider } from '@clerk/nextjs';

export default function RootLayout({ children }) {
  return (
    <ClerkProvider
      publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}
      appearance={{
        // Custom branding
        variables: { colorPrimary: '#3B82F6' },
      }}
    >
      {children}
    </ClerkProvider>
  );
}

// frontend/src/app/sign-in/[[...sign-in]]/page.jsx
import { SignIn } from '@clerk/nextjs';

export default function SignInPage() {
  return <SignIn path="/sign-in" />;
}

// frontend/src/hooks/use-api.js
import { useAuth } from '@clerk/nextjs';
import { Api } from '@/lib/api-generated';

export function useApi() {
  const { getToken } = useAuth();

  return new Api({
    securityWorker: async () => {
      const token = await getToken();
      return token ? { Authorization: `Bearer ${token}` } : {};
    },
    baseURL: process.env.NEXT_PUBLIC_API_URL,
  });
}

import { requireAuth } from '@clerk/express';

// Protect a route
router.get('/users/me', requireAuth(), userController.getMe);

// Auth object is available on req.auth
router.get('/bookmarks', requireAuth(), bookmarkController.getBookmarks);

function getBookmarks(req, res) {
  const userId = req.auth.userId;
  // Query bookmarks for this user
}

// backend/src/routes/webhook.routes.js
import { Webhook } from 'svix';

router.post('/webhooks/clerk', express.raw({ type: 'application/json' }), async (req, res) => {
  const wh = new Webhook(process.env.CLERK_WEBHOOK_SECRET);
  const event = wh.verify(req.body, req.headers);

  switch (event.type) {
    case 'user.created':
      // Create user in MongoDB
      await createUserInDB(event.data);
      break;
    case 'user.updated':
      // Update user in MongoDB
      await updateUserInDB(event.data);
      break;
    case 'user.deleted':
      // Delete user from MongoDB
      await deleteUserFromDB(event.data);
      break;
  }

  res.json({ received: true });
});

clerk listen