NavigationMixin.Navigate not navigating to home on community - LWC

Question

I am building a lightning community using LWC, where on successful login trying to navigate to standard home page of the community, but i see no URL redirection is happening.Below is the logic i have written.

    import { LightningElement } from 'lwc';
    import authenticateLogin from "@salesforce/apex/Login_Controller.authenticateLogin";
    import { NavigationMixin } from 'lightning/navigation';

export default class LoginPage extends NavigationMixin(LightningElement){

        handleLogin(event) {
            var userName= this.template.querySelector(".userName");
            var password = this.template.querySelector(".password");

            authenticateLogin({ userName: userName.value , password : password.value})
                    .then(result => {
                        console.log("Auth success ! ");
                        this[NavigationMixin.Navigate]({
                            type: 'comm__namedPage',
                            attributes: {
                                pageName: 'home'
                            }
                            });
                            console.log("Navigation success ! ");
                    })
                    .catch(error => {
                        this.error = error;
                        console.log("error "+error);

                    })
                    .finally(() => {
                        console.log("finally ");

                    });

        }
    }

On console.log i see both "Auth success !" and "Navigation success !" are coming but the redirection is not happening, am i doing anything wrong in this.

This is the help doc i am following to achieve this - https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.reference_page_reference_type

Answer 1

I had the exact same issue and fixed it adding the navigation menu bar on my login page.

In my case, I had to make a custom theme Layout. For that I created an aura component in which I added a custom navigation bar (another aura component that I had to create because I needed to override the "Home" button functionality) adding the following div:

<div class="navigation">
    <!-- you add this line here if you want to use the standard nav bar --> 
    {!v.navBar}
    <!-- you add this line if you have a custom nav bar -->
    <c:navMenu></c:navMenu>
</div> 

(Use this documentation as reference: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_config_for_builder_theme_layout.htm)

The result .cmp file of the custom layout component will be something like this:

<aura:component implements="forceCommunity:themeLayout" access="global" description="Sample Custom Theme Layout">
    <aura:attribute name="navBar" type="Aura.Component[]" required="false"/>
    <aura:attribute name="newHeader" type="Aura.Component[]" required="false"/>
    <div style="outline: none; max-width: 1440px; margin-left: auto; margin-right: auto;">
        <div class="profileMenuRegion">
            {!v.profileMenu}
        </div>
        <div class="newHeader">
            {!v.newHeader}
        </div>
        <div class="navigation">
            <!-- here goes the reference to the custom nav bar component -->
            <c:navMenu></c:navMenu>
        </div>        
        <div class="mainContentArea" style="outline: none; max-width: 1140px; margin-left: auto; margin-right: auto;">
            {!v.body}
        </div>
    </div>
</aura:component>

I don't know if while using a standard theme you need to explicitly add to the page the navigation bar.