import { SignIn } from "@clerk/nextjs";

import { SignUp } from "@clerk/nextjs";

import { UserButton } from "@clerk/nextjs";

import { OrganizationSwitcher } from "@clerk/nextjs";

import { Protect } from "@clerk/nextjs";


  

import { SignedIn, SignedOut } from "@clerk/nextjs";

Welcome back!
Please sign in

// middleware.ts
import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server'

const isProtectedRoute = createRouteMatcher([
  '/dashboard(.*)',
  '/api/protected(.*)',
])

export default clerkMiddleware((auth, req) => {
  if (isProtectedRoute(req)) auth().protect()
})

export const config = {
  matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
}

// app/sign-in/[[...sign-in]]/page.tsx
import { SignIn } from "@clerk/nextjs";

export default function Page() {
  return (
    
  );
}

// app/api/protected/route.ts
import { auth } from "@clerk/nextjs/server";

export async function GET() {
  const { userId } = auth();
  
  if (!userId) {
    return new Response("Unauthorized", { status: 401 });
  }
  
  return Response.json({ message: "Protected data", userId });
}

// components/UserProfile.tsx
import { useUser } from "@clerk/nextjs";

export function UserProfile() {
  const { isLoaded, isSignedIn, user } = useUser();
  
  if (!isLoaded) return 
Loading...
;
  if (!isSignedIn) return 
Not signed in
;
  
  return (
    

      
Welcome, {user.fullName}!
      
Email: {user.primaryEmailAddress?.emailAddress}
    
  );
}

import { useOrganization } from "@clerk/nextjs";

export function OrgDashboard() {
  const { organization, isLoaded } = useOrganization();
  
  if (!isLoaded) return 
Loading...
;
  if (!organization) return 
No organization selected
;
  
  return 
{organization.name} Dashboard
;
}

// app/dashboard/page.tsx
import { auth, currentUser } from "@clerk/nextjs/server";

export default async function DashboardPage() {
  const { userId } = auth();
  const user = await currentUser();
  
  if (!userId) {
    redirect('/sign-in');
  }
  
  return 
Welcome, {user?.firstName}!
;
}