Skip to main content

Login

The Login page allows a user to get authenticated. The user can log in by either of the following methods

  • Login by OTP
  • Login by username and password
  • Login by social accounts

This login method is configured from the platform according to need. you can configure the look and feel of a login page and provide your credential for OAuth providers.

Login by OTP

The user will enter his Mobile number, OTP will be sent to the respective Mobile number after validating the OTP user will redirect to either the edit profile page if a new user or the respective page with a logged-in state.

QG21


Arguments

ContextTypeDescription
is_password_trueBooleanToggle to Password Login

Example:

The below example will render a login otp.

  <login-otp v-if="isOtp" @is_password_true="togglePassword" />

Login by Password

The user will enter his registered Email /Mobile number and password to log in.

QG21


Arguments

ContextTypeDescription
is_otp_trueBooleanToggle to OTP Login

Example:

The below example will render a login password.

  <login-password v-if="isPassword" @is_otp_true="toggleOtp" />

Login by social accounts

The user also has the option to log in via social accounts. Using the existing login information from social network providers the user can log in. user will redirect to either the edit profile page if a new user or the respective page with a logged-in state.

QG21


Example:

The below example will render a social account login.

theme/templates/pages/login.vue
        <fdk-accounts v-slot="accountsData">
<button
v-if="isFacebookButton"
@click="accountsData.facebook.login"
className="facebook-login"
>
<ukt-inline-svg className="facebook-icon" src="facebook" />
{{ accountsData.facebook.displayText }}
</button>
<button
v-if="isGoogleButton"
@click="accountsData.google.login"
className="google-login"
>
<ukt-inline-svg className="google-icon" src="google" />
{{ accountsData.google.displayText }}
</button>
</fdk-accounts>