Javascript Front End Coordination with Ruby Back End For User Sign Up and Log On

This posting will go through the steps that allow a Javascript front end to fetch user information from a Ruby API back end. Please note that JWT authentication is not being included and certainly should be if there is sensitive information being stored on the site. This particular site allows a user to sign in or to log on and then select from a list of doctors or add a doctor. The user can then add, edit, or delete their reviews, but view other peoples’ reviews without the ability to edit or delete them. We will start by setting up the Ruby API back end.

The first step is to activate gem 'bcrypt' and gem 'jsonapi-serializer' in the Gemfile and utilize bundle install.

The next step is to set up the model using rails g model User. In this case first_name, email, and password_digest are the attributes.

Here is a sample schema:

As you will notice, password_digest is the appropriate wording for the users table. Next, the user.rb model must be modified to reflect the flow of information.

The relationships have been set up, has_secure_password is present and the validations are included. The user_serializer.rb will now be viewed.

The serializer determines which attributes will be transmitted to the front end. The relationship between the user and the doctors they have commented on is established. One can see how the UserSerializer is utilized to help package the json data. Error messages have been created. The jsonapi-serializer gem that is being utilized forces us to include the word ”object” in the doctors method.

The users_controller.rb file is examined next.

Unlike pure rails, here in the API it is JSON that is rendered and the UserSerializer class that was previously created is utilized.

In the front end there are the getter functions associated with the user button as well as the log on, sign in and sign out getter functions.

Next the user model is created.

The form allows for the appropriate information to be entered and
input type="password" is used so that the password is hidden as it is entered. The constructor does not include the password because we don’t want it to appear in the front end.

The next file to look at is userApi.js.

Note that localStorage is used to hold the user’s information in the front end.

Once these steps have been completed, you should be ready to have a user sign in or log on through the front end.