mjkaufer mjkaufer - 4 months ago 30
Javascript Question

How to create Custom Login Fields in Meteor?

In meteor, I current am using the default login field. However, I would like to have the user create a unique user ID upon creating an account. I could hardcode this in, but I was wondering if there was a way to do this by editing the loginButton field somehow.
Would anybody know how to add extra fields in general that the user signing up would be forced to fill out? Such as name, username, etc.?

Thanks.

Answer

The loginButtons helper is meant to be an easy, drop-in helper for prototyping. For customization, you need to create your own custom login/signup forms. This is actually pretty easy with the documented Accounts API. Here's a simple example of custom login/signup forms:

<template name="signupForm">
  <form id="signup-form">
    <h2>Sign Up</h2>

    <label for="signup-username">Username</label>
    <input type="text" id="signup-username" placeholder="Username" />

    <label for="signup-password">Password</label>
    <input type="password" id="signup-password" placeholder="Password" />

    <label for="signup-name">Full Name</label>
    <input type="text" id="signup-name" placeholder="Full Name" />

    <button type="submit">Sign Up</button>
  </form>
</template>

<template name="loginForm">
  <form id="login-form">
    <h2>Log In</h2>

    <label for="login-username">Username</label>
    <input type="text" id="login-username" placeholder="Username" />

    <label for="login-password">Password</label>
    <input type="password" id="login-password" placeholder="Password" />

    <button type="submit">Log In</button>
  </form>
</template>

<template name="logoutForm">
  <form id="logout-form">
    <button type="submit">Log Out</button>
  </form>
</template>
Template.signupForm.events({
  "submit #signup-form": function(event, template) {
    event.preventDefault();
    Accounts.createUser({
      username: template.find("#signup-username").value,
      password: template.find("#signup-password").value,
      profile: {
        name: template.find("#signup-name").value
        // Other required field values can go here
      }
    }, function(error) {
      if (error) {
        // Display the user creation error to the user however you want
      }
    });
  }
});

Template.loginForm.events({
  "submit #login-form": function(event, template) {
    event.preventDefault();
    Meteor.loginWithPassword(
      template.find("#login-username").value,
      template.find("#login-password").value,
      function(error) {
        if (error) {
          // Display the login error to the user however you want
        }
      }
    );
  }
});

Template.logoutForm.events({
  "submit #logout-form": function(event, template) {
    event.preventDefault();
    Meteor.logout(function(error) {
      if (error) {
        // Display the logout error to the user however you want
      }
    });
  }
});

You can use the Accounts.validateNewUser() and Accounts.onCreateUser() methods to validate the user fields and perform further customization on the user objects, respectively. For example, in your onCreateUser callback, you can change the user's _id field to whatever you want before returning the user object to be inserted into the DB.

Note that this example doesn't include the code for when the user forgot their password and wants to reset it. You can use the Accounts.forgotPassword and Accounts.resetPassword methods for that.

Comments