Ways to store extra user information in meteor.js beyond just the basic details, like their home address

Question

Ways to store extra user information in meteor.js beyond just the basic details, like their home address

Just starting out with Meteor.js, I decided to try my hand at creating a task list by following the tutorial on meteor.com. Adding the accounts-ui and accounts-password packages was a breeze, but now I'm looking to customize the sign-up process. In addition to basic user credentials, I also want to collect home address information and potentially more data. My goal is to store this additional info in mongodb, linked to each user's ID. Any suggestions on how I can achieve this?

javascript mongodb meteor atmosphere.js

Answer 1

Answer №1

To store additional information about the user, you can utilize the profile field in their profile.

Here's an example of how to do this on the client side when handling events:

Template.example.events({
 'click #register':function(event,template){
   var homeAddress = template.$('homeAddress').val();
     Accounts.createUser({
       email: email,
      password: password,
      profile: { homeAddress: homeAddress }
    });
 }
})

Keep in mind that fields like username, email, and profile are already included by default in the accounts-password package.

Answer 2

To store additional information about the user, you can utilize the profile field in their profile.

Here's an example of how to do this on the client side when handling events:

Template.example.events({
 'click #register':function(event,template){
   var homeAddress = template.$('homeAddress').val();
     Accounts.createUser({
       email: email,
      password: password,
      profile: { homeAddress: homeAddress }
    });
 }
})

Keep in mind that fields like username, email, and profile are already included by default in the accounts-password package.

Answer 3

Answer №2

If you're in search of the additional option for a profile when utilizing Accounts.createUser(), make sure to refer to the documentation for detailed instructions on how to implement it: .

The profile feature requires an object that will be added to the database document linked with the user. Once you've tested the example below, execute the following commands to confirm that it has been stored in the database.

Within your project directory:
$ meteor mongo
$ db.users.find()

A sample output might look like this:

{ "_id" : "kJNaCtS2vW5qufwJs", "createdAt" : ISODate("2015-05-11T20:50:21.484Z"), "services" : { "password" : { "bcrypt" : "$2a$10$LrcZ5lEOlriqvkG5pJsbnOrfLN1ZSCNLmX6NP4ri9e5Qnk6mRHYhm" }, "resume" : { "loginTokens" : [ { "when" : ISODate("2015-05-11T20:50:21.493Z"), "hashedToken" : "CXKwUhEkIXgdz61cHl7ENnHfvdLwe4f0Z9BkF83BALM=" } ] } }, "emails" : [ { "address" : "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bfccd7decdd4ddc6cbdaffccd0d2dadad2ded6d391dcd0d2">[email protected]</a>", "verified" : false } ], "profile" : { "firstName" : "shark", "lastName" : "byte" } }

Please note that I am not using accounts-ui, only accounts-password without the built-in UI. However, here's a guide on creating a basic account creation template with extra fields (such as first & last name, and organization).

HTML code:

<head>
  <title>test</title>
</head>

<body>
  <!-- checks if someone is logged in -->
  {{#if currentUser}}
    {{> userPage}}
  {{else}}
    {{> loginPage}}
  {{/if}}
</body>

<template name="userPage">
  <button id="logout">logout</button>
  <p>You are logged in!</p>
</template>

<template name="loginPage">
  <form><!-- create account form, use a different one for normal logging in -->
    <input type="text" id="firstName" placeholder="First Name">
    <input type="text" id="lastName" placeholder="Last Name">
    <input type="text" id="organization" placeholder="Organization (optional)">
    <input type="text" id="email" placeholder="Email Address">
    <input type="password" id="password" placeholder="Password">
    <input type="password" id="confirmPassword" placeholder="Confirm Password">
    <input type="submit" id="createAccount" value="Create Account">
  </form>
</template>

Javascript code:

if (Meteor.isClient) {
  Template.loginPage.events({
    'submit form': function(event, template) {
        event.preventDefault();
        console.log('creating account');
        var passwordVar = template.find('#password').value;
        var confirmVar = template.find('#confirmPassword').value;
        if (passwordVar === confirmVar) {
            Accounts.createUser({
                email: template.find('#email').value,
                password: passwordVar,
                // you can add wherever fields you want to profile
                // you should run some validation on values first though
                profile: {
                  firstName: template.find('#firstName').value,
                  lastName: template.find('#lastName').value
                }
            });
        }
    }
  });
  // ensure there is a logout button
  Template.userPage.events({
    'click #logout': function(event, template) {
      Meteor.logout();
    }
  });
}

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}

Answer 4

If you're in search of the additional option for a profile when utilizing Accounts.createUser(), make sure to refer to the documentation for detailed instructions on how to implement it: .

The profile feature requires an object that will be added to the database document linked with the user. Once you've tested the example below, execute the following commands to confirm that it has been stored in the database.

Within your project directory:
$ meteor mongo
$ db.users.find()

A sample output might look like this:

{ "_id" : "kJNaCtS2vW5qufwJs", "createdAt" : ISODate("2015-05-11T20:50:21.484Z"), "services" : { "password" : { "bcrypt" : "$2a$10$LrcZ5lEOlriqvkG5pJsbnOrfLN1ZSCNLmX6NP4ri9e5Qnk6mRHYhm" }, "resume" : { "loginTokens" : [ { "when" : ISODate("2015-05-11T20:50:21.493Z"), "hashedToken" : "CXKwUhEkIXgdz61cHl7ENnHfvdLwe4f0Z9BkF83BALM=" } ] } }, "emails" : [ { "address" : "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bfccd7decdd4ddc6cbdaffccd0d2dadad2ded6d391dcd0d2">[email protected]</a>", "verified" : false } ], "profile" : { "firstName" : "shark", "lastName" : "byte" } }

Please note that I am not using accounts-ui, only accounts-password without the built-in UI. However, here's a guide on creating a basic account creation template with extra fields (such as first & last name, and organization).

HTML code:

<head>
  <title>test</title>
</head>

<body>
  <!-- checks if someone is logged in -->
  {{#if currentUser}}
    {{> userPage}}
  {{else}}
    {{> loginPage}}
  {{/if}}
</body>

<template name="userPage">
  <button id="logout">logout</button>
  <p>You are logged in!</p>
</template>

<template name="loginPage">
  <form><!-- create account form, use a different one for normal logging in -->
    <input type="text" id="firstName" placeholder="First Name">
    <input type="text" id="lastName" placeholder="Last Name">
    <input type="text" id="organization" placeholder="Organization (optional)">
    <input type="text" id="email" placeholder="Email Address">
    <input type="password" id="password" placeholder="Password">
    <input type="password" id="confirmPassword" placeholder="Confirm Password">
    <input type="submit" id="createAccount" value="Create Account">
  </form>
</template>

Javascript code:

if (Meteor.isClient) {
  Template.loginPage.events({
    'submit form': function(event, template) {
        event.preventDefault();
        console.log('creating account');
        var passwordVar = template.find('#password').value;
        var confirmVar = template.find('#confirmPassword').value;
        if (passwordVar === confirmVar) {
            Accounts.createUser({
                email: template.find('#email').value,
                password: passwordVar,
                // you can add wherever fields you want to profile
                // you should run some validation on values first though
                profile: {
                  firstName: template.find('#firstName').value,
                  lastName: template.find('#lastName').value
                }
            });
        }
    }
  });
  // ensure there is a logout button
  Template.userPage.events({
    'click #logout': function(event, template) {
      Meteor.logout();
    }
  });
}

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}

Answer 5

Answer №3

One way to enhance user creation on the server side is by utilizing the Accounts.onCreateUser hook.

if (Meteor.isServer) {
    Meteor.startup(function() {
    });

    Accounts.onCreateUser(function(options, user) {
        if (options.profile) {
            user.profile = options.profile;
        }

        user.profile.address = 
        user.profile.city = 
        user.profile.state = 
        user.profile.zip =
        user.profile.anything = 
    return user;
});

Answer 6

One way to enhance user creation on the server side is by utilizing the Accounts.onCreateUser hook.

if (Meteor.isServer) {
    Meteor.startup(function() {
    });

    Accounts.onCreateUser(function(options, user) {
        if (options.profile) {
            user.profile = options.profile;
        }

        user.profile.address = 
        user.profile.city = 
        user.profile.state = 
        user.profile.zip =
        user.profile.anything = 
    return user;
});

Ways to store extra user information in meteor.js beyond just the basic details, like their home address

Answer №1

Answer №2

Answer №3

Similar questions

Evaluate a program to identify prime numbers

Invoking a function containing an await statement does not pause the execution flow until the corresponding promise is fulfilled

Choosing age quantity without any breaks

A different approach to joining strings

Utilize a class method within the .map function in ReactJS

Creating a key-value pair array upon checking a checkbox with jQuery

I'm looking for the best way to send POST data to an API with Meteor's HTTP package

Modifying property values using the onError event when encountering an error with the MUI DateTimePicker and

Discovering the method to modify the value of one input text field according to a particular value in another input text field

Retrieve a JSON object from a Knockout observable array using the object's ID

Ways to remove an item from firebase database

Understanding how to utilize the scoped slot prop within a parent computed property

Trouble with Swiper carousel loading new slides

Populating MongoDB based on a specific condition

What is the process of retrieving a dynamic array value based on checkbox selection in AngularJS?

Is it necessary to execute Commit and Begintransaction in SELECT queries?

Optimizing database choices to enhance performance and scalability of C# APIs

The error message "Error [ERR_HTTP_HEADERS_SENT]: Unable to set headers after they have been sent to the client" indicates that

Reset input value when adding or removing inputs dynamically

Child object referencing in JavaScript