Meteor Authentication System

Meteor authentication

Authentication is a means of identifying an application’s users before granting access to web resources. Meteor provides a built-in way to add user functionality without having to write an authentication system ourselves. The basic workflow of a web application provides a mechanism for users to log in and register accounts.

Not every application needs authentication, so the user authentication functionality isn’t available by default in created projects. We need to install the account functionality through the terminal. We’ll create a little app, install the Meteor account package, and get familiar with the package before installing it to the online bookshop application that we’re building throughout this chapter.

We’ll install a login provider on the terminal by typing meteor add accounts-password. Meteor creates a users collection in MongoDB after the installation of the accounts-password package. This collection is used for the management of users’ accounts.

The coding playground at the end of this lesson implements authentication in a MeteorJS application. We have a Meteor Method called createAccount inside the imports/api/methods.js file. On line 2, we import Accounts from meteor/accounts-base. This package was added to the project when we installed the accounts-password package.

The createAccount method is called from the client. On line 6, we destructure the user object that’s passed to the function to get the username and password passed from the client. On line 7, a check is performed to determine if a user with the username exists by calling Accounts.findUserByUsername. If no user already exists with the passed username, a new user account is created by calling Accounts.createUser() with the user details. The Accounts.createUser method logs the user in automatically upon successful account creation if called on the client. If it’s called on the server, it returns the _id of the newly-created user back to the client.

Creating a user account

Open the imports/ui/Login.jsx file. Inside the file, there are input textboxes used to allow the user to enter the username and password. The state of the text input is captured by the useState React hook defined and attached to the input textbox on lines 6–7. On lines 32–49, we define a function called registerAccount. This function is passed to the “Register Account” button on line 98. On line 39, the createAccount method is called and executed, and a message is displayed that says the account has been successfully created.

Meteor user login

Open the imports/ui/Login.jsx file. A user logs in to the system by entering a username and password into the input textboxes on lines 112–126. The value entered in the input textbox is saved in state using the useState declared on lines 8–9. The function to log the user into the system is defined in lines 51–65.

The login function checks if the username and password were entered into the textbox by checking the state of the input textbox. If that check clears, a call is made to Meteor.loginWithPassword with the entered value for the username and password. The Meteor.loginWithPassword function is used to log an account into the system.

The Meteor.loginWithPassword function checks for the correctness of the entered username and password. If it’s correct, a callback function is returned with null as the first parameter. If there’s an error, the first parameter of the callback function contains the error object along with its details.