Spryker VSF

# useUser

# Features

useUser composable can be used to:

  • manage user authentication
  • manage authentication data like email address, login or password.

# API

  • user - reactive object containing information about current user.
interface User {
  type: 'customers';
  id: string;
  attributes: {
    firstName: string;
    lastName: string;
    gender: null;
    email: string;
    dateOfBirth: null;
    salutation: string;
    createdAt?: string;
    updatedAt?: string;
  };
  links: {
    self: string;
  };
}
  • updateUser - function for updating user data. When invoked, it submits data to the API and populates user property with updated information. This method accepts a single params object. The params has the following option:
  • user: UPDATE_USER_PARAMS
interface UPDATE_USER_PARAMS {
  salutation: 'Mr' | 'Ms' | 'Mrs' | 'Dr';
  firstName: string;
  lastName: string;
  email: string;
  gender?: string;
  dateOfBirth?: string;
  createdAt?: string;
  updatedAt?: string;
}

updateUser(params: UPDATE_USER_PARAMS): Promise<void>;

  • register: CreateCustomerParams - function for creating a new user. When invoked, it submits new user data to the API and saves them. This method accepts a single params object. The params has the following option:

    • user: CreateCustomerParams
interface CreateCustomerParams {
  salutation: 'Mr' | 'Ms' | 'Mrs' | 'Dr';
  firstName: string;
  lastName: string;
  email: string;
  password: string;
  confirmPassword: string;
  acceptedTerms: boolean;
}

register({user: CreateCustomerParams}): Promise<void>;

  • login: UseUserLoginParams - function for log in a user based on a username and password. This method accepts a single params object. The params has the following option:

    • user: UseUserLoginParams
interface UseUserLoginParams {
  username: string;
  password: string;
}

login({user: UseUserLoginParams}): Promise<void>;
  • logout - function for logout a user.
logout(): Promise<void>;

  • changePassword - function for changing user password. This method accepts a single params object. The params has the following options:

    • current: string
    • new: string
changePassword(params: {
    current: string;
    new: string;
}): Promise<void>;
  • loading: boolean - reactive object containing information about loading state of user.
  • isAuthenticated: boolean - checks if user is authenticated or not.
  • error: UseUserErrors - reactive object containing the error message, if some properties failed for any reason.
interface UseUserErrors {
  updateUser: Error;
  register: Error;
  login: Error;
  logout: Error;
  changePassword: Error;
  load: Error;
}

# Getters

  • getFirstName - returns user first name.

  • getLastName - returns user last name.

  • getFullName - returns full user name.

  • getEmailAddress - returns user email address.

  • getSalutation - returns user salutation

  • getAuthErrors - returns user authentication form errors

  • mapAuthErrors - returns user authentication error data

interface UserGetters {
  getFirstName: (user: User) => string;
  getLastName: (user: User) => string;
  getFullName: (user: User) => string;
  getEmailAddress: (user: User) => string;
  getSalutation: (user: User) => string;
  getAuthErrors: (user: ApiErrors) => AuthErrors;
  mapAuthErrors: (user: Partial<ValidationError | RequestError>) => Errors;
}

# Example

import { useUser } from '@spryker-vsf/composables';

export default {
  setup() {
    const { user, register, login, loading } = useUser();

    return {
      register,
      login,
      loading,
      firstName: userGetters.getFirstName(user.value),
      email: userGetters.getEmailAddress(user.value),
    };
  },
};

← useUserOrders →