Open Authentication

Description

The openAuthentication action opens the login or signup flow within the Superfans app.
It provides a native way for users to authenticate, ensuring secure session management and syncing customer data (such as name, email, and wishlist) across the app.

Function Signature

VajroSDK.actions.openAuthentication({type:"login"})

//(OR)

VajroSDK.actions.openAuthentication({type:"create"})

Parameter	Type	Required	Description
type	Enum	Yes	The type denoted the action the user has to take on the app. The values of the params are : login -> prompt the user to login to the app. create -> prompt the user to signup.

Parameter

Type

Required

Description

type

Enum

Yes

The type denoted the action the user has to take on the app. The values of the params are :

login -> prompt the user to login to the app.
create -> prompt the user to signup.

Note:

If you call the openAuthentication function when the user is already logged in, the accounts page will be opened

Structure of Response

Status	Response
Success	`{ "status": "success", "message": "Screen opened successfully" }`
Invalid Auth Type	`{ "status": "error", "errorId": 400, "errorHandle": "invalid-auth-type", "message": "Invalid auth type" }`
Unexpected Error	`{ "status": "error", "errorId": 500, "errorHandle": "unknown-error", "message": "Something unexpected happened" }`

Example Usage

// Function to fetch products from a specific collection
function fetchProductsFromCollection(collectionId) {
    VajroSDK.helpers.getProducts({
        collectionId: collectionId,
        count: 10 // Fetch 10 products
    })
        .then((data) => {
            const products = data.products || data;
            displayProducts(products);
        })
        .catch((err) => {
            console.error("Error fetching products:", err);
        });
}
// Function to display products in a grid
function displayProducts(products) {
    const productGrid = document.getElementById('productGrid');
    productGrid.innerHTML = ''; // Clear existing products
    products.forEach(product => {
        const card = document.createElement('div');
        card.className = 'product-card';
        card.innerHTML = `
            <img src="${product.images[0]}" alt="${product.title}" class="product-image" />
            <div class="product-info">
                <div class="product-name">${product.title}</div>
                <div class="product-price">₹${product.variants[0].price}</div>
            </div>
        `;
        card.addEventListener('click', () => {
                if (VajroSDK.variables.customer.id === null) {
                    // User is not logged in, redirect to login page
                    VajroSDK.actions.openAuthentication({type:"login"});
                } else {
                    // User is logged in
                    console.log("User is logged in:", VajroSDK.variables.customer);
                    VajroSDK.actions.openProduct({ productHandle: product.handle });

                }
        });
        productGrid.appendChild(card);
    });
}
// Call the function with a specific collection ID
fetchProductsFromCollection("324840718521");

<div id="clc"></div>
<div id="productGrid" class="product-grid"></div>

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}
.product-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s;
}
.product-card:hover {
  transform: scale(1.05);
}
.product-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
}
.product-info {
  padding: 8px;
  text-align: center;
}
.product-name {
  font-size: 14px;
  font-weight: 600;
  margin: 8px 0;
}
.product-price {
  font-size: 12px;
  color: #333;
}

Best Practices

Use before gated actions: Always prompt login before wishlist, checkout, or loyalty access.
Pair with listeners: Use loginStatusChange listener to react to authentication success or logout.
Avoid redundant calls: Check if a user is already logged in via VajroSDK.variables.customer before calling.
Consistent UX: Use the same button placement and style for all login-related CTAs.

Caveats

App-only context: This action is only supported inside the Superfans mobile app.
No web-based login: It does not redirect to external OAuth pages or Shopify web login.
User state refresh: The SDK automatically updates the customer variable after login/logout.
Asynchronous behavior: Always handle the returned Promise or use await to ensure flow completion.