How to add a new step in Checkout page

Step 1: Create the .js file implementing the view model.
Create the checkout-login-step.js file under Mageplaza/HelloWorld/view/frontend/web/js/view directory.
Basically, we need step_code, step_title, order and the condition that allows to display this step.

Here is the code (Read code comment to get more info)

define(
[
‘ko’,
‘uiComponent’,
‘underscore’,
‘Magento_Checkout/js/model/step-navigator’,
‘Magento_Customer/js/model/customer’
],
function (
ko,
Component,
_,
stepNavigator,
customer
) {
‘use strict’;
/**
* check-login – is the name of the component’s .html template
*/
return Component.extend({
defaults: {
template: ‘Mageplaza_HelloWorld/check-login’
},

        //add here your logic to display step,
        isVisible: ko.observable(true),
        isLogedIn: customer.isLoggedIn(),
        //step code will be used as step content id in the component template
        stepCode: 'isLogedCheck',
        //step title value
        stepTitle: 'Logging Status',

        /**
        *
        * @returns {*}
        */
        initialize: function () {
            this._super();
            // register your step
            stepNavigator.registerStep(
                this.stepCode,
                //step alias
                null,
                this.stepTitle,
                //observable property with logic when display step or hide step
                this.isVisible,

                _.bind(this.navigate, this),

                /**
                * sort order value
                * 'sort order value' < 10: step displays before shipping step;
                * 10 < 'sort order value' < 20 : step displays between shipping and payment step
                * 'sort order value' > 20 : step displays after payment step
                */
                15
            );

            return this;
        },

        /**
        * The navigate() method is responsible for navigation between checkout step
        * during checkout. You can add custom logic, for example some conditions
        * for switching to your custom step
        */
        navigate: function () {

        },

        /**
        * @returns void
        */
        navigateToNextStep: function () {
            stepNavigator.next();
        }
    });
}

);

Step 2: Create an .html template for the component.
In the above step, we use Mageplaza_HelloWorld/check-login as our template, let’s create it.
Create a new html file named check-login.html under Mageplaza/HelloWorld/view/frontend/web/template directory.

Here is the code

<div id="checkout-step-title"
     class="step-content"
     data-role="content">
     <p>The customer is <span data-bind="if: !isLogedIn">not</span> Logged-in</p>
    <form data-bind="submit: navigateToNextStep" novalidate="novalidate">
        <div class="actions-toolbar">
            <div class="primary">
                <button data-role="opc-continue" type="submit" class="button action continue primary">
                    <span><!-- ko i18n: 'Next'--><!-- /ko --></span>
                </button>
            </div>
        </div>
    </form>
</div>

Step 3: Add the new step to the Checkout page layout.
We need to extend the checkout page’s layout to be able to display the new step
Add this file in our module: Mageplaza/HelloWorld/view/frontend/layout/checkout_index_index.xml
The content as follow:

Mageplaza_HelloWorld/js/view/checkout-login-step 2