Deprecation Notice

Vue-based themes will soon be deprecated. Please switch to React-based themes, as all future updates and support will focus exclusively on React.

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.

Arguments

Context	Type	Description
is_password_true	Boolean	Toggle 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.

Arguments

Context	Type	Description
is_otp_true	Boolean	Toggle 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.

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>