signUp
Method creating a new user account in commercetools.
This method sends a POST request to the customerSignMeUp endpoint of the Vue Storefront API Middleware. In turn, it creates a new customer in commercetools by sending a request to its GraphQL API. The default GraphQL query used by this method can be found here.
The newly created user gets signed in automatically. There is no need to call the signIn method separately afterwards.
Signature
export declare function signUp<Res extends PartialSignUpResponse = SignUpResponse>(
params: SignUpParams,
options?: MethodOptions<CustomQuery<"customerSignMeUp">>
): Promise<Res>;Parameters
| Name | Required | Type | Description |
|---|---|---|---|
params | Required | SignUpParams | Parameter object which can be used with this method. Refer to its type definition to learn about possible properties. |
options | Optional | MethodOptions<CustomQuery<"customerSignMeUp">> | Options that can be passed to additionally configure the request or customize the logic in a plugin. |
Returns
Returns a representation of the SignUpResponse.
Referenced Types
Examples
Creating a new user.
import { sdk } from '~/sdk.config.ts';
const { user } = await sdk.commerce.signUp({
email: 'email@example.com',
password: 'password'
});Creating a new user with two addresses, setting one of them as the default shipping address and the other one as the default billing address.
import { sdk } from '~/sdk.config.ts';
const { user } = await sdk.commerce.signUp({
email: 'email@example.com',
password: 'password',
addresses: [
{
streetName: 'Red St',
streetNumber: '24',
city: 'New York',
country: 'US'
},
{
streetName: 'Blue St',
streetNumber: '37',
city: 'San Francisco',
country: 'US'
}
],
shippingAddresses: [0, 1],
billingAddresses: [0, 1],
defaultShippingAddress: 0,
defaultBillingAddress: 1
});Creating a new user attached to specific stores.
import { sdk } from '~/sdk.config.ts';
const { user } = await sdk.commerce.signUp({
email: 'email@example.com',
password: 'password',
stores: [
{ key: 'europe' },
{ key: 'dach' }
]
});Creating a new user with Custom Fields. Before using this feature, you have to configure a proper Custom Type in commercetools. Also, the value property must be stringified!
import { sdk } from '~/sdk.config.ts';
const { user } = await sdk.commerce.signUp({
email: 'email@example.com',
password: 'password',
custom: {
type: {
key: 'customer-custom-fields'
},
fields: [
{ name: 'spiritAnimal', value: '"Dog"' },
{ name: 'favouriteSinger', value: '"Bono"' }
]
}
});Creating a custom GraphQL query for the method in middleware.config.js.
module.exports = {
integrations: {
ct: {
// ...
customQueries: {
'sign-up-custom-query': ({ query, variables, metadata }) => ({
variables,
query: `
mutation customerSignMeUp($draft: CustomerSignMeUpDraft!, $storeKey: KeyReferenceInput) {
user: customerSignMeUp(draft: $draft, storeKey: $storeKey) {
customer {
${metadata}
}
}
`;
})
}
}
}
};Creating a new user and using the customQuery parameter to leverage the custom GraphQL query from the previous example. Notice how we are using the type parameter to overwrite the default response interface.
import { sdk } from '~/sdk.config.ts';
type CustomSignUpResponse = {
user: {
customer: {
id: string;
email: string;
}
}
}
const { user } = await sdk.commerce.signUp<CustomSignUpResponse>({
email: 'email@example.com',
password: 'password'
}, {
customQuery: {
signUp: 'sign-up-custom-query',
metadata: 'id,email'
}
});