Protecting API Key in Angular 2

After spending more than a day searching on Google, I may not be using the right keywords to find the answer I need.

Here is my current setup:

I have an ExpressJS API running with pm2 on port 3000
An Angular 2 app being served via nginx

Both of these are running on the same server.

API calls to mydomain/api/ are proxied to 127.0.0.1:3000

For the API calls that require authorization, I will be implementing JWT and user authentication.

What I am trying to accomplish is generating a token for my Angular 2 app that allows or requires it to make public calls (such as listing products).

This token must be securely transferred, as I want to prevent others from accessing my products and prices through direct API calls with a stolen token.

Any assistance would be greatly appreciated.

Answer №1

It is crucial to ensure that your website uses HTTPS for all communication, as suggested by @eesdil. This adds an extra layer of security by encrypting all data exchanged between the client and server.

In a specific project involving Angular 2, Express, and JWT, I implemented password hashing using the pbkdf2 algorithm from the crypto module.

The workflow followed in this project was:

For /login/signup route: hash the password and generate a salt, then store it on the server.
For /login route: validate the password against the stored one, generate a JWT (JSON Web Token), and save it in localStorage on the client.
For /api route: send the JWT in the Auth header, validate it on the server, and send the response accordingly.

To see a working example of this implementation, check out: https://github.com/vladotesanovic/angular2-express-starter

Answer №2

It is crucial for your token to travel securely with HTTPS. By using HTTPS, your information remains encrypted and protected from potential threats.

UPDATE

According to information from Wikipedia:

HTTPS encrypts the entire HTTP protocol by layering it on top of TLS. This means that all aspects of the underlying HTTP protocol, including the request URL, query parameters, and headers, are secured.

Learn more about HTTPS here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Leveraging the capabilities of Express functions on the client side through the require method in Node.js

Trying to access the configuration variables set in the file named test.js which contains -- var aws = require('aws-sdk'); exports.connect = function(){ return aws; } Now, I am attempting to access it upon an OnClick event taking place ...

javascript node.js express global-variables requirejs

Bidirectional Binding of Angular HTML Fields in Quill Editor

Is there a way to incorporate HTML fields into Quill? I am looking to have numeric fields integrated within the text, and use two-way Angular binding. When trying to bind to the model, Quill seems to be removing my input fields. this.myValue = 5; this.m ...

angular quill

Is it possible to store Socket.IO responses in a cache for quicker retrieval?

Consider this scenario where I have a websocket implementation shown below: let itemsArray = []; function fetchData() { itemsArray = await db.query(`SELECT * FROM Items`); } function emitData() { io.sockets.in("room_foo").emit("data", JSON.stringify ...

javascript node.js socket.io

Show images from an array of base64 image data

I am currently facing an issue while trying to display images in base64 format within a RadListView component. Within the loop of the component, I have the following code snippet: let base64ImageSource = new ImageSource; base64ImageSource = fromBase64(re ...

angular nativescript angular2-nativescript

Express and subdomains for dynamic content only

How can subdomains be effectively managed using nodejs and express? Each subdomain will not contain static files like index.html, but rather pure code and logic. var express = require('express'), http = require('http'); var app = ...

node.js express

Testing asynchronous functions with Mocha

Currently, I am in the process of developing a node wrapper to interface with an external api. One particular challenge I am facing is testing the asynchronous functionality of the createJob method. Provided below is the test case code: api_key = "test_0d ...

javascript node.js testing coffeescript mocha.js

Ways to swap out element within ViewContainerRef in Angular

I am currently expanding my knowledge of Angular and I have encountered a challenge regarding dynamically creating components and swapping them within a single container. Here is the setup: <ng-container #container></ng-container> Here are the ...

javascript angular typescript

The storage system in Heroku

As a newcomer to the world of development, I've been diving into understanding how the Heroku filesystem functions. I recently completed an Express project that utilized multer for uploading images. In production, everything ran smoothly and I had no ...

reactjs express heroku

"Experiencing a Lambda function timeout while trying to send a message

Occasionally, when I send messages to a queue from a lambda function, the sqs.sendMessage method does not return anything and the lambda times out. This issue occurs intermittently. Despite attempting to modify the code multiple times to utilize await, pr ...

node.js aws-lambda amazon-sqs

Tips for fixing the error message of "Cannot access value property of null"

I am facing an issue in my Angular application where I need to conditionally display a div based on certain criteria. Initially, when the page loads, there are no console errors and the div is not shown due to the ngIf condition being false. However, upo ...

angular

Looking to build a unique form validator for two inputs? Ensure that one input number is consistently larger than the other with this guide

Is it possible to create a custom form validator with 2 inputs? My goal is to ensure that one input number is always greater than the other. ValidateMaxMin(control: FormControl) { console.log(control.value.productMin); if (control.value.productM ...

angular comparison angular-reactive-forms reactive

Join the Observable and formControl in Angular 4 by subscribing

My goal is to display the data retrieved from FireStore in the screen fields upon loading. However, the buildForm() function is being called before subscribing to the data, resulting in the failure to populate the screen fields with the FireStore data. pe ...

angular typescript firebase google-cloud-firestore angularfire2

Unable to track user (Mineflayer - Node.js)

Trying to track a player using the mineflayer library in Node.js, but encountering an error within the source code of the library itself. Attempted code: const mineflayer = require('mineflayer'); const { pathfinder, Movements, goals } = require( ...

javascript node.js minecraft mineflayer

Error: Unable to locate Angular2 Custom Service

I have implemented a custom service to populate a list of people in my HTML. Below is the code for my custom service: app.peopleListService.ts import { Injectable } from '@angular/core'; import { Person } from "../model/peopleModel"; @Injecta ...

angular typescript angular2-services

Checking the existence of a user's email in Node.js

Hey there! I am new here and currently learning Node.js with Express. I'm trying to find a way to check if a user's email already exists in the database. Here is what I have so far: const emailExists = user.findOne({ email: req.body.email }); if ...

javascript node.js express backend

Is there a way to extract a specific item from a ListView by tapping on it in Nativescript?

Attempting to retrieve data from a tap event using angular2 + typescript: This is the html code for the component: <RadListView row="1" [items]="groceryList" [class.visible]="listLoaded" (tap)="seeItem($event)" swipeActions="true" (itemSwipeProgr ...

angular typescript nativescript

Encountered a server error stating 'Empty response' while attempting to launch webpack-dev-server within a Docker container using Docker Compose on a Windows system running Docker Toolbox

Encountering difficulties while trying to access a react container run with docker-compose inside docker-machine. Despite being able to curl the webpage within the container, I am unable to access it from docker-machine or the host's browser. The back ...

node.js go docker docker-machine docker-toolbox

Dependency injection in Angular 2 service not functioning as expected

I am facing an issue while trying to retrieve static data from UserService in Angular 2. Although everything seems correct based on the documentation, it is not functioning as expected. Below is my UserComponent.ts import {Component ,OnInit } from ' ...

angular typescript service

The issue with Angular2 Material select dropdown is that it remains open even after being toggled

Exploring the world of Node.js, I am delving into utilizing the dropdown feature from Angular Material. However, an issue arises once the dropdown is opened - it cannot be closed by simply clicking another region of the page. Additionally, the dropdown lis ...

angular typescript angular-material2

Upgrade the Auth0 platform to Node version 8 for enhanced performance

My applications are currently running on Node-v4 and are using Auth0 for authorization. At the end of May, Auth0 is going to upgrade to Node-v8 which will no longer support Node-v4. I am unsure if I should also update my applications to a higher version of ...

java node.js npm auth0

QAnswer