Ways to analyze users who have clicked a button

Question

Ways to analyze users who have clicked a button

After a user registers, they are automatically taken to /proto where they can view a list of animals available for adoption. However, the challenge lies in identifying the specific user who clicked the button (as this information must be associated with the selected pet) and redirecting them to the /adminPage. Below is the code snippet from my app.js file:

//jshint esversion:6
const express = require("express");
const bodyParser = require("body-parser");
const ejs = require("ejs");
const mongoose = require('mongoose');
var multer = require('multer');

var mongoose = require('mongoose');
 var imgModel = require('./model');

const app = express();

// Code continues...

Now, let's take a look at my /prototype.ejs file:

<%- include('partials/header') %>
<div class="row">

  <%  items.forEach(function(items){ %>
<div class="card col-lg-4 col-md-6">

  <img alt="John" style="width:100%" src="data:image/<%=items.img.contentType%>;base64,
                     <%=items.img.data.toString('base64')%>"> 
  <h6><%=items.name%></h6>
  <h6><%=items.dob%></h6>
    <h6><%=items.breed%></h6>
       <h6><%=items.details%></h6>

  <p><button>adopt</button></p>
   </div>
        <% }) %>



</div>

<%- include('partials/footer') %>

Looking at /register.ejs:

<div class="container mt-5">
  <h1>Register</h1>

  <div class="row">
    <div class="col-sm-8">
      <div class="card">
        <div class="card-body">

          <!-- Register form goes here -->

        </div>
      </div>
    </div>

  </div>
</div>

<%- include('partials/header') %>

Finally, let's discuss adminPage.ejs:


<%- include("partials/header"); -%>
<section class="colored-section" id="adminTitle">

    <div class="container-fluid">

      <!-- Nav Bar -->

      <nav class="navbar navbar-expand-lg navbar-dark">

        <a class="navbar-brand" href="">AAS</a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">

          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="/addNew">Add new</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#pricing">Show adopted</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#cta">View All</a>
            </li>
          </ul>

        </div>
      </nav>


<%- include("partials/footer"); -%>

If you need further clarification on any specific part, feel free to ask!

javascript node.js mongodb express mongoose

Answer 1

Answer №1

If you're working on an app that needs user signup and authentication, consider integrating user authentication using JSON Web Tokens like this (https://www.npmjs.com/package/jsonwebtoken). With Express, creating authentication middleware is possible (https://expressjs.com/en/guide/using-middleware.html). When authenticating the user in the middleware function, insert the user object from Mongoose onto the request object passed to the route by Express. Here's a sample:

const jwt = require('jsonwebtoken')
const User = require('../models/user')

const auth = async (req, res, next) => {
    try {
        const token = req.header('Authorization').replace('Bearer ', '')
        const decoded = jwt.verify(token, 'shhh')
        const user = await User.findOne({ _id: decoded._id, 'tokens.token': token })
        
        if (user) {
            req.user = user
            req.token = token
            next()
        } else {
            throw new Error()
        }
    } catch (error) {
        res.status(401).send({ error: 'Please authenticate'})
    }
}

module.exports = auth

Remember, this is only part of the solution. You'll also need to send a valid token back to the client and store it in your User model within the login route handler. Ensure the client includes a valid token in the Authorization Header of the HTTP request sent to the server. Setting req.user = user in the example above is key, as it gives access to the user in your route handler via the req object, allowing you to identify the arriving user.

Answer 2

If you're working on an app that needs user signup and authentication, consider integrating user authentication using JSON Web Tokens like this (https://www.npmjs.com/package/jsonwebtoken). With Express, creating authentication middleware is possible (https://expressjs.com/en/guide/using-middleware.html). When authenticating the user in the middleware function, insert the user object from Mongoose onto the request object passed to the route by Express. Here's a sample:

const jwt = require('jsonwebtoken')
const User = require('../models/user')

const auth = async (req, res, next) => {
    try {
        const token = req.header('Authorization').replace('Bearer ', '')
        const decoded = jwt.verify(token, 'shhh')
        const user = await User.findOne({ _id: decoded._id, 'tokens.token': token })
        
        if (user) {
            req.user = user
            req.token = token
            next()
        } else {
            throw new Error()
        }
    } catch (error) {
        res.status(401).send({ error: 'Please authenticate'})
    }
}

module.exports = auth

Remember, this is only part of the solution. You'll also need to send a valid token back to the client and store it in your User model within the login route handler. Ensure the client includes a valid token in the Authorization Header of the HTTP request sent to the server. Setting req.user = user in the example above is key, as it gives access to the user in your route handler via the req object, allowing you to identify the arriving user.

Answer 3

Answer №2

The issue was successfully resolved through the implementation of Passport.js.

This advanced tool allows access to key fields like req.user, providing information on the currently logged-in authorized user.

Answer 4

The issue was successfully resolved through the implementation of Passport.js.

This advanced tool allows access to key fields like req.user, providing information on the currently logged-in authorized user.

Ways to analyze users who have clicked a button

Answer №1

Answer №2

Similar questions

Recompiling Node.js/npm packages after copying an app

Having trouble implementing ffprobe with fluent-ffmpeg

Loop through items in a list using Angular.js and display each item within an <

The successful execution of $.ajax does not occur

Struggling to get passport.js to verify credentials

An HTML form featuring various submit buttons for accomplishing different tasks

Encountering difficulties when attempting to upload a file to Google Cloud Platform using Multer in a Node.js

Issue with installing packages using node.js 9 and npm 5.5.1: encountering errors during installation process

The Image component in a test within Next.js was not wrapped in an act(...) during an update

Several jquery libraries are experiencing malfunctions

Tips for transforming an Observable stream into an Observable Array

Running two instances of the Express server within a single application

Is the $slice feature integrated into the php driver?

Creating a basic bar graph using d3.js with an array of input data

Managing the re-rendering in React

After deploying to the production server, Next.js is failing to fetch images using the image URL

Exploring the power of Node.js and underscore.js for advanced templating capabilities

Discover the Location and Sign Up for Angular2+ Service

Display information when hovering over a tag

npm ERROR! Failed to delete the specified tarball