Working with Member Profiles and User Components in Next.js using Clerk Library

In this article, we'll explore how to create a member profile in a Next.js application using the user button component provided by Clerk, and how to utilize two essential functions: currentUser and auth.

Setting Up the Member Profile

We'll start by setting up the member profile where we can display the user's email address and use the user button component. Here's how to do it step by step:

Step 1: Create a Basic Profile Layout

First, create a div with some basic CSS styling:

// pages/profile.js
import { useEffect, useState } from 'react';
import { UserButton, currentUser, auth } from '@clerk/nextjs';

export default function Profile() {
    const [emailAddress, setEmailAddress] = useState('');
    const [userId, setUserId] = useState('');

    useEffect(() => {
        const fetchUserData = async () => {
            const user = await currentUser();
            setEmailAddress(user.emailAddresses[0].emailAddress);
            setUserId((await auth()).userId);
        };
        fetchUserData();
    }, []);

    return (
        

            
            
{emailAddress}
        
    );
}

// styles/global.css
.profile {
    padding: 1rem;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

In this code snippet, we set up a basic profile layout with padding, center alignment, and a gap between elements.

Step 2: Add the User Button Component

Next, we'll use the UserButton component provided by Clerk. This component allows users to sign out, and we can specify the URL to navigate to after sign-out:

<UserButton afterSignOutUrl="/" />

Step 3: Display User Information

We can fetch and display the user's email address and user ID using the currentUser and auth functions:

useEffect(() => {
    const fetchUserData = async () => {
        const user = await currentUser();
        setEmailAddress(user.emailAddresses[0].emailAddress);
        setUserId((await auth()).userId);
    };
    fetchUserData();
}, []);

Here, we use useEffect to fetch user data when the component mounts.

Understanding the Functions

Let's take a closer look at the currentUser and auth functions:

currentUser

The currentUser function fetches information about the currently logged-in user. It returns an object containing user details such as email addresses:

const user = await currentUser();
setEmailAddress(user.emailAddresses[0].emailAddress);

auth

The auth function retrieves authentication details, including the user ID. This can be useful for various authentication-related tasks:

const userId = (await auth()).userId;

Customizing the Profile Page

While we've used the UserButton component from Clerk, you can extend the functionality of your profile page by utilizing both currentUser and auth to fetch and display additional user information or to set up custom profile settings.

Conclusion

By following these steps, you can create a member profile in Next.js that leverages the user button component and fetches user details using the currentUser and auth functions. This approach provides a robust foundation for building user-centric features in your application.