Objective :

Enable the addition of an authentication step to an existing Vue.js application.

Prerequisites :

You must have a functional Vue.js application.
In this tutorial, we will use the application restaurant-food-reservation  ( 1.0.1 version de base ) which allows you to make reservations.

You must install vee-validate,

In Drupal, you need to install Login-rx-vuejs

We start by installing the connection module. drupal-vuejs. As this module is not yet available on npmjs.com, you can download it locally and install it as follows. (The path “/website/AppVuejs/” must be adapted to suit your environment.)

npm install /siteweb/AppVuejs/drupal-vuejs
npm install vee-validate@3

NB:  Install the version vee-validate@3 because we use thevue@2.7.14. ( the version vee-validate@4 is compatible with vue@3 ).

We identify or wish to add the authentication form:

We want the login form to appear if the user is not logged in when they click on the “book now” button. Otherwise, the application's default process continues.

In our vuejs application, the src/components/MultiStepForm.vue file manages the different steps. We will add a step for logging in:

At the template level:

...
      <div v-show="currentStep == 3" key="four" class="animate">
        <choose-offer @setReservation="setReservation"></choose-offer>
      </div>
      <!-- </transition-group> -->
    </form>
    <!-- step reservation -->
    <loginRegister
      v-if="show_login_form"
      actionAfterRegister="emit_even_register"
      action-after-login="emit_even"
      :showModalSuccess="false"
      ref="LoginRegister"
    ></loginRegister>
    <!-- steps :
...

In terms of components, we are adding:

...
  components: {
    VueCalendar,
    TimeDisplay,
    NombrePlace,
    ChooseOffer,
    loginRegister: () =>
      import("drupal-vuejs/src/App/components/LoginRegister.vue"),
  },
...

In the main.js file, we add:

...
import { ValidationObserver, ValidationProvider, extend } from "vee-validate";
Vue.component("ValidationObserver", ValidationObserver);
Vue.component("ValidationProvider", ValidationProvider);
//import "drupal-vuejs/src/App/components/vee-validate-custom.js";
import { required, email, alpha } from "vee-validate/dist/rules";
extend("required", {
  ...required,
  message: "Ce champs est requis",
});
extend("email", email);
extend("alpha", alpha);
...

At the store's state entry level, we add:

...
//to login
    form: {
      name: [{ value: "" }],
      mail: [{ value: "" }],
    },
...

After his additions, we obtained this result:

The connection module

At this point, we need to display the form if the conditions are met. To do this, we need to determine whether the user is already logged in, has logged in, or is registering:

In terms of sections"methods" you can add:

    /**
     * Permet de verifier si un utilisateur s'est connecté.
     */
    check_if_user_connected() {
      document.addEventListener(
        "login_rx_vuejs__user_is_login",
        () => {
          this.getCurrentUser().then((user) => {
            console.log("user : ", user);
            //Add your logic here.
          });
        },
        false
      );
    },
    /**
     *Allows you to check whether a user has registered.
     */
    check_if_user_register() {
      document.addEventListener(
        "login_rx_vuejs__user_is_register",
        () => {
          // declanchera l'enenement login_rx_vuejs__user_is_login
          this.$refs.LoginRegister.connexionUser(this.$store.state.form);
        },
        false
      );
    },
    /**
     * Retrieve user information if logged in.
     */
    getCurrentUser() {
      return new Promise((resolv, reject) => {
        users
          .getCurrentUser()
          .then((user) => {
            if (user) {
              this.$store.commit("SET_USER", user);
              resolv(user);
            }
          })
          .catch((er) => {
            reject(er);
          });
      });
    },

In the “mounted” section, add:

this.check_if_user_connected();
this.check_if_user_register();
this.getCurrentUser();

Explanation:

At the store level, we have defined a state.user which will contain the user's data.

If the user connects to the event"login_rx_vuejs__user_is_login" will be triggered and subsequently the getCurrentUser method will be executed.

If the user registers, the event "login_rx_vuejs__user_is_register" triggered and subsequently the event "login_rx_vuejs__user_is_login" triggered.

You can use state.user to determine whether to display the login form.

Test :

We will test our form:

We are receiving an error message. This is because we need to make some changes to the Drupal site. 
We need to activate the module "restui", then activate the route"/user/register" 

Then, allow anonymous users to access this resource:

and finally allowed the anonymous user to create an account:

At this point, the user can log in or create a new account, and you can continue with the business logic of the application at the method level. check_if_user_connected(). ( voir  restaurant-food-reservation  ( 1.0.2 version avec authentification ) )