Core Authentication

// Add this HTML to your login page
<form id="loginForm">
  <input type="email" id="email" placeholder="Email" />
  <input type="password" id="password" placeholder="Password" />
  <button type="submit" id="loginButton">Log In</button>
  <div id="loginError" style="display: none; color: red;"></div>
</form>

// Add this JavaScript to handle the login
document.getElementById('loginForm').addEventListener('submit', async (event) => {
  event.preventDefault();
  const loginButton = document.getElementById('loginButton');
  const errorDiv = document.getElementById('loginError');
  
  // Disable button and show loading state
  loginButton.disabled = true;
  loginButton.textContent = 'Logging in...';
  errorDiv.style.display = 'none';
  
  // Get form values
  const email = document.getElementById('email').value;
  const password = document.getElementById('password').value;
  
  try {
    const member = await memberstack.loginMemberEmailPassword({
      email,
      password
    });
    
    // If login is successful, redirect to dashboard
    window.location.href = "/dashboard";
  } catch (error) {
    errorDiv.textContent = error.message || "Login failed. Please check your credentials.";
    errorDiv.style.display = 'block';
  } finally {
    // Reset button state
    loginButton.disabled = false;
    loginButton.textContent = 'Log In';
  }
});

// Add this HTML to your login page
<form id="passwordlessForm">
  <input type="email" id="passwordlessEmail" placeholder="Email" />
  <button type="submit" id="passwordlessButton">Login with passwordless</button>
  <div id="passwordlessMessage"></div>
  <div id="passwordlessError" style="display: none; color: red;"></div>
</form>

// Add this JavaScript to handle passwordless login
let isEmailSent = false;
const form = document.getElementById('passwordlessForm');
const button = document.getElementById('passwordlessButton');
const messageDiv = document.getElementById('passwordlessMessage');
const errorDiv = document.getElementById('passwordlessError');

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  
  if (isEmailSent) return; // Prevent multiple sends
  
  button.disabled = true;
  button.textContent = 'Sending...';
  errorDiv.style.display = 'none';
  
  const email = document.getElementById('passwordlessEmail').value;
  
  try {
    await memberstack.sendMemberLoginPasswordlessEmail({
      email,
      redirectUrl: window.location.origin + "/dashboard"
    });
    
    isEmailSent = true;
    messageDiv.textContent = 'Check your email for the login token';
    button.textContent = 'Check your email';
    
    // Reset after 60 seconds
    setTimeout(() => {
      isEmailSent = false;
      button.disabled = false;
      button.textContent = 'Login with passwordless';
      messageDiv.textContent = '';
    }, 60000);
  } catch (error) {
    errorDiv.textContent = error.message || "Couldn't send login email. Please try again.";
    errorDiv.style.display = 'block';
    button.disabled = false;
    button.textContent = 'Login with passwordless';
  }
});

// Handle verification (if needed)
async function handlePasswordlessVerification(email, token) {
  try {
    const member = await memberstack.loginMemberPasswordless({
      email: email,
      passwordlessToken: token
    });
    window.location.href = "/dashboard";
  } catch (error) {
    console.error("Verification failed:", error);
  }
}

// 1. Send the signup code to the member's email
await memberstack.sendMemberSignupPasswordlessEmail({
  email: "newuser@example.com"
});
// Resolves with { data: { success: true } } once the email is queued.

// 2. Complete signup with the code the member received by email
async function completePasswordlessSignup(email, code) {
  const { data } = await memberstack.signupMemberPasswordless({
    email,
    passwordlessToken: code,        // the code from the email
    // Optional, same as email/password signup:
    customFields: { "first-name": "Jane" },
    plans: [{ planId: "pln_free" }]
  });

  // The new member is signed in and persisted automatically.
  window.location.href = data.redirect || "/dashboard";
}

// Step 1 — send the reset email. For security this resolves the SAME whether
// or not the email exists, and the resolved `data` IS the message string.
async function requestPasswordReset(email) {
  const { data: message } = await memberstack.sendMemberResetPasswordEmail({ email });
  console.log(message);
  // "If this email exists, you'll receive an email with the reset instructions."
}

// Step 2 — complete the reset with the token from the email link.
async function completePasswordReset(token, newPassword) {
  try {
    const { data } = await memberstack.resetMemberPassword({ token, newPassword });
    if (data.success) {
      // NOTE: this does NOT log the member in — send them to your login page.
      window.location.href = "/login";
    }
  } catch (error) {
    // "invalid-reset-code" if the token is wrong or expired
    console.error(error.message);
  }
}

// Add a password to a passwordless / social member (must be logged in).
async function addPassword(newPassword) {
  const { data: member } = await memberstack.setPassword({ password: newPassword });
  console.log("Password login enabled:", member.auth.hasPassword); // true
}

// Handle logout
async function handleLogout() {
  try {
	await memberstack.logout();
	window.location.href = "/login";
  } catch (error) {
	console.error("Logout failed:", error);
  }
}