Member Authentication with the Memberstack DOM Package

Updated July 25, 2023 12:44

The Memberstack DOM package provides methods for handling user login, registration, and authentication in your frontend JavaScript application. Proper authentication is a critical part of most modern web and mobile apps, as it allows you to identify users, keep their data safe, and control access to restricted features and content. This article will explain how the Memberstack DOM package makes it easy to implement common authentication flows like email/password registration, passwordless magic links, and social logins with providers like Google and Facebook. We'll look at code examples for signup, login, sending magic links, and linking social accounts. We'll also discuss important authentication concepts like sessions, JWTs, and handling errors properly. By the end, you'll have a solid grasp of how to securely authenticate users with the Memberstack DOM package methods.

View the full DOM Package Website for more additional guidance.

Note: The Memberstack DOM Package can be accessed through the Webflow Package as well by using window.$memberstackDom.signupMemberEmailPassword(...) instead of memberstack.signupMemberEmailPassword(...).

Concepts

Before diving into the code, let's review some key concepts:

Authentication - The process of verifying user identity.
Authorization - Determining what resources and actions a user can access.
Sessions - A semi-persistent connection between client and server to track logged in state.
JWT - JSON Web Tokens, a common way to handle sessions and authorization.

Email/Password Authentication

The most common way to authenticate is by having a user enter an email and password. The DOM package provides two methods for this:

Signup

Allows a new user to create an account with email and password:

// Sign up a new member 
memberstack.signupMemberEmailPassword({ 
  email: "member@example.com", 
  password: "password123" 
}).then(result => { 
  // result contains the new member object 
  console.log(result.member); 
}).catch(error => { 
  // handle any errors 
});

The email and password are required.
We recommend using .then and .catch to handle the response.
On success, the returned member object contains the new member data including a JWT accessToken.
Be sure to handle any errors from invalid fields or duplicate emails.

Login

Allows an existing user to log in with email and password:

// Log in existing member 
memberstack.loginMemberEmailPassword({ 
  email: "member@example.com", 
  password: "password123" 
}).then(result => { 
  // result contains member object and tokens 
  console.log(result.member); 
}).catch(error => { 
  // handle login failure 
});

Again, email and password are required.
Use the returned accessToken JWT to maintain user session.
Display appropriate error messages on failure.

Passwordless Authentication

Passwordless authentication uses emailed magic links instead of passwords:

Send Magic Link

// Send magic link email 
memberstack.sendMemberLoginPasswordlessEmail({ 
  email: "member@example.com" 
}).then(() => { 
  // Email sent 
}).catch(error => { 
  // Handle error 
});

Sends the user an email with a special one-time login link.
Link contains a token that can be exchanged for a JWT session.

Signup with Token

// Sign up member after they click email link 
memberstack.signupMemberPasswordless({ 
  token: "abcdefg", 
  email: "member@example.com" 
}).then(result => { 
  // Use accessToken from result 
}).catch(error => { 
  // Handle invalid or expired token 
});

After user clicks the link, pass the token and email to signup.
Returns a member object and accessToken JWT on success.
Be sure to handle invalid or expired tokens.

Social Authentication

Allow users to sign in/up with social platforms like Google and Facebook:

// Signup/login with Google 
memberstack.signupWithProvider({ 
  provider: "google" 
}).then(result => { 
  // Get JWT from result 
}).catch(error => { 
  // Handle errors 
}); 

// Link Facebook account to existing member 
memberstack.connectProvider({ 
  provider: "facebook" 
}).then(result => { 
  // Facebook connected 
}).catch(error => { 
  // Handle errors 
});

Easily integrate social login with provider names like "google" and "facebook".
Link additional providers to an existing user account.
Manage errors such as cancellation of OAuth flows.