Authentication API

API used to perform actions related to authentication like logging in and out, registering users, toggling UI elements related to authentication and more.

classDiagram
direction LR
    class selectAuthStatus["selectAuthStatus$"]
    class selectIsAuthorized["selectIsAuthorized$"]
    class selectLoginEmail["selectLoginEmail$"]

    AuthenticationApi --> selectAuthStatus
    AuthenticationApi --> getAuthStatus
    AuthenticationApi --> selectIsAuthorized
    AuthenticationApi --> isAuthorized
    AuthenticationApi --> login
    AuthenticationApi --> logout
    AuthenticationApi --> resetPassword
    AuthenticationApi --> setLoginEmail
    AuthenticationApi --> getLoginEmail
    AuthenticationApi --> selectLoginEmail
    AuthenticationApi --> register
    AuthenticationApi --> getAdditionalFieldsForRegistration
    AuthenticationApi --> openLoginModal
    AuthenticationApi --> closeLoginModal
    AuthenticationApi --> openRegisterModal
    AuthenticationApi --> closeRegisterModal
    AuthenticationApi --> openRemindPasswordModal
    AuthenticationApi --> closeRemindPasswordModal

    class AuthenticationApi {
        selectAuthStatus() Observable~TAuthenticationStatus~
        getAuthStatus() TAuthenticationStatus
        selectIsAuthorized():Observable~boolean~
        isAuthorized() boolean
        async login(username: string, password: string) Promise~IRequestResponse~TLoginResponse~['data']|null~
        async logout(): Promise~TResponse|null~
        async resetPassword(email: string) Promise~TResponse|null~
        setLoginEmail(email: string) void
        getLoginEmail() string
        selectLoginEmail() Observable~string~
        async register(values: TRegisterFormValues) Promise~TResponse|null~
        async getAdditionalFieldsForRegistration() Promise~AdditionalField[]|null~
        async openLoginModal() Promise~void~
        async closeLoginModal() Promise~void~
        async openRegisterModal() Promise~void~
        async closeRegisterModal() Promise~void~
        async openRemindPasswordModal() Promise~void~
        async closeRemindPasswordModal() Promise~void~
    }

    link selectAuthStatus "../methods/select-auth-status/"
    link getAuthStatus "../methods/get-auth-status/"
    link selectIsAuthorized "../methods/select-is-authorized/"
    link isAuthorized "../methods/is-authorized/"
    link login "../methods/login/"
    link logout "../methods/logout/"
    link resetPassword "../methods/reset-password/"
    link setLoginEmail "../methods/set-login-email/"
    link getLoginEmail "../methods/get-login-email/"
    link selectLoginEmail "../methods/select-login-email/"
    link register "../methods/register/"
    link getAdditionalFieldsForRegistration "../methods/get-additional-fields-for-registration/"
    link openLoginModal "../methods/open-login-modal/"
    link closeLoginModal "../methods/close-login-modal/"
    link openRegisterModal "../methods/open-register-modal/"
    link closeRegisterModal "../methods/close-register-modal/"
    link openRemindPasswordModal "../methods/open-remind-password-modal/"
    link closeRemindPasswordModal "../methods/close-remind-password-modal/"

Get API

To get the Authentication API use its name AuthenticationApi with the getApi method.

This API is initialized asynchronously which means that if you use the getApiSync method to get it, it might not exist yet and you will get an error as a result.

useStorefront(async (storefront) => {
    const authenticationApi = await storefront.getApi('AuthenticationApi');
});

Methods

• selectAuthStatus$ - select a current status of authorization
• getAuthStatus - get a status of authorization
• selectIsAuthorized$ - return a boolean based on whether a user is currently authorized or not
• isAuthorized - return a boolean based on whether a user is authorized or not
• login - log in a user
• logout - log out a user
• resetPassword - reset a password for a given user
• setLoginEmail - set an email used to login a currently authorized user
• getLoginEmail - get an email used to login a currently authorized user
• selectLoginEmail$ - select a current email used to login a currently authorized user
• register - register a new user
• getAdditionalFieldsForRegistration - get data of additional custom fields for the registration form
• openLoginModal - open a modal with a login form inside
• closeLoginModal - close a modal with a login form inside
• openRegisterModal - open a modal with a register form inside
• closeRegisterModal - close a modal with a register form inside
• openRemindPasswordModal - open a modal with a remind password form inside
• closeRemindPasswordModal - close a modal with a remind password form inside

Event Bus events

Some methods of this API dispatch the following events with the Event Bus:

• FlashMessengerApi.addFlashMessage
• authentication.authorized
• authentication.loggedIn
• authentication.failedLogin
• authentication.loggedOut
• authentication.unauthorized
• authentication.registered

Some methods of this API also listen to the following events:

• PageManager.loaded

Example

In this example we make a AuthenticationApi call to log the user in.

useStorefront(async (storefront) => {
    const authenticationApi = await storefront.getApi('AuthenticationApi');

    await authenticationApi.login('email@example.com', 'test123');
});

Example

In this example we make a AuthenticationApi call to register a user.

useStorefront(async (storefront) => {
    const authenticationApi = await storefront.getApi('AuthenticationApi');

    await authenticationApi.register({
        mail: 'email@example.com',
        password: 'test123',
        firstname: 'John',
        lastname: 'Doe',
        phone: '123456789',
        street_1: 'Example Street 8/20',
        zip_code: '12-345',
        city: 'Vancouver',
        country_code: 'CN'
    });
});

Example

In this example we make a AuthenticationApi call to check the auth status. If no user is authorized a login modal will be displayed with the help of openLoginModal method.

useStorefront(async (storefront) => {
    const authenticationApi = await storefront.getApi('AuthenticationApi');

    const authStatus = authenticationApi.getAuthStatus();

    if (authStatus === 'unauthorized') {
        await authenticationApi.openLoginModal();
    }
});

Objects Reference

• TAuthenticationStatus
• TLoginResponse
• TRegisterFormValues
• TResponse