Example chat app - Clerk makes auth dead simple

If you're looking to explore a great example of a real-world, feature-rich chat application built with React and leveraging the power of Clerk for authentication, check out the "nchat" GitHub repository.

The nchat example showcases the seamless integration of Clerk for user authentication in an chat application with a backend that leverages WebSockets written with the Nitric Framework.

Here's an overview of the Clerk side of the fence. You can dive deeper into the code to check out the backend implementation using WebSockets from Nitric.

Wrap Your Home Component:

Wrap your entire Home component with the ClerkProvider to provide access to the Clerk context.

Import Clerk Components:

Import the necessary Clerk components.

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

Your Component:

export default async function Home() {
  const { websocketUrl } = await retrieveData();

  return (
    <div className='flex flex-col bg-cover'>
      <SignedIn>
        {!websocketUrl ? (
          <div className='max-w-4xl mx-auto p-6'>
            There was a problem loading the messages, please login again.
          </div>
        ) : (
          <div className='flex-1 overflow-y-scroll no-scrollbar p-6'>
            <div className='max-w-4xl mx-auto'>
              <MessageFeed websocketUrl={websocketUrl} />
            </div>
          </div>
        )}
      </SignedIn>
      <SignedOut>
        <div className='h-full flex items-center justify-center flex-col py-10'>
          <SignIn />
        </div>
      </SignedOut>
    </div>
  );
}

Here SignedIn and SignedOut components will conditionally render content based on the user's sign-in status using Clerk's authentication.

Configuration:

Make sure you have properly configured Clerk with your API keys and domains, and set up the necessary authentication methods according to your project's requirements.

Closing Remarks

These snippets are just to give you a taste. Refer to the example project and Clerk docs for all the details!

With that, your React component is ready for user authentication and conditional rendering based on the user's sign-in status.