Is there a way to have user's fill out required profile fields after registration?

I know for my own community, adding a required field means that someone who already has an account is required to complete those fields the next time they log in before resuming normal community access. I am not sure whether that is due to the SSO type I have or if it is the normal behavior of Vanilla, but can ask! If it is an integrated function, I would suggest adding a Guest-visible html widget to the landing page with a notification that users will be asked to complete some profile fields when they log in next, just to help alleviate any confusion. I will check to see if I can get an answer about whether that is normal functionality and update my response :)

I am so glad to see this question because some brilliant user has made a post about this. (It was me 😌). Give a nudge to users who are still using the custom profile avatar. That post was just about detecting if your user's had not added a photo and giving them a prompt to do so. But it could be easily adapted for any profile data that is missing.

You create a Custom HTML widget with JavaScript that does an API call to the current user's profile to see what data is missing.

In this iteration the JavaScript would have to be a bit different than my other post:

// JavaScript to Check Profile Completion and Show Avatar Upload Prompt


class UserProfile {
    
    constructor(e) {
        this.vanilla = e;
        this.shadowRoot = customHtmlRoot.shadowRoot;
        this.displayElementID = "MyMissingInfo";
        this.displayElement = this.shadowRoot.getElementById(this.displayElementID) ?? false;
        this.currentUserId = this.vanilla.getCurrentUser().userID ?? 0;
        this.verifyUserProfile();
    }


    verifyUserProfile = () => {
        // If the current user is a guest, abort.
        if (this.currentUserId === 0 ) {
            return;
        }


        // Do an API call to the current user's profile.
        // Because we want profile fields, call the user by the current user's userID
        // and expand the API request.
        this.vanilla.apiv2.get(`/users/${this.currentUserId}?expand=all`).then((res) => {
            console.log(res.data);
            // Check if they current user has a default avatar...
            if (this.hasDefaultPhoto(res.data.photoUrl)) {
                // If so, display the avatar in the message, and make the message visible.         
                this.displayCurrentPhoto(res.data.photoUrl);
            }
            
            // res.data.profileFields will only contain fields that have data
            // if a user didn't fill in a field it will be absent from this list
            // it won't just be there but blank. So, if a field is absent that you 
            // want the user to fill in, test for it and alert the user.
            if (!res.data.profileData?.favouriteHockeyTeam) {
                this.promptForHockeyTeam();
            }
        }).catch((err) => {console.log('Looking for the UserProfile update message? It failed to load. Error message: ', err)});
    }


    // Test for default photo or avatar.
    hasDefaultPhoto = (photo) => {
        if (photo.endsWith("defaulticon.png") || photo.includes("/uploads/defaultavatar/")) {
            return true;
        }
        return false;
    }


    // Display the current default avatar they are using in the message and set the message to show.
    displayCurrentPhoto = (photo) => {
        const imageTag = this.shadowRoot.getElementById('profilePhoto');
        imageTag.src = photo;
        this.displayPrompt();
    }

    // Create and show a message.
    promptForHockeyTeam = () => {
        const hockeyTeamMsg = this.shadowRoot.getElementById('hockeyTeamMsg');
        hockeyTeamMsg.innerHTML = "Also, we can't go on like this. We need to know your favourite hockey team.";
        hockeyTeamMsg.classList.replace('hide', 'show');
        this.displayPrompt();
        this.diplayProfileLink();
    }

    // Show the link to the profile page
    diplayProfileLink = () => {
        document.getElementById('profileLink').classList.replace('hide', 'show');
    }

    // Display the whole prompt.
    displayPrompt = () => {
      this.displayElement.classList.replace('hide', 'show');
    }
}


onVanillaReady((e) => {
    new UserProfile(e);
});

Notice that the condition to know if the user has input their favourite hockey team looks like this:

if (!res.data.profileData?.favouriteHockeyTeam) {

The ! means if something is not there and the ?.favouriteHockeyTeam the question mark tell the browser that if the JSON key does not exist, don't throw an error, just return null.

The HTML looks like this:

<div class="myMissingInfo hide" id="MyMissingInfo">
    <h2 class="messagecontent title">Is this how you want to be seen?</h2>
    <div class="imageWrapper"><a href="/profile/picture" title="Click to update photo."><img src="" class="profilePhoto" id="profilePhoto"></a></div>
    <div class="messagecontent message">
        I see you are using a default avatar. Don't be shy, show your true colors and help us know you better.
    </div>
    <div class="profileLinkWrapper"><a href="/profile/picture">Update Your Photo.</a></div>
    <div id="hockeyTeamMsg" class="messagecontent message hide"></div>
    <div id="profileLink" class="hide profileLinkWrapper"><a href="/profile/edit-fields">Update My Profile Data</a></div>
</div>

Good luck adapting this to your specific needs. It doesn't have to be your favourite hockey team, and can also be your favourite hockey goalie, or forward. I give full permission.